/* ============================================================
 * ELOOP LOYALTY · DESIGN TOKENS
 * Single source of truth สำหรับ Design System ทั้งหมด
 * ============================================================ */
:root {
  /* ----- BRAND COLORS · ELOOP RED ----- */
  --el-primary-50:   #FFEBEE;
  --el-primary-100:  #FFCDD2;
  --el-primary-200:  #EF9A9A;
  --el-primary-300:  #E57373;
  --el-primary-400:  #EF5350;
  --el-primary-500:  #E53935;   /* PRIMARY · Eloop Red */
  --el-primary-600:  #D32F2F;
  --el-primary-700:  #C62828;
  --el-primary-800:  #B71C1C;
  --el-primary-900:  #7F0000;

  /* ----- BRAND ACCENT · ORANGE ----- */
  --el-accent-50:    #FFF3E0;
  --el-accent-100:   #FFE0B2;
  --el-accent-300:   #FFB74D;
  --el-accent-500:   #FF9800;
  --el-accent-600:   #FB8C00;
  --el-accent-700:   #E65100;

  /* ----- POINTS / GOLD ACCENT ----- */
  --el-gold-50:      #FFFBEB;
  --el-gold-100:     #FEF3C7;
  --el-gold-300:     #FCD34D;
  --el-gold-500:     #F59E0B;
  --el-gold-600:     #D97706;
  --el-gold-700:     #B45309;

  /* ----- TIER COLORS ----- */
  --tier-bronze:     #B45309;
  --tier-bronze-bg:  #FEF3C7;
  --tier-silver:     #64748B;
  --tier-silver-bg:  #E2E8F0;
  --tier-gold:       #D97706;
  --tier-gold-bg:    #FEF3C7;
  --tier-platinum:   #6D28D9;
  --tier-platinum-bg:#EDE9FE;

  /* ----- NEUTRALS ----- */
  --el-ink-900:      #0B1B1F;
  --el-ink-800:      #14272D;
  --el-ink-700:      #1F3A42;
  --el-ink-600:      #3B5862;
  --el-ink-500:      #5A7884;
  --el-ink-400:      #8AA1AB;
  --el-ink-300:      #B6C7CE;
  --el-ink-200:      #DDE6EA;
  --el-ink-100:      #EEF3F5;
  --el-ink-50:       #F7FAFB;
  --el-paper:        #FFFFFF;
  --el-surface:      #FAFCFD;

  /* ----- SEMANTIC ----- */
  --el-success:      #10B981;
  --el-success-bg:   #D1FAE5;
  --el-warning:      #F59E0B;
  --el-warning-bg:   #FEF3C7;
  --el-danger:       #EF4444;
  --el-danger-bg:    #FEE2E2;
  --el-info:         #1565C0;
  --el-info-bg:      #E3F2FD;

  /* ----- TYPOGRAPHY ----- */
  --font-display:    'Sora', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-body:       'IBM Plex Sans Thai', 'Sora', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* Type Scale (Mobile-first) */
  --fs-2xs:  0.625rem;  /* 10 */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.16em;

  /* ----- SPACING (4px base) ----- */
  --sp-0:   0;
  --sp-1:   0.25rem;   /* 4  */
  --sp-2:   0.5rem;    /* 8  */
  --sp-3:   0.75rem;   /* 12 */
  --sp-4:   1rem;      /* 16 */
  --sp-5:   1.25rem;   /* 20 */
  --sp-6:   1.5rem;    /* 24 */
  --sp-8:   2rem;      /* 32 */
  --sp-10:  2.5rem;    /* 40 */
  --sp-12:  3rem;      /* 48 */
  --sp-16:  4rem;      /* 64 */

  /* ----- RADIUS ----- */
  --rd-xs:   4px;
  --rd-sm:   8px;
  --rd-md:   12px;
  --rd-lg:   16px;
  --rd-xl:   20px;
  --rd-2xl:  24px;
  --rd-3xl:  32px;
  --rd-full: 9999px;

  /* ----- ELEVATION (Shadow) ----- */
  --sh-xs:   0 1px 2px rgba(11, 27, 31, 0.04);
  --sh-sm:   0 2px 4px rgba(11, 27, 31, 0.06), 0 1px 2px rgba(11, 27, 31, 0.04);
  --sh-md:   0 4px 12px rgba(11, 27, 31, 0.08), 0 2px 4px rgba(11, 27, 31, 0.04);
  --sh-lg:   0 12px 24px rgba(11, 27, 31, 0.10), 0 4px 8px rgba(11, 27, 31, 0.06);
  --sh-xl:   0 24px 48px rgba(11, 27, 31, 0.14), 0 8px 16px rgba(11, 27, 31, 0.08);
  --sh-glow: 0 8px 32px rgba(229, 57, 53, 0.32);
  --sh-glow-gold: 0 8px 32px rgba(245, 158, 11, 0.32);

  /* ----- MOTION ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 100ms;
  --dur-fast:    180ms;
  --dur-base:    280ms;
  --dur-slow:    420ms;
  --dur-slower:  640ms;

  /* ----- LAYOUT ----- */
  --app-max-width:  430px;
  --tabbar-height:  64px;
  --header-height:  56px;
  --safe-top:       env(safe-area-inset-top, 0);
  --safe-bottom:    env(safe-area-inset-bottom, 0);

  /* ----- GRADIENTS ----- */
  --grd-primary:    linear-gradient(135deg, #E53935 0%, #E53935 100%);
  --grd-card:       linear-gradient(150deg, #FFE566 0%, #FFB800 45%, #CC7700 100%);
  --grd-bronze:     linear-gradient(135deg, #B45309 0%, #F59E0B 100%);
  --grd-silver:     linear-gradient(135deg, #475569 0%, #94A3B8 100%);
  --grd-gold:       linear-gradient(135deg, #B45309 0%, #FCD34D 100%);
  --grd-platinum:   linear-gradient(135deg, #4C1D95 0%, #A78BFA 100%);
  --grd-mesh:       radial-gradient(at 20% 30%, #CFFAFE 0%, transparent 50%),
                    radial-gradient(at 80% 10%, #FEF3C7 0%, transparent 45%),
                    radial-gradient(at 50% 90%, #ECFEFF 0%, transparent 50%);
}

/* ============================================================
 * Theme presets — admin เลือกที่ /admin/pages/settings.php
 * default = 'red' (Eloop) — ค่าใน :root ใช้ตามปกติ ไม่ต้อง override
 * อื่นๆ override ผ่าน body class (Tier Bronze/Silver/Gold/Platinum
 * คงสีเดิม — ไม่ขึ้นกับ theme)
 * ============================================================ */
body.theme-blue {
  --el-primary-50:  #E3F2FD;
  --el-primary-100: #BBDEFB;
  --el-primary-200: #90CAF9;
  --el-primary-300: #64B5F6;
  --el-primary-400: #42A5F5;
  --el-primary-500: #2196F3;
  --el-primary-600: #1E88E5;
  --el-primary-700: #1976D2;
  --el-primary-800: #1565C0;
  --el-primary-900: #0D47A1;
  --grd-primary:    linear-gradient(135deg, #2196F3 0%, #1565C0 100%);
}

body.theme-green {
  --el-primary-50:  #E8F5E9;
  --el-primary-100: #C8E6C9;
  --el-primary-200: #A5D6A7;
  --el-primary-300: #81C784;
  --el-primary-400: #66BB6A;
  --el-primary-500: #4CAF50;
  --el-primary-600: #43A047;
  --el-primary-700: #388E3C;
  --el-primary-800: #2E7D32;
  --el-primary-900: #1B5E20;
  --grd-primary:    linear-gradient(135deg, #4CAF50 0%, #1B5E20 100%);
}

body.theme-orange {
  --el-primary-50:  #FFF3E0;
  --el-primary-100: #FFE0B2;
  --el-primary-200: #FFCC80;
  --el-primary-300: #FFB74D;
  --el-primary-400: #FFA726;
  --el-primary-500: #FF9800;
  --el-primary-600: #FB8C00;
  --el-primary-700: #F57C00;
  --el-primary-800: #EF6C00;
  --el-primary-900: #E65100;
  --grd-primary:    linear-gradient(135deg, #FF9800 0%, #E65100 100%);
}

/* ============================================================
 * RESET + BASE
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--el-ink-900);
  background: var(--el-surface);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; text-align: left; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea { font: inherit; }
::selection { background: var(--el-primary-200); color: var(--el-primary-800); }

/* ============================================================
 * APP SHELL · Mobile Container
 * ============================================================ */
.app {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--el-paper);
  position: relative;
  overflow: clip; /* clip ไม่กระทบ sticky positioning */
  box-shadow: 0 0 0 1px var(--el-ink-100);
}
@media (min-width: 480px) {
  body { background:
    linear-gradient(135deg, var(--el-primary-50) 0%, var(--el-gold-50) 100%);
  }
}

/* ============================================================
 * HEADER · Sticky Top Bar with Points
 * ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-5) var(--sp-4);
  background: #fff;
  border-bottom: 1px solid var(--el-ink-100);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.header__logo {
  position: relative;
  width: 56px;
  height: 36px;       /* layout row height = same as bell */
  overflow: hidden;   /* crop logo บน-ล่าง ที่ overflow ออกจากกล่อง */
  text-decoration: none;
  flex-shrink: 0;
}
.header__logo img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.header__bell {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--el-ink-50);
  display: grid; place-items: center;
  color: var(--el-ink-700);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.header__bell:hover { background: var(--el-ink-100); }
.points-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px 6px 6px;
  background: #fff;
  border-radius: var(--rd-full);
  border: 1px solid var(--el-ink-100);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.points-pill__coin {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #FFF7D6;
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 2px rgba(146, 64, 14, 0.22),
              0 2px 3px rgba(146, 64, 14, 0.20);
}
.points-pill__coin i {
  font-size: 16px;
  line-height: 1;
}
.points-pill__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--el-ink-900);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * MAIN CONTENT AREA
 * ============================================================ */
.main {
  padding-bottom: calc(var(--tabbar-height) + var(--sp-6) + var(--safe-bottom));
  min-height: calc(100vh - var(--header-height) - var(--tabbar-height));
}

/* ============================================================
 * MEMBERSHIP CARD · Hero (Member Page)
 * ============================================================ */
.member-page { padding: var(--sp-5) var(--sp-5) var(--sp-4); }

.member-card {
  position: relative;
  aspect-ratio: 1.586 / 1;
  border-radius: var(--rd-2xl);
  overflow: hidden;
  background: var(--grd-card);
  box-shadow: 0 10px 36px rgba(160, 100, 0, 0.35), var(--sh-md);
  animation: cardEnter var(--dur-slower) var(--ease-out);
  margin: 0 var(--sp-5);
  /* Tier color tokens — overridden per modifier */
  --ct-dark:  #3D2000;
  --ct-mid:   rgba(74,40,0,0.62);
  --ct-light: rgba(74,40,0,0.28);
}
@keyframes cardEnter {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.member-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.04) 40%,
    transparent 60%,
    rgba(255,255,255,0.08) 100%);
  pointer-events: none;
}
.member-card__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.member-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.member-card__brand { display: flex; flex-direction: column; gap: 1px; }
.member-card__logo-name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  color: var(--ct-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.member-card__logo-tag {
  font-size: var(--fs-2xs);
  color: var(--ct-mid);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.member-card__points-area { text-align: right; }
.member-card__points-label {
  font-size: var(--fs-2xs);
  color: var(--ct-mid);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.member-card__points-val {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-xl);
  color: var(--ct-dark);
  font-variant-numeric: tabular-nums;
}
.member-card__chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.member-card__chip {
  width: 42px; height: 32px;
  border-radius: 5px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}
.member-card__nfc {
  font-size: 22px;
  color: var(--ct-light);
  transform: rotate(90deg);
  display: block;
}
.member-card__number {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--ct-mid);
  letter-spacing: 0.2em;
}
.member-card__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.member-card__holder-label {
  font-size: var(--fs-2xs);
  color: var(--ct-mid);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.member-card__holder-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--ct-dark);
  letter-spacing: var(--ls-wide);
}

/* ---- Tier Card Variants ---- */

/* BRONZE — ทองแดงอุ่น / sandy copper */
.member-card--bronze {
  background: linear-gradient(135deg, #D4AA72 0%, #B8873C 30%, #96651C 60%, #6A3E08 100%);
  box-shadow: 0 10px 36px rgba(90,50,8,0.45), 0 2px 8px rgba(180,130,50,0.20);
  --ct-dark:  #2C1400;
  --ct-mid:   rgba(44,20,0,0.65);
  --ct-light: rgba(44,20,0,0.30);
}
.member-card--bronze .member-card__chip {
  filter: hue-rotate(-8deg) saturate(1.1) brightness(0.90) drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}
.member-card--bronze .member-card__shine {
  background: linear-gradient(135deg,
    rgba(255,230,160,0.30) 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 58%,
    rgba(180,110,20,0.12) 100%);
}

/* SILVER — เหล็กกล้า / steel grey */
.member-card--silver {
  background: linear-gradient(135deg, #ECEEF2 0%, #C4CDD6 30%, #8090A0 62%, #4A5C6C 100%);
  box-shadow: 0 10px 36px rgba(50,70,90,0.32), 0 2px 8px rgba(140,160,180,0.20);
  --ct-dark:  #0E1E2C;
  --ct-mid:   rgba(14,30,44,0.65);
  --ct-light: rgba(14,30,44,0.28);
}
.member-card--silver .member-card__chip {
  filter: saturate(0.10) brightness(1.05) drop-shadow(0 1px 3px rgba(0,0,0,0.22));
}
.member-card--silver .member-card__shine {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.08) 35%,
    transparent 55%,
    rgba(180,210,240,0.18) 100%);
}

/* GOLD — ทองคำสด / pure gold */
.member-card--gold {
  background: linear-gradient(135deg, #FFF4A8 0%, #FFD000 28%, #E09800 58%, #9A6200 100%);
  box-shadow: 0 10px 36px rgba(130,80,0,0.42), 0 2px 10px rgba(255,200,0,0.28);
  --ct-dark:  #2A1200;
  --ct-mid:   rgba(42,18,0,0.65);
  --ct-light: rgba(42,18,0,0.28);
}
.member-card--gold .member-card__chip {
  filter: saturate(1.1) brightness(0.92) drop-shadow(0 1px 3px rgba(0,0,0,0.22));
}
.member-card--gold .member-card__shine {
  background: linear-gradient(135deg,
    rgba(255,255,200,0.35) 0%,
    rgba(255,255,255,0.07) 40%,
    transparent 58%,
    rgba(255,210,0,0.15) 100%);
}

/* PLATINUM — แอนทราไซต์ / dark charcoal */
.member-card--platinum {
  background: linear-gradient(135deg, #565660 0%, #38383E 28%, #232328 60%, #141418 100%);
  box-shadow: 0 14px 48px rgba(10,10,14,0.65), 0 2px 12px rgba(120,120,160,0.18);
  --ct-dark:  #F0F0F4;
  --ct-mid:   rgba(240,240,244,0.72);
  --ct-light: rgba(240,240,244,0.34);
}
.member-card--platinum .member-card__chip {
  filter: saturate(0) brightness(0.72) drop-shadow(0 1px 4px rgba(0,0,0,0.50));
}
.member-card--platinum .member-card__shine {
  background: linear-gradient(135deg,
    rgba(200,200,220,0.14) 0%,
    rgba(255,255,255,0.03) 38%,
    transparent 55%,
    rgba(160,160,200,0.08) 100%);
}
.member-card__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  z-index: 0;
}
.member-card__platinum-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: var(--ct-mid);
  border: 1px solid var(--ct-light);
  padding: 4px 10px;
  border-radius: var(--rd-full);
}

/* ----- Tier Strip ----- */
.tier-strip {
  margin-top: var(--sp-4);
  margin-inline: var(--sp-4);
  background: var(--el-paper);
  border-radius: var(--rd-xl);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--sh-md);
  border: 1px solid var(--el-ink-100);
}
.tier-strip__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--rd-full);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.tier-badge--bronze { background: var(--tier-bronze-bg); color: var(--tier-bronze); }
.tier-badge--silver { background: var(--tier-silver-bg); color: var(--tier-silver); }
.tier-badge--gold { background: var(--tier-gold-bg); color: var(--tier-gold); }
.tier-badge--platinum { background: var(--tier-platinum-bg); color: var(--tier-platinum); }

.tier-strip__progress-text {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
  font-weight: var(--fw-medium);
}
.tier-strip__progress-text strong {
  color: var(--el-ink-900);
  font-weight: var(--fw-bold);
}
.tier-progress {
  height: 6px;
  background: var(--el-ink-100);
  border-radius: var(--rd-full);
  overflow: hidden;
}
.tier-progress__fill {
  height: 100%;
  background: var(--grd-bronze);
  border-radius: var(--rd-full);
  transition: width var(--dur-slower) var(--ease-out);
}

/* tier-fill: reusable fill color per tier */
.tier-fill--bronze   { background: var(--grd-bronze); }
.tier-fill--silver   { background: var(--grd-silver); }
.tier-fill--gold     { background: var(--grd-gold); }
.tier-fill--platinum { background: var(--grd-platinum); }

/* ── Home: mini tier progress in greeting card ── */
.hp-tier-progress {
    display: block;
    padding: 6px 16px 14px;
    text-decoration: none;
}
.hp-tier-progress__track {
    height: 5px;
    background: var(--el-ink-100);
    border-radius: var(--rd-full);
    overflow: hidden;
    margin-bottom: 5px;
}
.hp-tier-progress__fill {
    height: 100%;
    border-radius: var(--rd-full);
    transition: width .6s var(--ease-out);
}
.hp-tier-progress__label {
    font-size: 11px;
    color: var(--el-ink-400);
    text-align: right;
}

/* ── Member card: slim progress bar ── */
.member-card__progress-bar {
    height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: 0 0 var(--rd-xl) var(--rd-xl);
    overflow: hidden;
}
.member-card__progress-fill {
    height: 100%;
    border-radius: var(--rd-full);
    transition: width .6s var(--ease-out);
}

/* ----- Member Tier Benefits ----- */
.tier-benefits {
  background: var(--el-paper);
  border-radius: var(--rd-2xl);
  padding: var(--sp-4) var(--sp-3);
  margin: var(--sp-4) var(--sp-5) 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tier-benefits__title {
  display: flex; align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  margin: 0 0 4px;
  padding: 0 var(--sp-2);
  letter-spacing: 0.04em;
}
.tier-benefits__title-dot {
  width: 8px; height: 8px;
  background: var(--el-primary-500);
  border-radius: 50%;
  flex-shrink: 0;
}
.tier-benefits__divider {
  height: 1px;
  background: linear-gradient(to right, var(--el-ink-200), transparent);
  margin: 0 var(--sp-2) 6px;
}

/* Tier Cards Carousel — credit-card style, swipe left/right */
.tier-carousel {
  position: relative;
  margin-bottom: var(--sp-4);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.tier-carousel__viewport {
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  padding: 8px 0 10px;
}
.tier-carousel__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  cursor: grab;
}
.tier-carousel__track:active { cursor: grabbing; }

/* Each tier card — almost square (lightly wider than tall) */
.tier-card {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  position: absolute;
  width: 150px;
  aspect-ratio: 1.10 / 1;
  border-radius: var(--rd-2xl);
  padding: 0;
  overflow: hidden;
  text-align: left;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 0.45s cubic-bezier(0.34, 1.20, 0.40, 1.00),
              opacity 0.45s ease,
              filter 0.45s ease;
  transform-origin: center center;
  will-change: transform, opacity;
}
.tier-card__shine {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.20) 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}
.tier-card__inner {
  position: relative;
  display: flex; flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 12px 14px;
  z-index: 2;
}
.tier-card__top {
  display: flex; align-items: center; justify-content: space-between;
}
.tier-card__brand {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.tier-card__level-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #fff;
  background: rgba(0, 0, 0, 0.30);
  padding: 2px 7px;
  border-radius: var(--rd-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tier-card__center {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.tier-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);
}
.tier-card__name-sub {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
.tier-card__bottom {
  display: flex; align-items: center;
}
.tier-card__threshold {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* YOU pill — มุมขวาบน (แทน LV badge เมื่อเป็น tier ปัจจุบัน) */
.tier-card__youmark {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--el-primary-600);
  background: #fff;
  padding: 3px 8px;
  border-radius: var(--rd-full);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.30);
}
/* ซ่อน LV badge เมื่อมี YOU pill (current tier) */
.tier-card--current .tier-card__level-badge {
  display: none;
}

/* Per-tier card gradients — ตรงกับ .member-card-- ในแต่ละ tier */

/* BRONZE — ทองแดงเข้ม */
.tier-card--bronze {
  background: linear-gradient(135deg, #D4AA72 0%, #B8873C 30%, #96651C 60%, #6A3E08 100%);
  box-shadow:
    0 12px 36px rgba(90, 50, 8, 0.45),
    0 2px 8px rgba(180, 130, 50, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.tier-card--bronze .tier-card__shine {
  background: linear-gradient(135deg,
    rgba(255, 230, 160, 0.30) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    transparent 58%,
    rgba(180, 110, 20, 0.12) 100%);
}

/* SILVER — เหล็กกล้า / steel grey */
.tier-card--silver {
  background: linear-gradient(135deg, #ECEEF2 0%, #C4CDD6 30%, #8090A0 62%, #4A5C6C 100%);
  box-shadow:
    0 12px 36px rgba(50, 70, 90, 0.32),
    0 2px 8px rgba(140, 160, 180, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.tier-card--silver .tier-card__shine {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    transparent 55%,
    rgba(180, 210, 240, 0.18) 100%);
}
/* silver bg สว่าง — ต้องใช้ตัวอักษรสีเข้ม */
.tier-card--silver .tier-card__brand,
.tier-card--silver .tier-card__name {
  color: #0E1E2C;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.40);
}
.tier-card--silver .tier-card__name-sub,
.tier-card--silver .tier-card__threshold {
  color: rgba(14, 30, 44, 0.70);
  text-shadow: none;
}
.tier-card--silver .tier-card__level-badge {
  background: rgba(14, 30, 44, 0.20);
  color: #0E1E2C;
}

/* GOLD — ทองคำสด */
.tier-card--gold {
  background: linear-gradient(135deg, #FFF4A8 0%, #FFD000 28%, #E09800 58%, #9A6200 100%);
  box-shadow:
    0 12px 36px rgba(130, 80, 0, 0.42),
    0 2px 10px rgba(255, 200, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.tier-card--gold .tier-card__shine {
  background: linear-gradient(135deg,
    rgba(255, 255, 200, 0.35) 0%,
    rgba(255, 255, 255, 0.07) 40%,
    transparent 58%,
    rgba(255, 210, 0, 0.15) 100%);
}
/* gold ส่วนบนสว่าง — ใช้ตัวอักษรสีเข้ม */
.tier-card--gold .tier-card__brand,
.tier-card--gold .tier-card__name {
  color: #2A1200;
  text-shadow: 0 1px 2px rgba(255, 244, 168, 0.40);
}
.tier-card--gold .tier-card__name-sub,
.tier-card--gold .tier-card__threshold {
  color: rgba(42, 18, 0, 0.72);
  text-shadow: none;
}
.tier-card--gold .tier-card__level-badge {
  background: rgba(42, 18, 0, 0.20);
  color: #2A1200;
}

/* PLATINUM — แอนทราไซต์ / dark charcoal */
.tier-card--platinum {
  background: linear-gradient(135deg, #565660 0%, #38383E 28%, #232328 60%, #141418 100%);
  box-shadow:
    0 14px 48px rgba(10, 10, 14, 0.65),
    0 2px 12px rgba(120, 120, 160, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.tier-card--platinum .tier-card__shine {
  background: linear-gradient(135deg,
    rgba(200, 200, 220, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 38%,
    transparent 55%,
    rgba(160, 160, 200, 0.08) 100%);
}

/* Card positions in carousel (3D depth) */
.tier-card[data-position="current"] {
  transform: translateX(0) translateZ(50px) scale(1) rotateY(0);
  opacity: 1;
  z-index: 5;
  filter: none;
}
.tier-card[data-position="prev"] {
  transform: translateX(-80px) translateZ(0) scale(0.72) rotateY(15deg);
  opacity: 0.55;
  z-index: 3;
  filter: brightness(0.80);
}
.tier-card[data-position="next"] {
  transform: translateX(80px) translateZ(0) scale(0.72) rotateY(-15deg);
  opacity: 0.55;
  z-index: 3;
  filter: brightness(0.80);
}
.tier-card[data-position="far-prev"] {
  transform: translateX(-130px) translateZ(-80px) scale(0.55) rotateY(22deg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.tier-card[data-position="far-next"] {
  transform: translateX(130px) translateZ(-80px) scale(0.55) rotateY(-22deg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* Navigation buttons */
.tier-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--el-ink-700);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.tier-carousel__nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.tier-carousel__nav:active { transform: translateY(-50%) scale(0.95); }
.tier-carousel__nav--prev { left: 4px; }
.tier-carousel__nav--next { right: 4px; }

/* Pagination dots */
.tier-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}
.tier-carousel__dot {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--el-ink-200);
  transition: all var(--dur-base) var(--ease-out);
  padding: 0;
}
.tier-carousel__dot--active {
  background: var(--el-primary-500);
  width: 24px;
  border-radius: var(--rd-full);
}

/* Selected tier benefits panel */
.tier-benefits__panel {
  background: var(--el-ink-50);
  border-radius: var(--rd-lg);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
  border: 1px solid var(--el-ink-100);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.tier-benefits__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.tier-benefits__panel-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: var(--rd-full);
  text-transform: uppercase;
}
.tier-benefits__panel-status--current {
  background: var(--el-primary-50);
  color: var(--el-primary-700);
}
.tier-benefits__panel-status--achieved {
  background: var(--el-success-bg);
  color: var(--el-success);
}
.tier-benefits__panel-status--locked {
  background: var(--el-ink-100);
  color: var(--el-ink-500);
}

/* progress text + bar styling */
.tier-benefits__progress-text {
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
  margin: 12px 0 6px;
  text-align: center;
}
.tier-benefits__progress-text strong {
  color: var(--el-ink-900);
  font-weight: var(--fw-bold);
}
.tier-benefits__progress-text--max {
  color: var(--el-primary-600);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

/* current tier benefits list */
.tier-benefits__current-title {
  font-size: var(--fs-sm);
  color: var(--el-ink-700);
  margin: var(--sp-3) 0 var(--sp-2);
  font-weight: var(--fw-medium);
}
.tier-benefits__current-title strong {
  color: var(--el-primary-700);
  font-weight: var(--fw-bold);
}
.tier-benefits__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.tier-benefits__item {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--el-ink-800);
  line-height: 1.55;
  font-weight: var(--fw-regular);
}
/* red dot bullet via ::before — aligns with first line of text */
.tier-benefits__item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: var(--el-primary-500);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12);
}

/* ----- Profile Section ----- */
.profile {
  margin-top: var(--sp-6);
  padding: 0 var(--sp-5);
}
.profile__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-5);
}
.profile__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--el-paper);
  box-shadow: 0 0 0 3px var(--el-primary-500), var(--sh-md);
  background: var(--el-primary-500);
}
.profile__avatar svg, .profile__avatar img { width: 100%; height: 100%; display: block; }
.profile__name {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  letter-spacing: var(--ls-tight);
}
.profile__tier-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--el-accent-600);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}

/* ----- Field Cards ----- */
.field-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--el-paper);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-lg);
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.field:hover, .field:active { border-color: var(--el-primary-300); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.field__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--el-primary-50);
  color: var(--el-primary-600);
  display: grid; place-items: center;
  font-size: var(--fs-lg);
}
.field__body { flex: 1; min-width: 0; }
.field__label {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
}
.field__value {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
}
.field__value--muted {
  color: var(--el-ink-400);
  font-weight: var(--fw-regular);
  text-decoration: underline dotted;
}
.field__action { color: var(--el-ink-300); font-size: 18px; flex-shrink: 0; }
.field__inline-input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
  font-family: var(--font-body);
  padding: 0;
  cursor: text;
  caret-color: var(--el-primary-500);
}
.field__inline-input::placeholder { color: var(--el-ink-400); font-weight: var(--fw-regular); }
.field__inline-input:focus { color: var(--el-primary-600); }
.field__verified {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--el-success);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* Quick Actions */
.quick-actions {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--el-surface);
  border-radius: var(--rd-md);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.quick-action:active { transform: scale(0.95); }
.quick-action__icon {
  width: 40px; height: 40px;
  border-radius: var(--rd-md);
  background: var(--el-primary-50);
  color: var(--el-primary-600);
  display: grid; place-items: center;
  font-size: var(--fs-lg);
}
.quick-action__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-700);
  text-align: center;
}

/* ============================================================
 * REWARDS PAGE
 * ============================================================ */
.rewards-page { padding: var(--sp-4); }
.rewards-filter {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 0 var(--sp-1) var(--sp-3);
  margin: 0 calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
  scrollbar-width: none;
}
.rewards-filter::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--rd-full);
  background: var(--el-paper);
  border: 1px solid var(--el-ink-200);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--el-ink-700);
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.filter-chip--active {
  background: var(--el-primary-500);
  color: #fff;
  border-color: var(--el-primary-500);
}
.reward-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.reward-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--el-paper);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-lg);
  box-shadow: var(--sh-xs);
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.reward-item:active { transform: scale(0.98); box-shadow: var(--sh-sm); }
.reward-item--locked { opacity: 0.6; filter: saturate(0.6); }
.reward-item--out { opacity: 0.55; }
.reward-item__media {
  width: 88px; height: 88px;
  flex-shrink: 0;
  border-radius: var(--rd-md);
  background: linear-gradient(135deg, var(--el-gold-100), var(--el-gold-300));
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.reward-item__media--image { background: var(--el-ink-50); }
.reward-item__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.reward-item__icon-emoji { font-size: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.reward-item__icon-svg { display: grid; place-items: center; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12)); }
.reward-item__icon-svg svg { width: 44px; height: 44px; }
.reward-item__out {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: grid; place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--el-ink-700);
  backdrop-filter: blur(2px);
}
.reward-item__body {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  gap: var(--sp-2);
}
.reward-item__info { display: flex; flex-direction: column; gap: 2px; }
.reward-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.reward-item__desc {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reward-item__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.reward-item__value {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--rd-full);
  background: rgba(34, 197, 94, 0.10);
  color: #15803D;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.reward-item__stock {
  display: inline-flex;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--rd-full);
  background: var(--el-ink-50);
  color: var(--el-ink-600);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.reward-item__stock--out {
  background: rgba(220, 38, 38, 0.08);
  color: var(--el-red-600);
}
.reward-item__stock--urgent {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
}
.reward-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--el-ink-100);
}
.reward-item__points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--el-gold-700);
  font-variant-numeric: tabular-nums;
}
.reward-item__points-coin {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #FFF7D6;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 1px rgba(146, 64, 14, 0.22), 0 1px 2px rgba(146, 64, 14, 0.16);
}
.reward-item__points-coin i {
  font-size: 12px;
  line-height: 1;
}
.btn-redeem {
  padding: 6px 16px;
  border-radius: var(--rd-full);
  background: var(--grd-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  transition: transform var(--dur-fast) var(--ease-spring);
  box-shadow: var(--sh-glow);
}
.btn-redeem:active { transform: scale(0.94); }
.btn-redeem:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-redeem--locked {
  background: var(--el-ink-200); color: var(--el-ink-600); box-shadow: none;
}

/* ============================================================
 * REWARD DETAIL PANEL
 * ============================================================ */
.reward-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--el-paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
  overflow: hidden;
}
.reward-detail-overlay[aria-hidden="false"] {
  transform: translateX(0);
}
.reward-detail-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.reward-detail-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
  background: var(--el-paper);
  flex-shrink: 0;
}
.reward-detail-back {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: var(--fs-xl);
  color: var(--el-ink-700);
  flex-shrink: 0;
}
.reward-detail-header__title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
}
.reward-detail-header__pts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--el-gold-100);
  padding: 4px 10px;
  border-radius: var(--rd-full);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--el-gold-700);
}
.reward-detail-body {
  flex: 1;
  overflow-y: auto;
}
.reward-detail-hero {
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--el-gold-100), var(--el-gold-300));
  display: grid;
  place-items: center;
  overflow: hidden;
}
.reward-detail-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.reward-detail-hero__icon {
  color: var(--el-gold-700);
  opacity: 0.9;
}
.reward-detail-hero__icon svg { width: 80px; height: 80px; }

/* Reward gallery — horizontal scroll under cover */
.reward-gallery {
  display: flex;
  gap: 8px;
  padding: 8px var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: var(--el-paper);
}
.reward-gallery::-webkit-scrollbar { height: 4px; }
.reward-gallery::-webkit-scrollbar-thumb { background: var(--el-ink-200); border-radius: 2px; }
.reward-gallery__item {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--el-ink-100);
  background: var(--el-ink-50);
  cursor: pointer;
  padding: 0;
  scroll-snap-align: start;
}
.reward-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reward-gallery__item:active { transform: scale(0.97); }

/* ── Image Lightbox ───────────────────────────────────── */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.img-lightbox[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.img-lightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px;
}
.img-lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.img-lightbox__close,
.img-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s ease, transform 0.1s ease;
}
.img-lightbox__close:hover,
.img-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.img-lightbox__close:active,
.img-lightbox__nav:active { transform: scale(0.92); }
.img-lightbox__close { top: 14px; right: 14px; }
.img-lightbox__nav { top: 50%; transform: translateY(-50%); }
.img-lightbox__nav:active { transform: translateY(-50%) scale(0.92); }
.img-lightbox__nav--prev { left: 14px; }
.img-lightbox__nav--next { right: 14px; }
.img-lightbox--single .img-lightbox__nav,
.img-lightbox--single .img-lightbox__counter { display: none; }
.img-lightbox__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

/* Make hero clickable */
.reward-detail-hero img { cursor: zoom-in; }
.reward-gallery__item { cursor: zoom-in; }

.reward-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  background: var(--el-paper);
  gap: var(--sp-3);
}
.reward-detail-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--el-ink-900);
  line-height: var(--lh-snug);
  flex: 1;
}
.reward-detail-title {
  flex: 1;
  min-width: 0;
}
.reward-detail-value {
  display: inline-flex;
  width: fit-content;
  margin-top: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--rd-full);
  background: rgba(34, 197, 94, 0.10);
  color: #15803D;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.reward-detail-pts-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.reward-detail-pts-num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--el-gold-700);
}
.reward-detail-tabs {
  display: flex;
  border-bottom: 2px solid var(--el-ink-100);
  background: var(--el-paper);
  padding: 0 var(--sp-4);
  gap: var(--sp-4);
}
.reward-detail-tab {
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--el-ink-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--dur-fast);
}
.reward-detail-tab--active {
  color: var(--el-primary-500);
  border-bottom-color: var(--el-primary-500);
  font-weight: var(--fw-semibold);
}
.reward-detail-content {
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--el-ink-700);
  line-height: var(--lh-relaxed);
  white-space: pre-line;
}
.reward-detail-footer {
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--el-paper);
  border-top: 1px solid var(--el-ink-100);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.btn-redeem-cta {
  padding: var(--sp-4) var(--sp-8);
  min-width: 240px;
  border-radius: var(--rd-full);
  background: var(--grd-primary);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
}
.btn-redeem-cta:active { transform: scale(0.97); }
.btn-redeem-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.reward-detail-right-cta { display: none; }
.reward-detail-close-desktop { display: none; }

/* ============================================================
 * NEWS PAGE
 * ============================================================ */
.news-page { padding: var(--sp-4); }
.news-list {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.news-item {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--el-paper);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-lg);
  box-shadow: var(--sh-xs);
  position: relative;
  transition: all var(--dur-base) var(--ease-out);
}
.news-item:active { transform: scale(0.99); box-shadow: var(--sh-sm); }
.news-item--pinned {
  border: 1px solid var(--el-primary-200);
  background: linear-gradient(135deg, var(--el-primary-50), var(--el-paper) 60%);
}
.news-item--pinned::before {
  content: '📌 PINNED';
  position: absolute;
  top: -8px; left: var(--sp-4);
  background: var(--el-primary-500);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  padding: 2px 8px;
  border-radius: var(--rd-full);
}
.news-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.news-tag {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  padding: 3px 8px;
  border-radius: var(--rd-sm);
  background: var(--el-accent-50);
  color: var(--el-accent-600);
}
.news-tag--PROMOTION { background: var(--el-accent-50); color: var(--el-accent-600); }
.news-tag--FLASH\ SALE { background: var(--el-warning-bg); color: var(--el-warning); }
.news-tag--BIRTHDAY { background: #FCE7F3; color: #BE185D; }
.news-tag--NEW\ PRODUCT { background: var(--el-info-bg); color: var(--el-info); }
.news-item__date {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  font-family: var(--font-mono);
}
.news-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.news-item__desc {
  font-size: var(--fs-sm);
  color: var(--el-ink-600);
  line-height: var(--lh-relaxed);
}

/* ============================================================
 * SHARED LOADING
 * ============================================================ */
.app-loader {
  --loader-red: var(--el-primary-500);
  --loader-dark-red: #7F1D1D;
  width: 100%;
  min-height: 132px;
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--loader-red);
  text-align: center;
}
.app-loader--page { min-height: 46vh; }
.app-loader__percent {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--loader-red);
  text-shadow: 0 0 10px rgba(229, 57, 53, 0.30);
  font-variant-numeric: tabular-nums;
}
.app-loader__battery {
  width: 40px;
  height: 70px;
  border: 3px solid var(--el-ink-300);
  border-radius: 6px;
  padding: 3px;
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--el-paper);
}
.app-loader__battery::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 10px;
  width: 14px;
  height: 5px;
  background: var(--el-ink-300);
  border-radius: 2px 2px 0 0;
}
.app-loader__fill {
  width: 100%;
  min-height: 2px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--loader-dark-red), var(--loader-red));
  box-shadow: 0 0 15px rgba(229, 57, 53, 0.26);
  transition: height 0.18s ease;
}
.app-loader__label {
  max-width: 220px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-500);
  line-height: var(--lh-snug);
}

/* ============================================================
 * HISTORY PAGE
 * ============================================================ */
.history-page { padding: var(--sp-0); }
.history-tabs {
  display: flex;
  background: var(--el-paper);
  border-bottom: 1px solid var(--el-ink-100);
  padding: 0 var(--sp-4);
  position: sticky;
  /* offset = header จริง + segment จริง (วัดทั้ง 2 ผ่าน JS)
     fallback: header-height + safe-top + 56px เมื่อ JS ยังไม่ run */
  top: calc(var(--header-h-actual, calc(var(--header-height) + var(--safe-top))) + var(--history-segment-h, 56px));
  z-index: 5;
}
.history-tab {
  flex: 1;
  padding: var(--sp-4) var(--sp-2);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.history-tab--active { color: var(--el-primary-600); }
.history-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 3px;
  background: var(--el-primary-500);
  border-radius: var(--rd-full);
}
.history-tab__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: var(--rd-full);
  background: var(--el-ink-100);
  color: var(--el-ink-600);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  vertical-align: middle;
}
.history-tab--active .history-tab__count {
  background: var(--el-primary-500); color: #fff;
}
.history-list { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.history-state {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--el-ink-400);
  font-size: var(--fs-sm);
}
.history-state--error { color: var(--el-danger); }
.history-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--el-ink-100);
}
.history-item:last-child { border-bottom: none; }
.history-item__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-md);
}
.history-item__icon--earn { background: var(--el-success-bg); color: var(--el-success); }
.history-item__icon--redeem { background: var(--el-danger-bg); color: var(--el-danger); }
.history-item__body { flex: 1; min-width: 0; }
.history-item__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
  line-height: var(--lh-snug);
}
.history-item__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
}
.history-item__channel {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  padding: 1px 6px;
  background: var(--el-ink-50);
  color: var(--el-ink-600);
  border-radius: var(--rd-xs);
  font-weight: var(--fw-medium);
}
.history-item__amount {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}
.history-item__amount--earn { color: var(--el-success); }
.history-item__amount--redeem { color: var(--el-danger); }
/* Migration 095: pending / cancelled → เทา · ไม่ใช่ยอดจริง */
.history-item__amount--pending { color: var(--el-ink-400); }
.history-item__amount-suffix {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--el-ink-400);
  letter-spacing: var(--ls-wider);
}
/* Migration 095: pending / cancelled / revoked badges + reason text */
.history-item__badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: var(--rd-xs);
  vertical-align: 1px;
}
.history-item__badge--pending {
  background: var(--el-warn-bg, #fff4d6);
  color: var(--el-warn, #b57500);
}
.history-item__badge--cancelled {
  background: var(--el-ink-50);
  color: var(--el-ink-600);
}
.history-item__badge--revoked {
  background: var(--el-danger-bg);
  color: var(--el-danger);
}
.history-item__reason {
  font-size: var(--fs-2xs);
  color: var(--el-ink-500);
  font-style: italic;
}

/* ============================================================
 * HISTORY — SEGMENT SWITCHER & ORDER CARDS
 * ============================================================ */
.history-segment {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--el-paper);
  border-bottom: 1px solid var(--el-ink-100);
  position: sticky;
  /* --header-h-actual = ความสูงจริงของ .header (วัดผ่าน JS รวม safe-top notch)
     ถ้า JS ยังไม่ run → fallback คำนวณจาก --header-height + --safe-top */
  top: var(--header-h-actual, calc(var(--header-height) + var(--safe-top)));
  z-index: 6;
}
.history-segment__btn {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--rd-full);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
  background: var(--el-ink-50);
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.history-segment__btn--active {
  background: var(--el-primary-500);
  color: #fff;
}

/* ============================================================
 * TRANSACTION DETAIL BOTTOM SHEET
 * ============================================================ */
.tx-sheet {
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.tx-sheet[aria-hidden="false"] { pointer-events: auto; }
.tx-sheet[aria-hidden="true"]  { opacity: 0; }
.tx-sheet[aria-hidden="false"] { opacity: 1; }

.tx-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.tx-sheet__panel {
  position: relative;
  background: var(--el-paper);
  border-radius: var(--rd-xl) var(--rd-xl) 0 0;
  padding: var(--sp-2) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--sp-4);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
  max-height: 80vh;
  overflow-y: auto;
}
.tx-sheet[aria-hidden="false"] .tx-sheet__panel { transform: translateY(0); }

.tx-sheet__handle {
  width: 40px; height: 4px;
  background: var(--el-ink-200);
  border-radius: var(--rd-full);
  margin: 0 auto var(--sp-2);
  flex-shrink: 0;
}
.tx-sheet__head {
  display: flex; align-items: center; gap: var(--sp-4);
}
.tx-sheet__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
}
.tx-sheet__icon--earn    { background: var(--el-success-bg); color: var(--el-success); }
.tx-sheet__icon--redeem  { background: var(--el-danger-bg);  color: var(--el-danger);  }
.tx-sheet__icon--adjust  { background: var(--el-ink-100);    color: var(--el-ink-600); }

.tx-sheet__amount {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tx-sheet__amount--earn   { color: var(--el-success); }
.tx-sheet__amount--redeem { color: var(--el-danger);  }
.tx-sheet__amount--adjust { color: var(--el-ink-700); }
/* Migration 095: pending / cancelled → เทา · ไม่ใช่ยอดจริง */
.tx-sheet__amount--pending { color: var(--el-ink-400); }

.tx-sheet__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
  line-height: var(--lh-snug);
}
.tx-sheet__rows {
  display: flex; flex-direction: column;
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-md);
  overflow: hidden;
}
.tx-sheet__row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
}
.tx-sheet__row:last-child { border-bottom: none; }
.tx-sheet__row-label {
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
  flex-shrink: 0;
}
.tx-sheet__row-value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-800);
  text-align: right;
  word-break: break-all;
}
.tx-sheet__row-value--link {
  color: var(--el-primary);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-align: right;
  word-break: break-all;
}
.tx-sheet__row-value--link i {
  font-size: 13px;
  vertical-align: middle;
  margin-left: 3px;
  opacity: 0.75;
}
.tx-sheet__row-value--badge {
  background: var(--el-ink-100);
  color: var(--el-ink-700);
  padding: 2px 10px;
  border-radius: var(--rd-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}
/* Migration 095: pending / cancelled / revoked status badges in detail sheet */
.tx-sheet__row-value--badge-pending {
  background: var(--el-warn-bg, #fff4d6);
  color: var(--el-warn, #b57500);
}
.tx-sheet__row-value--badge-cancelled {
  background: var(--el-ink-50);
  color: var(--el-ink-600);
}
.tx-sheet__row-value--badge-revoked {
  background: var(--el-danger-bg);
  color: var(--el-danger);
}
.tx-sheet__close {
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--rd-full);
  background: var(--el-ink-100);
  color: var(--el-ink-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  flex-shrink: 0;
}

.order-list { padding: var(--sp-3) var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }

.order-card {
  background: var(--el-paper);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-lg);
  overflow: hidden;
}
.order-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
}
.order-card__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--rd-md);
  background: var(--el-primary-50);
  color: var(--el-primary-600);
  display: grid; place-items: center;
  font-size: var(--fs-md);
}
.order-card__meta { flex: 1; min-width: 0; }
.order-card__number {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--el-ink-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-card__sub {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
}
.order-card__platform {
  padding: 1px 6px;
  border-radius: var(--rd-xs);
  background: var(--el-ink-50);
  color: var(--el-ink-600);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
}
.order-card__warranty {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--rd-full);
  background: var(--el-success-bg);
  color: var(--el-success);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.order-card__products { padding: var(--sp-2) var(--sp-4); }
.order-product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--el-ink-50);
}
.order-product:last-child { border-bottom: none; }
.order-product__img {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--rd-md);
  object-fit: cover;
  background: var(--el-ink-50);
}
.order-product__img--placeholder {
  display: grid; place-items: center;
  font-size: var(--fs-lg);
  color: var(--el-ink-300);
}
.order-product__info { flex: 1; min-width: 0; }
.order-product__sku {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-product__detail {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  margin-top: 2px;
}

.order-card__total {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--el-ink-100);
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
}
.order-card__footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--el-ink-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.order-card__total-amt {
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
}
.order-card__total-amt strong {
  color: var(--el-ink-900);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.order-card__claim-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  border-radius: var(--rd-full);
  border: 1.5px solid var(--el-primary-200);
  background: #fff;
  color: var(--el-primary-600);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast);
}
.order-card__claim-btn:active { background: var(--el-primary-50); }
.order-card__claim-btn i { font-size: 14px; }
.order-earn-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--rd-full);
  background: var(--el-primary-500);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.order-earn-btn:disabled { opacity: 0.6; cursor: default; }
.order-earn-btn--done { background: var(--el-success); }

.order-card__total strong {
  color: var(--el-ink-900);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* ============================================================
 * SETTINGS PAGE
 * ============================================================ */
.settings-page { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.settings-account {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--el-primary-100);
  border-radius: var(--rd-lg);
  background: linear-gradient(135deg, #fff 0%, var(--el-primary-50) 100%);
  box-shadow: var(--sh-sm);
}

/* LINE OA friend prompt — compact (1 บรรทัด) แสดงเมื่อยังไม่ friend OA */
.line-friend-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: var(--sp-4);
  border-radius: var(--rd-lg);
  background: linear-gradient(135deg, #06C755 0%, #00B14F 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(6, 199, 85, 0.25);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  font-size: var(--fs-sm);
}
.line-friend-prompt:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(6, 199, 85, 0.35); }
.line-friend-prompt:active { transform: translateY(0); }
.line-friend-prompt__icon { font-size: 20px; flex-shrink: 0; }
.line-friend-prompt__title { flex: 1; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-friend-prompt__cta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.line-friend-prompt__chevron { font-size: 18px; flex-shrink: 0; opacity: 0.85; }

/* settings-row variant สำหรับ toggle (รวม consent toggle ใน notif panel) */
.settings-row--toggle { cursor: default; }
.settings-row--toggle .settings-row__icon { color: #fff; }

/* Switch component (toggle) — ใช้ pattern เดียวกับ admin.css */
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--el-ink-200);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch input[type="checkbox"]:checked + .switch__track { background: #06C755; }
.switch input[type="checkbox"]:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch input[type="checkbox"]:disabled + .switch__track { opacity: 0.55; cursor: wait; }
.settings-account__avatar {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--el-primary-100);
  color: var(--el-primary-600);
  font-size: var(--fs-xl);
}
.settings-account__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.settings-account__body { flex: 1; min-width: 0; }
.settings-account__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--el-primary-600);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}
.settings-account__name {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-account__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
}
.settings-account__meta span + span::before {
  content: '•';
  margin-right: var(--sp-2);
  color: var(--el-ink-300);
}
.settings-account__tier {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: var(--rd-full);
  background: var(--el-paper);
  color: var(--el-primary-600);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  box-shadow: inset 0 0 0 1px var(--el-primary-100);
}
.settings-section { margin-bottom: var(--sp-5); }
.settings-section__title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--el-ink-500);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  padding: 0 var(--sp-2) var(--sp-2);
}
.settings-list {
  background: var(--el-paper);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
#settingsNotificationsList {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.settings-contact-group + .settings-contact-group { margin-top: var(--sp-5); }
.settings-contact-group__header {
  padding: 0 var(--sp-2) var(--sp-2);
}
.settings-contact-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  line-height: var(--lh-snug);
}
.settings-contact-group__desc {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
  line-height: var(--lh-snug);
  margin-top: 2px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 68px;
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
  color: inherit;
  text-align: left;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:active {
  background: var(--el-ink-50);
  transform: scale(0.995);
}
.settings-row__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--rd-md);
  background: var(--el-primary-50);
  color: var(--el-primary-600);
  display: grid; place-items: center;
  font-size: var(--fs-lg);
}
.settings-row__icon svg {
  width: 20px; height: 20px;
  display: block;
}
.settings-row__icon--danger { background: var(--el-danger-bg); color: var(--el-danger); }
.settings-row__body { flex: 1; min-width: 0; }
.settings-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
  line-height: var(--lh-snug);
}
.settings-row__title--danger { color: var(--el-danger); }
.settings-row__desc {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
  margin-top: 2px;
  line-height: var(--lh-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-row__chevron {
  color: var(--el-ink-300);
  font-size: 20px;
  flex-shrink: 0;
}
.settings-row__badge {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: var(--rd-full);
  background: var(--el-ink-100);
  color: var(--el-ink-500);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: center;
}
.shop-status {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  padding: 4px 9px;
  border-radius: var(--rd-full);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
.shop-status--connected { background: var(--el-success-bg); color: var(--el-success); }
.shop-status--disconnected { background: var(--el-ink-100); color: var(--el-ink-500); }

/* ============================================================
 * EDIT BOTTOM SHEET
 * ============================================================ */
.edit-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.edit-sheet.is-open {
  pointer-events: all;
  opacity: 1;
}
.edit-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,27,31,0.45);
  backdrop-filter: blur(3px);
}
.edit-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  background: var(--el-paper);
  border-radius: var(--rd-2xl) var(--rd-2xl) 0 0;
  padding-bottom: calc(var(--sp-8) + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: 0 -8px 32px rgba(11,27,31,0.12);
}
.edit-sheet.is-open .edit-sheet__panel { transform: translateY(0); }
.edit-sheet__handle {
  width: 36px; height: 4px;
  border-radius: var(--rd-full);
  background: var(--el-ink-200);
  margin: var(--sp-3) auto var(--sp-1);
}
.edit-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
}
.edit-sheet__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
}
.edit-sheet__cancel {
  font-size: var(--fs-sm);
  color: var(--el-ink-400);
  padding: var(--sp-2) 0;
  min-width: 52px;
}
.edit-sheet__save {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--el-primary-500);
  padding: var(--sp-2) 0;
  min-width: 52px;
  text-align: right;
}
.edit-sheet__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.edit-sheet__pair { display: flex; flex-direction: column; gap: var(--sp-4); }
.edit-sheet__pair[hidden] { display: none !important; }
.edit-sheet__pair-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.edit-sheet__pair-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-500);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding-left: 2px;
}
.edit-sheet__input {
  width: 100%;
  padding: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  border: 1.5px solid var(--el-ink-200);
  border-radius: var(--rd-lg);
  outline: none;
  color: var(--el-ink-900);
  background: var(--el-surface);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.edit-sheet__input:focus { border-color: var(--el-primary-500); box-shadow: 0 0 0 3px var(--el-primary-50); }
.edit-sheet__hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  padding-left: 2px;
}

/* ============================================================
 * BIRTHDAY WHEEL PICKER
 * ============================================================ */
.birthday-wheel {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.birthday-wheel.is-open {
  pointer-events: auto;
  opacity: 1;
}
.birthday-wheel-open { overflow: hidden; }
.birthday-wheel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 27, 31, 0.58);
  backdrop-filter: blur(2px);
}
.birthday-wheel__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  background: var(--el-paper);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 44px rgba(11, 27, 31, 0.18);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out);
  overflow: hidden;
  padding-bottom: calc(var(--sp-5) + var(--safe-bottom));
}
.birthday-wheel.is-open .birthday-wheel__sheet { transform: translateY(0); }
.birthday-wheel__handle {
  width: 42px;
  height: 5px;
  border-radius: var(--rd-full);
  background: var(--el-ink-150);
  margin: var(--sp-3) auto var(--sp-2);
}
.birthday-wheel__header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--el-ink-100);
}
.birthday-wheel__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  text-align: center;
}
.birthday-wheel__cancel,
.birthday-wheel__confirm {
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.birthday-wheel__cancel {
  justify-self: start;
  color: var(--el-ink-400);
}
.birthday-wheel__confirm {
  justify-self: end;
  color: var(--el-primary-500);
}
.birthday-wheel__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
}
.birthday-wheel__columns {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 220px;
  overflow: hidden;
}
.birthday-wheel__columns::before,
.birthday-wheel__columns::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 80px;
  pointer-events: none;
}
.birthday-wheel__columns::before {
  top: 0;
  background: linear-gradient(180deg, var(--el-paper) 0%, rgba(255,255,255,0.88) 46%, rgba(255,255,255,0) 100%);
}
.birthday-wheel__columns::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--el-paper) 0%, rgba(255,255,255,0.88) 46%, rgba(255,255,255,0) 100%);
}
.birthday-wheel__selection {
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 1;
  border-top: 1px solid var(--el-ink-100);
  border-bottom: 1px solid var(--el-ink-100);
  background: rgba(248, 250, 252, 0.72);
  pointer-events: none;
}
.birthday-wheel__column {
  position: relative;
  z-index: 2;
  height: 220px;
  overflow-y: auto;
  padding: 88px 0;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.birthday-wheel__column::-webkit-scrollbar { display: none; }
.birthday-wheel__item {
  width: 100%;
  height: 44px;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-medium);
  color: var(--el-ink-300);
  transition: color var(--dur-fast) var(--ease-out);
}
.birthday-wheel__item.is-selected {
  color: var(--el-ink-900);
  font-weight: var(--fw-bold);
}

@media (min-width: 768px) {
  .birthday-wheel {
    align-items: center;
    padding: var(--sp-5);
  }
  .birthday-wheel__sheet {
    border-radius: 28px;
    transform: translateY(24px) scale(0.98);
  }
  .birthday-wheel.is-open .birthday-wheel__sheet {
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
 * EMPTY STATE
 * ============================================================ */
.empty {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  color: var(--el-ink-400);
}
.empty__icon {
  width: 80px; height: 80px;
  margin-bottom: var(--sp-4);
  filter: grayscale(0.4) opacity(0.7);
}
.empty__text {
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
}

/* ============================================================
 * BOTTOM TAB BAR · Edge-to-edge with center FAB
 * ============================================================ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  padding: 6px var(--sp-2) calc(6px + var(--safe-bottom));
  background: #fff;
  border-radius: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 0;
  box-shadow: 0 -1px 0 var(--el-ink-100), 0 -4px 16px rgba(0,0,0,0.06);
  z-index: 30;
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px var(--sp-1);
  border-radius: 0;
  background: transparent;
  color: var(--el-ink-400);
  transition: color var(--dur-base) var(--ease-out);
  white-space: nowrap;
  min-width: 0;
}
.tabbar__item:active { transform: scale(0.94); }
.tabbar__item--active {
  flex: 1;
  background: transparent;
  color: var(--el-primary-500);
  padding: 4px var(--sp-1);
}
.tabbar__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 26px;
  border-radius: var(--rd-full);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.tabbar__item--active .tabbar__icon {
  background: transparent;
  color: var(--el-primary-500);
}
.tabbar__label {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  font-weight: var(--fw-medium);
}
.tabbar__item--active .tabbar__label {
  display: block;
  font-weight: var(--fw-bold);
}

/* Center item — same style as other tabs */
.tabbar__item--center { overflow: visible; }

/* ============================================================
 * UTILITIES + ANIMATIONS
 * ============================================================ */
.stagger > * {
  opacity: 0;
  animation: staggerIn var(--dur-base) var(--ease-out) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 60ms; }
.stagger > *:nth-child(2) { animation-delay: 120ms; }
.stagger > *:nth-child(3) { animation-delay: 180ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 300ms; }
.stagger > *:nth-child(6) { animation-delay: 360ms; }
.stagger > *:nth-child(7) { animation-delay: 420ms; }
.stagger > *:nth-child(8) { animation-delay: 480ms; }
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
 * RESPONSIVE · Tablet 768px+ (AGENTS.md breakpoint มาตรฐาน)
 *   app/ ตั้งกรอบ max-width 680px centered + 2-col grids
 * ============================================================ */
@media (min-width: 768px) {
  /* AGENTS.md RWD: app/ บน tablet/desktop ตั้งกรอบ max-width 680px กลางจอ */
  .app { max-width: 680px; }
  .tabbar { max-width: 680px; left: 50%; transform: translateX(-50%); }

  /* Rewards: 2-col card grid */
  .reward-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .reward-item { flex-direction: column; }
  .reward-item__media { width: 100%; height: auto; aspect-ratio: 1/1; }

  /* News: 2-col */
  .news-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
 * RESPONSIVE · Desktop 1024px+ (Sidebar + 2-col member)
 * ============================================================ */
@media (min-width: 1024px) {
  body { padding: 0; }

  /* App shell: full-screen sidebar grid */
  .app {
    max-width: none;
    width: 100%;
    height: 100vh;
    min-height: unset;
    overflow: hidden;
    display: grid;
    grid-template-areas:
      "header header"
      "nav    main";
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr;
    border-radius: 0;
    box-shadow: none;
    background: var(--el-paper);
  }

  .header {
    grid-area: header;
    border-radius: 0;
  }

  .main {
    grid-area: main;
    padding-bottom: var(--sp-10);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ---- Tabbar → Left Sidebar ---- */
  .tabbar {
    grid-area: nav;
    position: sticky;
    top: 0;
    left: auto; bottom: auto; transform: none;
    width: auto; max-width: none;
    height: calc(100vh - var(--header-height));
    background: var(--el-paper);
    border-radius: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--sp-3) var(--sp-2);
    gap: 2px;
    border-right: 1px solid var(--el-ink-100);
    box-shadow: none;
    overflow-y: auto;
  }

  .tabbar__item {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-radius: var(--rd-md);
    color: var(--el-ink-600);
    font-weight: var(--fw-medium);
    background: transparent;
    overflow: visible;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .tabbar__item:hover { background: var(--el-ink-50); color: var(--el-ink-900); }
  .tabbar__item--active {
    flex: none;
    background: var(--el-primary-50);
    color: var(--el-primary-600);
    padding: 10px var(--sp-3);
  }
  .tabbar__icon {
    font-size: 20px;
    flex-shrink: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: inline-block;
  }
  .tabbar__item--active .tabbar__icon { background: transparent; }
  .tabbar__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: inherit; }

  /* Reset center FAB styles back to normal sidebar item */
  .tabbar__item--center .tabbar__icon {
    width: auto; height: auto;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    margin: 0;
    box-shadow: none;
    border: none;
    box-sizing: border-box;
    display: inline-block;
  }
  .tabbar__item--center .tabbar__label {
    color: inherit;
    font-weight: var(--fw-medium);
  }
  .tabbar__item--center.tabbar__item--active .tabbar__icon {
    background: transparent;
    color: inherit;
    width: auto;
    height: auto;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    border: none;
    display: inline-block;
  }
  .tabbar__item--center.tabbar__item--active .tabbar__label {
    color: inherit;
  }

  /* ---- Member page: 2-column layout ---- */
  .member-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: var(--sp-6);
    row-gap: 0;
    padding: var(--sp-6) var(--sp-6) var(--sp-6);
    align-items: start;
  }
  .member-card  { grid-column: 1; grid-row: 1; }
  .tier-strip   { grid-column: 1; grid-row: 2; margin-inline: 0; margin-top: var(--sp-4); }
  .profile      { grid-column: 2; grid-row: 1 / 4; margin-top: 0; padding: 0; }

  /* ---- Rewards: 3-col ---- */
  .rewards-page { padding: var(--sp-5) var(--sp-6); }
  .rewards-filter {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--el-paper);
    border-bottom: 1px solid var(--el-ink-100);
    margin-inline: calc(var(--sp-6) * -1);
    padding-inline: var(--sp-6);
    padding-block: var(--sp-3);
    margin-top: 0;
  }
  .reward-list  { grid-template-columns: repeat(3, 1fr); }
  .reward-item  { flex-direction: column; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
  .reward-item:hover { transform: scale(1.02); box-shadow: var(--sh-md); z-index: 1; }
  .reward-item__media { width: 100%; height: auto; aspect-ratio: 1/1; }
  .reward-detail-footer { display: none; }
  .reward-detail-right-cta {
    display: flex;
    justify-content: center;
    padding: var(--sp-5);
    border-top: 1px solid var(--el-ink-100);
    position: sticky;
    bottom: 0;
    background: var(--el-paper);
    margin-top: auto;
  }
  .reward-detail-right-cta .btn-redeem-cta { width: 100%; max-width: 320px; }

  /* ---- News: 2-col ---- */
  .news-page  { padding: var(--sp-5) var(--sp-6); }
  .news-list  { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

  /* ---- History ---- */
  .history-list { padding: var(--sp-2) var(--sp-6) var(--sp-6); }

  /* sticky bars: on desktop .main starts below the header grid row
     so top:header-height creates an invisible dead zone — reset to 0
     .history-tabs ใช้ CSS var ที่ JS วัดความสูง .history-segment จริง */
  .history-segment { top: 0; }
  .history-tabs    { top: var(--history-segment-h, 56px); }

  /* ---- Settings ---- */
  .settings-page {
    max-width: none;
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
  }
  .settings-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: start;
  }
  .settings-section,
  .settings-account { max-width: none; }

  /* ---- Reward Detail: backdrop + popup card ---- */
  .reward-detail-overlay {
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out);
    overflow: visible;
  }
  .reward-detail-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .reward-detail-card {
    background: var(--el-paper);
    border-radius: var(--rd-2xl);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.12);
    width: 960px;
    max-width: calc(100vw - 48px);
    max-height: 85vh;
    flex: unset;
    transform: scale(0.95) translateY(12px);
    opacity: 0;
    transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
    overflow: hidden;
  }
  .reward-detail-overlay[aria-hidden="false"] .reward-detail-card {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  /* Header: show title + pts + close button */
  .reward-detail-close-desktop {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--el-ink-100);
    font-size: var(--fs-xl);
    color: var(--el-ink-700);
    flex-shrink: 0;
    margin-left: var(--sp-2);
    transition: background var(--dur-fast);
  }
  .reward-detail-close-desktop:hover { background: var(--el-ink-200); }

  /* Body: flex row — left panel (image) | right panel (info, scrollable) */
  .reward-detail-body {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }

  .reward-detail-left {
    width: 50%;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--el-ink-100);
  }

  .reward-detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
  }

  /* Hero: square (1:1) — contain เพื่อให้เห็นรูปเต็ม ไม่ crop */
  .reward-detail-hero {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
  }
  .reward-detail-hero img { object-fit: contain; }

  /* Gallery: horizontal thumbnail strip */
  .reward-detail-left .reward-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-2);
  }
  .reward-detail-left .reward-gallery__item {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    transition: border-color var(--dur-fast);
  }
  .reward-detail-left .reward-gallery__item--active,
  .reward-detail-left .reward-gallery__item:hover {
    border-color: var(--el-primary-500);
  }

  /* Hero: 1:1 square, contain — no crop */
  .reward-detail-hero { aspect-ratio: 1 / 1; }
  .reward-detail-hero img { object-fit: contain; }

  /* Right panel: bigger typography + more breathing room */
  .reward-detail-meta { padding: var(--sp-5) var(--sp-6); }
  .reward-detail-name { font-size: var(--fs-2xl); }
  .reward-detail-pts-num { font-size: var(--fs-2xl); }
  .reward-detail-tabs { padding: 0 var(--sp-6); }
  .reward-detail-content { padding: var(--sp-5) var(--sp-6); font-size: var(--fs-md); }
}

/* ===== Welcome Popup ===== */
.welcome-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  pointer-events: none;
  opacity: 0;
}
.welcome-popup.is-open {
  pointer-events: auto;
  opacity: 1;
}
.welcome-popup.is-closing { opacity: 0; transition: opacity 0.35s var(--ease-out); }

.welcome-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.welcome-popup.is-open .welcome-popup__backdrop { opacity: 1; }

.welcome-popup__card {
  position: relative;
  width: min(360px, 100%);
  border-radius: var(--rd-2xl);
  overflow: hidden;
  background: var(--el-paper);
  box-shadow: 0 24px 64px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.20);
  transform: translateY(32px) scale(0.95);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.welcome-popup.is-open .welcome-popup__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.welcome-popup.is-closing .welcome-popup__card {
  transform: translateY(16px) scale(0.97);
  opacity: 0;
}

/* Header */
.welcome-popup__header {
  position: relative;
  padding: var(--sp-10) var(--sp-6) var(--sp-6);
  overflow: hidden;
  text-align: center;
}
.welcome-popup__header--dark  { color: #1A0800; }
.welcome-popup__header--light { color: #F0F0F8; }

.welcome-popup__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.welcome-popup__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto var(--sp-3);
  border: 4px solid rgba(255,255,255,0.50);
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);
  position: relative;
}
.welcome-popup__avatar svg,
.welcome-popup__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* When LINE photo loaded successfully, hide the SVG fallback */
.welcome-popup__avatar--photo .welcome-popup__avatar-svg { display: none; }
.welcome-popup__welcome-text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: var(--sp-1);
}
.welcome-popup__member-name {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: var(--sp-1);
}
.welcome-popup__tier-badge-wrap {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: center;
}
.welcome-popup__plat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  color: rgba(240,240,248,0.80);
  border: 1px solid rgba(240,240,248,0.30);
  padding: 4px 12px;
  border-radius: var(--rd-full);
}

/* Body */
.welcome-popup__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
  text-align: center;
}
.welcome-popup__points-block {
  margin-bottom: var(--sp-4);
}
.welcome-popup__points-label {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.welcome-popup__points-val {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 2.8rem;
  color: var(--el-ink-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.welcome-popup__points-unit {
  font-size: var(--fs-sm);
  color: var(--el-primary-500);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  margin-top: 2px;
}
.welcome-popup__msg {
  font-size: var(--fs-sm);
  color: var(--el-ink-500);
  line-height: 1.65;
}

/* Footer */
.welcome-popup__footer {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.welcome-popup__cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  background: var(--el-primary-500);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  border: none;
  border-radius: var(--rd-xl);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform  var(--dur-fast) var(--ease-out);
}
.welcome-popup__cta:hover  { background: var(--el-primary-600); }
.welcome-popup__cta:active { transform: scale(0.97); }
.welcome-popup__cta i { font-size: 20px; }
.welcome-popup__dismiss {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 10px;
    font-size: 13px;
    color: var(--el-ink-400);
    cursor: pointer;
    text-align: center;
}
.welcome-popup__dismiss:hover { color: var(--el-ink-600); }

/* ============================================================
 * SETTINGS PANEL & PRIVACY MODAL
 * ============================================================ */
.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--el-paper);
  display: flex;
  flex-direction: column;
}
.settings-panel__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
  background: var(--el-paper);
  flex-shrink: 0;
}
.settings-panel__back {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: var(--fs-xl);
  color: var(--el-ink-700);
  flex-shrink: 0;
}
.settings-panel__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
}
.settings-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-4);
}

/* ── Redeem Confirm Modal ── */
.redeem-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.redeem-confirm-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.redeem-confirm-box {
  background: var(--el-paper);
  border-radius: var(--rd-2xl);
  padding: var(--sp-6) var(--sp-5);
  width: 100%;
  max-width: 320px;
  text-align: center;
  transform: translateY(16px);
  transition: transform 0.25s var(--ease-out);
}
.redeem-confirm-modal[aria-hidden="false"] .redeem-confirm-box {
  transform: translateY(0);
}
.redeem-confirm-icon {
  font-size: 40px;
  margin-bottom: var(--sp-3);
}
.redeem-confirm-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
  margin: 0 0 var(--sp-2);
}
.redeem-confirm-name {
  font-size: var(--fs-sm);
  color: var(--el-ink-700);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--sp-3);
}
.redeem-confirm-pts-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--el-gold-100);
  padding: 6px 14px;
  border-radius: var(--rd-full);
  margin-bottom: var(--sp-3);
}
.redeem-confirm-pts {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-gold-700);
}
.redeem-confirm-note {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  margin: 0 0 var(--sp-5);
}
.redeem-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.redeem-confirm-btn {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--rd-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  transition: opacity var(--dur-fast);
}
.redeem-confirm-btn:active { opacity: 0.75; }
.redeem-confirm-btn--cancel {
  background: var(--el-ink-100);
  color: var(--el-ink-700);
}
.redeem-confirm-btn--ok {
  background: var(--grd-primary);
  color: #fff;
}

.privacy-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.privacy-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.privacy-modal__box {
  background: var(--el-paper);
  border-radius: var(--rd-xl);
  padding: var(--sp-6) var(--sp-5);
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.25s var(--ease-out);
}
.privacy-modal.is-open .privacy-modal__box {
  transform: translateY(0);
}
.privacy-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
  text-align: center;
  margin-bottom: var(--sp-4);
}
.privacy-modal__body {
  font-size: var(--fs-sm);
  color: var(--el-ink-600);
  line-height: var(--lh-relaxed);
  white-space: pre-line;
  margin-bottom: var(--sp-5);
}
.privacy-modal__close {
  display: block;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--rd-full);
  background: var(--el-ink-100);
  color: var(--el-ink-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
}

/* ============================================================
 * BIRTHDAY POPUP — แสดงตอน login ในเดือนเกิด
 * ============================================================ */
.birthday-popup {
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: bdFadeIn 0.25s var(--ease-out);
}
.birthday-popup--closing {
  animation: bdFadeOut 0.18s var(--ease-out) forwards;
}
.birthday-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.birthday-popup__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--rd-2xl);
  width: 100%;
  max-width: 340px;
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow:
    0 20px 60px rgba(229, 57, 53, 0.30),
    0 8px 30px rgba(0, 0, 0, 0.25);
  animation: bdPopIn 0.35s var(--ease-out);
}
@keyframes bdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bdFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bdPopIn {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.birthday-popup__close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--el-ink-500);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.birthday-popup__close:hover {
  background: var(--el-ink-100);
  color: var(--el-ink-900);
}
.birthday-popup__close i { font-size: 22px; }
.birthday-popup__icon {
  font-size: 56px;
  line-height: 1;
  margin: 0 0 14px;
  animation: bdBounce 0.6s var(--ease-out);
}
@keyframes bdBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.birthday-popup__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--el-primary-700);
  margin: 0 0 10px;
  line-height: 1.3;
}
.birthday-popup__msg {
  font-size: 15px;
  color: var(--el-ink-700);
  line-height: 1.6;
  margin: 0 0 26px;
}
.birthday-popup__msg strong {
  color: var(--el-gold-700);
  font-weight: 800;
  font-size: 17px;
}
.birthday-popup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  background: var(--grd-primary);
  color: #fff;
  border-radius: var(--rd-full);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.40);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.birthday-popup__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.50);
}
.birthday-popup__cta:active { transform: translateY(0); }
.birthday-popup__cta i { font-size: 18px; }

/* ============================================================
   Register Page
   ============================================================ */
.register-page {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.reg-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.reg-search__icon {
  position: absolute;
  left: var(--sp-3);
  font-size: var(--fs-lg);
  color: var(--el-ink-400);
  pointer-events: none;
}
.reg-search__input {
  width: 100%;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) * 2 + 1.25rem);
  border-radius: var(--rd-full);
  background: var(--el-paper);
  border: 1.5px solid var(--el-ink-100);
  font-size: var(--fs-sm);
  color: var(--el-ink-900);
  outline: none;
}
.reg-search__input:focus {
  border-color: var(--el-primary);
}
.reg-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.reg-card {
  background: var(--el-paper);
  border-radius: var(--rd-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.reg-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
}
.reg-card__order {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
}
.reg-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.reg-card__shop {
  font-size: var(--fs-xs);
  color: var(--el-primary);
  font-weight: var(--fw-medium);
}
.reg-card__date {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
}
.reg-card__products {
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.reg-product {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.reg-product__img {
  width: 44px;
  height: 44px;
  border-radius: var(--rd-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--el-ink-50);
}
.reg-product__img--placeholder {
  display: grid;
  place-items: center;
  color: var(--el-ink-300);
  font-size: var(--fs-xl);
}
.reg-product__info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}
.reg-product__sku {
  font-size: var(--fs-sm);
  color: var(--el-ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-product__qty {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  flex-shrink: 0;
}
.reg-card__warranty {
  padding: var(--sp-2) var(--sp-4);
  background: #e8f5e9;
  color: #2e7d32;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.reg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-4);
  color: var(--el-ink-400);
  font-size: var(--fs-sm);
  text-align: center;
}
.reg-empty i {
  font-size: 3rem;
}
.reg-skeleton__card {
  height: 120px;
  border-radius: var(--rd-lg);
  background: linear-gradient(90deg, var(--el-ink-100) 25%, var(--el-ink-50) 50%, var(--el-ink-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.reg-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ============================================================
   News Drawer
   ============================================================ */
.header__bell {
  position: relative;
}
.header__bell-badge {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--rd-full);
  background: #FF5252;
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  line-height: 1;
  border: 2px solid #fff;
}
.news-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 48;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.news-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* News Detail Modal — fade + scale-pop animation */
.news-modal {
  position: fixed; inset: 0;
  z-index: 410;                        /* เหนือกว่า news-drawer (49) และ tabbar (30) */
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-out);
}
.news-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.news-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.news-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  background: var(--el-paper);
  border-radius: var(--rd-2xl);
  padding: 24px 22px 20px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.30),
    0 8px 24px rgba(0, 0, 0, 0.20);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.30s cubic-bezier(0.34, 1.20, 0.40, 1.00),
              opacity 0.30s var(--ease-out);
}
.news-modal.is-open .news-modal__card {
  transform: scale(1);
  opacity: 1;
}
.news-modal__close {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--el-ink-100);
  color: var(--el-ink-700);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.news-modal__close:hover { background: var(--el-ink-200); color: var(--el-ink-900); }
.news-modal__close i { font-size: 22px; }
.news-modal__top {
  display: flex; align-items: center; gap: 10px;
  margin-right: 40px;          /* keep clear of close button */
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.news-modal__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--rd-full);
  background: var(--el-primary-50);
  color: var(--el-primary-700);
}
.news-modal__tag:empty { display: none; }
.news-modal__date {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
}
.news-modal__hero {
  margin-bottom: 14px;
  border-radius: var(--rd-lg);
  overflow: hidden;
  background: var(--el-ink-50);
}
.news-modal__image {
  display: block;
  width: 100%;
  height: auto;                      /* keep real aspect ratio — no crop */
  border-radius: var(--rd-lg);
  cursor: zoom-in;
}
.news-modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
  margin: 0 0 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.news-modal__body {
  font-size: var(--fs-sm);
  color: var(--el-ink-700);
  line-height: 1.65;
  white-space: pre-wrap;
  margin-bottom: var(--sp-4);
}
/* Detail images gallery — horizontal thumbnail row (mirror .reward-gallery) */
.news-modal__gallery {
  display: flex;
  gap: 8px;
  margin: 0 -22px var(--sp-4);          /* bleed to card edges (card padding 22px) */
  padding: 4px 22px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.news-modal__gallery::-webkit-scrollbar { height: 4px; }
.news-modal__gallery::-webkit-scrollbar-thumb { background: var(--el-ink-200); border-radius: 2px; }
.news-gallery__item {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--el-ink-100);
  background: var(--el-ink-50);
  cursor: zoom-in;
  padding: 0;
  scroll-snap-align: start;
  transition: transform var(--dur-fast) var(--ease-out);
}
.news-gallery__item:hover { transform: translateY(-1px); }
.news-gallery__item:active { transform: scale(0.97); }
.news-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-modal__cta {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 4px auto 0;                   /* center horizontally */
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--el-primary-500), var(--el-primary-700));
  color: #fff;
  border-radius: var(--rd-full);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.40);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.news-modal__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.50);
}
.news-modal__cta:active { transform: translateY(0); }
.news-modal__cta i { font-size: 18px; }
.news-drawer {
  position: fixed;
  top: calc(var(--safe-top) + var(--header-height) + 20px);
  left: 12px; right: 12px;
  z-index: 49;
  background: var(--el-paper);
  border-radius: var(--rd-2xl);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  transform: translateY(-24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
}
.news-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
/* Drawer header */
.news-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--el-ink-100);
  flex-shrink: 0;
}
.news-drawer__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
}
.news-drawer__close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 22px;
  color: var(--el-ink-500);
  background: var(--el-ink-100);
  flex-shrink: 0;
}
/* Card list */
.news-drawer__list {
  overflow-y: auto;
  max-height: calc(72vh - 58px);
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Individual card */
.news-drawer__item {
  background: var(--el-paper);
  border-radius: var(--rd-xl);
  border: 1.5px solid var(--el-ink-100);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.news-drawer__item--pinned {
  border-color: var(--el-primary);
  background: #fff8f8;
}
.news-drawer__item--read {
  opacity: 0.6;
}
.news-drawer__item--read .news-drawer__item-title {
  font-weight: var(--fw-medium);
}
.news-drawer__unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--el-primary); flex-shrink: 0; margin-left: auto;
}
.news-drawer__loading,
.news-drawer__empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--el-muted);
  font-size: 14px;
}
/* Tag + date row */
.news-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.news-drawer__tag {
  padding: 3px 10px;
  border-radius: var(--rd-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Tag colors — use dash-slug class names */
.nd-chip--PROMOTION   { background: var(--el-accent-50);  color: var(--el-accent-600); }
.nd-chip--FLASH-SALE  { background: #FFF3CD; color: #92400E; }
.nd-chip--BIRTHDAY    { background: #FCE7F3; color: #BE185D; }
.nd-chip--NEW-PRODUCT { background: #E0F2FE; color: #0369A1; }
/* Pinned left stripe */
.nd-tag--PROMOTION.news-drawer__item--pinned   { border-color: var(--el-accent-600); }
.news-drawer__item-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--el-ink-900);
  line-height: 1.45;
}
.news-drawer__item--pinned .news-drawer__item-title {
  color: var(--el-primary);
}
.news-drawer__desc {
  font-size: var(--fs-xs);
  color: var(--el-ink-500);
  line-height: 1.55;
}
.news-drawer__date {
  font-size: 11px;
  color: var(--el-ink-300);
  flex-shrink: 0;
}

/* ============================================================
   Warranty Check Form
   ============================================================ */
.warranty-notice {
  display: flex;
  gap: var(--sp-2);
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: var(--rd-lg);
  padding: var(--sp-3);
  margin: var(--sp-3) var(--sp-4) 0;
}
.warranty-notice__icon { font-size: 18px; color: #F59E0B; flex-shrink: 0; margin-top: 1px; }
.warranty-notice__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--el-ink-900); margin-bottom: 2px; }
.warranty-notice__desc { font-size: 11px; color: var(--el-ink-600); line-height: 1.5; }
.warranty-form {
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.wf-field { display: flex; flex-direction: column; gap: 3px; }
.wf-label { font-size: 11px; font-weight: var(--fw-semibold); color: var(--el-ink-500); padding-left: 2px; }
.wf-input {
  width: 100%;
  padding: 9px var(--sp-3);
  border-radius: var(--rd-md);
  border: 1.5px solid var(--el-ink-200);
  background: var(--el-paper);
  font-size: var(--fs-sm);
  color: var(--el-ink-900);
  outline: none;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  transition: border-color 0.15s;
}
.wf-input:focus { border-color: var(--el-primary); }
.wf-select-wrap { position: relative; display: block; }
.wf-select {
  width: 100%;
  padding: 9px 2.5rem 9px var(--sp-3);
  border-radius: var(--rd-md);
  border: 1.5px solid var(--el-ink-200);
  background: var(--el-paper);
  font-size: var(--fs-sm);
  color: var(--el-ink-900);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  transition: border-color 0.15s;
}
.wf-select:focus { border-color: var(--el-primary); }
.wf-select-icon { position: absolute; right: var(--sp-3); top: 0; bottom: 0; margin: auto; height: 18px; font-size: 18px; line-height: 18px; color: var(--el-ink-400); pointer-events: none; }
.wf-submit {
  width: 100%;
  padding: 10px;
  border-radius: var(--rd-lg);
  background: var(--grd-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: opacity 0.15s;
  margin-top: var(--sp-1);
}
.wf-submit:disabled { opacity: 0.6; }
.warranty-result { padding: 0 var(--sp-4) var(--sp-4); }
.wf-result { border-radius: var(--rd-lg); overflow: hidden; border: 1.5px solid var(--el-ink-100); }
.wf-result--ok { border-color: #A7F3D0; }
.wf-result--error {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: #FEF2F2; border-color: #FECACA; color: #DC2626;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.wf-result--error i { font-size: 20px; flex-shrink: 0; }
.wf-result__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-4);
  background: #D1FAE5; color: #065F46;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.wf-result__head--warn { background: #FEF3C7; color: #92400E; }
.wf-result__head i { font-size: 15px; }
.wf-items {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--el-ink-50);
  overflow-x: auto;
}
.wf-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; width: 52px; }
.wf-item__img { width: 44px; height: 44px; border-radius: var(--rd-md); object-fit: cover; border: 1px solid var(--el-ink-100); }
.wf-item__sku { font-size: 9px; color: var(--el-ink-500); text-align: center; width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-item__price { font-size: 9px; color: var(--el-primary); font-weight: var(--fw-semibold); }
.wf-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); padding: 7px var(--sp-4);
  border-top: 1px solid var(--el-ink-50);
}
.wf-row__label { font-size: 11px; color: var(--el-ink-400); flex-shrink: 0; }
.wf-row__val { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--el-ink-900); text-align: right; }
.wf-raw { font-size: 10px; padding: var(--sp-2) var(--sp-4); overflow-x: auto; color: var(--el-ink-500); white-space: pre-wrap; }
/* Warranty product rows */
.wf-products {
  border-top: 1px solid var(--el-ink-100);
}
.wf-products__label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--el-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px var(--sp-4) 4px;
  background: var(--el-surface);
}
.wf-prd {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
}
.wf-prd--border { border-top: 1px solid var(--el-ink-50); }
.wf-prd__img {
  width: 40px; height: 40px;
  border-radius: var(--rd-md);
  object-fit: cover;
  border: 1px solid var(--el-ink-100);
  flex-shrink: 0;
}
.wf-prd__img--ph {
  display: grid; place-items: center;
  background: var(--el-ink-50);
  color: var(--el-ink-300);
  font-size: 18px;
}
.wf-prd__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-prd__sku { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--el-ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-prd__unit { font-size: 10px; color: var(--el-ink-400); }
/* ป้ายประกันรายชิ้น — ฟิล์ม/เลนส์ได้ days=0 แต่ยังลงทะเบียนรับแต้มได้ */
.wf-prd__wr {
  align-self: flex-start;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); line-height: 1.6;
  padding: 0 6px; border-radius: var(--rd-full);
}
.wf-prd__wr--ok   { color: var(--el-success);  background: var(--el-success-bg); }
.wf-prd__wr--none { color: var(--el-ink-500);  background: var(--el-ink-100, #EDF1F3); }
.wf-prd__price { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--el-ink-900); flex-shrink: 0; }
.wf-days { font-weight: var(--fw-regular); opacity: 0.8; }
.el-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-20px);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 18px; border-radius: 99px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
  z-index: 9999; white-space: nowrap; pointer-events: none;
}
.el-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.el-toast--success { background: #10B981; color: #fff; }
.el-toast--info    { background: #3B82F6; color: #fff; }
.el-toast i { font-size: 18px; }
.wf-reg-note {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: #EFF6FF; border: 1.5px solid #BFDBFE;
  border-radius: var(--rd-lg); margin-top: var(--sp-3);
  font-size: var(--fs-xs); color: #1E40AF;
}
.wf-reg-note i { font-size: 16px; flex-shrink: 0; }
.wf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: var(--fw-semibold);
  padding: 3px 8px; border-radius: 99px; margin-left: auto;
}
.wf-badge--registered, .wf-badge--ok { background: #D1FAE5; color: #065F46; }
.wf-badge--unregistered, .wf-badge--pending { background: #FEF3C7; color: #92400E; }
.wf-success {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4); text-align: center;
}
.wf-success__icon { font-size: 48px; color: #10B981; }
.wf-success__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--el-ink-900); }
.wf-success__sub { font-size: var(--fs-xs); color: var(--el-ink-500); }
.wf-submit--green { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
/* ปุ่มแจ้งเคลม — สไตล์ LINE (เปิด OA After Sales) */
.wf-claim-btn { background: #06C755; text-decoration: none; }
.wf-claim-btn:hover { background: #05B34C; }
.wf-claim-btn i { font-size: 20px; }
/* ---- Order Number Guide Accordion ---- */
.rg-guide {
  margin: var(--sp-3) var(--sp-4) 0;
  border-radius: var(--rd-lg);
  border: 1.5px solid var(--el-ink-100);
  overflow: hidden;
  background: var(--el-paper);
}
.rg-guide__toggle {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4);
  background: var(--el-ink-50); border: none; cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--el-ink-600);
  text-align: left;
}
.rg-guide__toggle i:first-child { font-size: 16px; color: var(--el-primary-500); }
.rg-guide__arrow { margin-left: auto; font-size: 18px; transition: transform 0.2s ease; }
.rg-guide--open .rg-guide__arrow { transform: rotate(180deg); }
.rg-guide__body { display: none; border-top: 1.5px solid var(--el-ink-100); }
.rg-guide--open .rg-guide__body { display: block; }
.rg-guide__tabs {
  display: flex; border-bottom: 1.5px solid var(--el-ink-100);
  overflow-x: auto; scrollbar-width: none;
}
.rg-guide__tabs::-webkit-scrollbar { display: none; }
.rg-guide__tab {
  flex-shrink: 0; padding: 8px 16px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-ink-400); background: none; border: none; cursor: pointer;
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
}
.rg-guide__tab--shopee.rg-guide__tab--active { color: #EE4D2D; border-color: #EE4D2D; }
.rg-guide__tab--lazada.rg-guide__tab--active { color: #1A1AD7; border-color: #1A1AD7; }
.rg-guide__tab--tiktok.rg-guide__tab--active { color: #010101; border-color: #010101; }
.rg-guide__panel { display: none; padding: var(--sp-4); }
.rg-guide__panel--active { display: block; }
.rg-guide__img-slot {
  border-radius: var(--rd-md); overflow: hidden;
  margin-bottom: var(--sp-3);
  border: 1.5px dashed var(--el-ink-200);
  display: flex; align-items: center; justify-content: center;
  min-height: 120px;
}
.rg-guide__img-slot img { width: 100%; display: block; border-radius: var(--rd-md); }
.rg-guide__img-slot:has(img) { border: none; min-height: unset; }
.rg-guide__img-slot:has(img) .rg-guide__img-ph { display: none; }
.rg-guide__img-ph {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4); color: var(--el-ink-300);
}
.rg-guide__img-ph i { font-size: 28px; }
.rg-guide__img-ph span { font-size: 10px; }
.rg-guide__steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  counter-reset: step;
}
.rg-guide__steps li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--el-ink-700);
  counter-increment: step; line-height: 1.55;
}
.rg-guide__steps li::before {
  content: counter(step);
  flex-shrink: 0; width: 20px; height: 20px;
  border-radius: 50%; background: var(--el-ink-100); color: var(--el-ink-600);
  font-size: 11px; font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.rg-guide__panel--shopee .rg-guide__steps li::before { background: #FEECE8; color: #EE4D2D; }
.rg-guide__panel--lazada .rg-guide__steps li::before { background: #E8E8FD; color: #1A1AD7; }
.rg-guide__panel--tiktok .rg-guide__steps li::before { background: #F0F0F0; color: #010101; }
/* ---- end Order Number Guide ---- */
.wf-required { color: #EF4444; }
.wf-hint {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--fw-medium);
  color: var(--el-primary-600);
  background: var(--el-primary-50);
  padding: 2px 6px;
  border-radius: var(--rd-full);
  margin-left: 4px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.reg-form__section-title {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--el-ink-400); text-transform: uppercase;
  letter-spacing: 0.06em; margin: var(--sp-4) 0 var(--sp-2);
}
.reg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: stretch; }
@media (max-width: 359px) { .reg-form__row { grid-template-columns: 1fr; } }
.wf-input--locked { background: var(--el-ink-50); color: var(--el-ink-400); cursor: not-allowed; border-color: var(--el-ink-150); }
.wf-select.wf-input--locked { pointer-events: none; }
.wf-locked-note { font-size: 10px; color: var(--el-ink-400); display: flex; align-items: center; gap: 3px; padding-left: 2px; margin-top: auto; padding-top: 4px; }
.reg-form { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.reg-pdpa {
  padding: var(--sp-3);
  background: var(--el-ink-50);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-md);
  margin-top: var(--sp-1);
}
.reg-pdpa__label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--el-ink-700);
  line-height: 1.55;
}
.reg-pdpa__label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--el-primary);
  cursor: pointer;
}
.reg-pdpa__text { flex: 1; }
.reg-pdpa__link {
  color: var(--el-primary-600);
  text-decoration: underline;
  font-weight: var(--fw-semibold);
}
.reg-pdpa__link:active { color: var(--el-primary-700); }
.wf-registered-info {
  padding: var(--sp-3) var(--sp-4);
  background: #F0FDF4; border-top: 1px solid #A7F3D0;
  font-size: var(--fs-xs); color: #065F46;
}

/* ============================================================
 * ADDRESS PANEL — list + edit modal + redeem ship picker
 * ============================================================ */
.addr-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.addr-card {
  background: var(--el-paper);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-xl);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 6px;
}
.addr-card--default {
  border-color: var(--el-red-300, #FCA5A5);
  background: linear-gradient(180deg, #FFF5F5 0%, var(--el-paper) 100%);
}
.addr-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.addr-card__name {
  font-weight: var(--fw-bold); color: var(--el-ink-900);
  font-size: var(--fs-md);
}
.addr-card__badge {
  font-size: 11px; font-weight: var(--fw-bold);
  background: var(--grd-primary); color: #fff;
  padding: 3px 10px; border-radius: var(--rd-full);
}
.addr-card__phone {
  font-size: var(--fs-sm); color: var(--el-ink-700);
  display: inline-flex; align-items: center; gap: 4px;
}
.addr-card__phone i { font-size: 16px; color: var(--el-ink-400); }
.addr-card__line {
  font-size: var(--fs-sm); color: var(--el-ink-700); line-height: 1.55;
}
.addr-card__note {
  font-size: var(--fs-xs); color: var(--el-ink-500); font-style: italic;
}
.addr-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 6px;
  padding-top: 8px; border-top: 1px dashed var(--el-ink-100);
}
.addr-card__btn {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 6px 12px; border-radius: var(--rd-full);
  background: var(--el-ink-100); color: var(--el-ink-700);
  transition: opacity var(--dur-fast);
}
.addr-card__btn:active { opacity: 0.7; }
.addr-card__btn--danger { background: #FEE2E2; color: #B91C1C; }

.addr-add-btn {
  margin-top: var(--sp-4);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 2px dashed var(--el-ink-200);
  border-radius: var(--rd-xl);
  background: transparent;
  color: var(--el-ink-700);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: opacity var(--dur-fast);
}
.addr-add-btn:active { opacity: 0.6; }

.addr-modal {
  /* z:500 — ต้องสูงกว่า .cart-confirm-modal (z:450) และ .redeem-confirm-modal (z:350)
     เพราะ user อาจกด "เพิ่มที่อยู่" ตอน cart/redeem confirm modal กำลังเปิดอยู่ */
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.addr-modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.addr-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.addr-modal__panel {
  position: relative; z-index: 1;
  background: var(--el-paper);
  width: 100%; max-width: 520px;
  max-height: 90vh;
  border-radius: var(--rd-2xl) var(--rd-2xl) 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s var(--ease-out);
}
.addr-modal[aria-hidden="false"] .addr-modal__panel { transform: translateY(0); }
@media (min-width: 640px) {
  .addr-modal { align-items: center; }
  .addr-modal__panel {
    border-radius: var(--rd-2xl);
    max-height: 80vh;
  }
}

/* ============================================================
   HOME PAGE · UI Kit Alignment Overrides
   Keep the storefront structure, but bring color, spacing, radius,
   and shell behavior back to Eloop design tokens.
════════════════════════════════════════════════════════════ */
.page-home .header {
  display: flex;
}
.page-home .main,
.page-home .app,
.page-home .hp {
  background: var(--el-surface);
}
.page-home .hp-announce {
  background: var(--el-primary-500);
  color: #fff;
}
.page-home .hp-slider,
.page-home .hp-hero-default {
  min-height: 200px;
}
.page-home .hp-slide__img {
  height: 200px;
}
.page-home .hp-slide__caption {
  display: block;
}
.page-home .hp-slider__dots {
  bottom: var(--sp-3);
}
.page-home .hp-dot {
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,.45);
}
.page-home .hp-dot--active {
  width: 20px;
  background: #fff;
}
.page-home .hp-hero-default {
  height: 200px;
  background: var(--el-primary-500);
}
.page-home .hp-hero-default__content {
  height: 100%;
  padding: 52px var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
}
.page-home .hp-hero-default__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.page-home .hp-hero-default__brand {
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin: 0 0 4px;
}
.page-home .hp-hero-default__tagline {
  color: rgba(255,255,255,.82);
  font-size: var(--fs-xs);
  margin: 0;
}
.page-home .hp-hero-default__deco {
  flex-shrink: 0;
  font-size: 56px;
  color: rgba(255,255,255,.22);
  line-height: 1;
  padding-bottom: 2px;
}
.page-home .hp-hero-mark__coin {
  background: #fff;
  box-shadow: var(--sh-md);
}
.page-home .hp-hero-menu {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
}
.page-home .hp-body {
  margin-top: 0;
  padding: var(--sp-4);
  gap: var(--sp-4);
  background: var(--el-surface);
}
.page-home .hp-card,
.page-home .hp-greeting,
.page-home .hp-benefits-card,
.page-home .hp-add-product,
.page-home .hp-reward-card {
  border-radius: var(--rd-lg);
  background: var(--el-paper);
  box-shadow: var(--sh-sm);
}
.page-home .hp-greeting {
  margin: 0;
  padding: var(--sp-4);
}
.page-home .hp-avatar {
  border-color: var(--el-primary-300);
  background: var(--el-primary-50);
}
.page-home .hp-avatar__init {
  color: var(--el-primary-600);
}
.page-home .hp-greeting__name,
.page-home .hp-section-hd__title,
.page-home .hp-reward-card__tag,
.page-home .hp-reward-card__name {
  color: var(--el-ink-900);
}
.page-home .hp-tier-badge {
  background: var(--el-primary-50);
  color: var(--el-primary-600);
}
.page-home .hp-points-pill {
  display: inline-flex;
  gap: var(--sp-2);
  padding: 6px 10px;
  border-radius: var(--rd-full);
  background: var(--el-gold-100);
  border: 1px solid var(--el-gold-300);
}
.page-home .hp-points-pill__label {
  color: var(--el-gold-700);
  font-size: var(--fs-xs);
}
.page-home .hp-points-pill__val,
.page-home .hp-points-pill__arr {
  color: var(--el-gold-700);
}
.page-home .hp-action-card {
  padding: var(--sp-3);
  background: var(--el-paper);
  box-shadow: var(--sh-xs);
}
.page-home .hp-action-card__media {
  height: 64px;
  border-radius: var(--rd-md);
}
.page-home .hp-action-card__media--warranty,
.page-home .hp-action-card__media--mall {
  background: var(--el-primary-50);
  color: var(--el-primary-600);
}
.page-home .hp-action-card__media span {
  color: var(--el-primary-600);
}
.page-home .hp-action-card__label,
.page-home .hp-section-hd__more {
  color: var(--el-ink-700);
}
.page-home .hp-benefits-panel {
  border-radius: var(--rd-md);
  background: var(--el-primary-500);
}
.page-home .hp-benefit-item__icon {
  background: rgba(255,255,255,.18);
}
.page-home .hp-explore-btn {
  background: #fff;
  color: var(--el-primary-600);
  font-weight: var(--fw-semibold);
}
.page-home .hp-mission-card {
  border: 1px solid var(--el-gold-300);
  border-radius: var(--rd-lg);
  background: var(--el-gold-50);
  box-shadow: var(--sh-xs);
}
.page-home .hp-mission-card__title,
.page-home .hp-mission-card__sub,
.page-home .hp-mission-card__sub strong {
  color: var(--el-gold-700);
}
.page-home .hp-mission-card__cta {
  background: var(--el-gold-500);
  color: #fff;
}
.page-home .hp-mission-card__ill {
  color: var(--el-gold-500);
}
.page-home .hp-add-product {
  background: var(--el-ink-50);
  color: var(--el-primary-600);
}
.page-home .hp-add-product span {
  border-color: var(--el-primary-300);
}
.page-home .hp-product-list {
  background: var(--el-paper);
  border-radius: var(--rd-lg);
  box-shadow: var(--sh-xs);
}
.page-home .hp-filter-chip {
  border-color: var(--el-ink-100);
  color: var(--el-ink-500);
}
.page-home .hp-filter-chip--active {
  border-color: var(--el-primary-500);
  background: var(--el-primary-500);
  color: #fff;
}
.page-home .hp-reward-card__media,
.page-home .hp-reward-card__fallback {
  background: var(--el-ink-50);
  color: var(--el-primary-600);
}
.page-home .hp-reward-card__pts,
.page-home .hp-reward-card__pts--can {
  color: var(--el-gold-700);
}
/* home page ใช้ tabbar style เดียวกับหน้าอื่น — ไม่ต้อง override */
.addr-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4); border-bottom: 1px solid var(--el-ink-100);
  flex-shrink: 0;
}
.addr-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
  margin: 0;
}
.addr-modal__close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: var(--fs-xl);
  color: var(--el-ink-500);
}
.addr-modal__body {
  padding: var(--sp-4);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.addr-form__row { display: flex; flex-direction: column; gap: 4px; }
.addr-form__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
.addr-form__label {
  font-size: var(--fs-xs); color: var(--el-ink-700); font-weight: var(--fw-semibold);
}
.addr-form__input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--el-ink-200);
  border-radius: var(--rd-md);
  font-size: var(--fs-sm);
  background: var(--el-paper);
  color: var(--el-ink-900);
}
.addr-form__input:focus { outline: 2px solid var(--el-red-300, #FCA5A5); border-color: transparent; }
.addr-form__check {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--el-ink-700);
  padding: 6px 0;
}
.addr-form__actions {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.addr-form__btn {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--rd-full);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  text-align: center; transition: opacity var(--dur-fast);
}
.addr-form__btn:active { opacity: 0.75; }
.addr-form__btn--cancel { background: var(--el-ink-100); color: var(--el-ink-700); }
.addr-form__btn--save { background: var(--grd-primary); color: #fff; }

/* ── Redeem ship picker (inside redeem confirm modal) ── */
.redeem-ship {
  text-align: left;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3);
  background: var(--el-ink-50, #F9FAFB);
  border-radius: var(--rd-lg);
  border: 1px solid var(--el-ink-100);
}
.redeem-ship__title {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--el-ink-500); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.redeem-ship__name { font-weight: var(--fw-bold); color: var(--el-ink-900); font-size: var(--fs-sm); }
.redeem-ship__phone { color: var(--el-ink-700); font-size: var(--fs-xs); margin: 2px 0; }
.redeem-ship__line { color: var(--el-ink-700); font-size: var(--fs-xs); line-height: 1.55; }
.redeem-ship__change {
  margin-top: 8px;
  display: inline-block;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--el-red-600, #DC2626);
}
.redeem-ship--empty { text-align: center; }
.redeem-ship--empty .redeem-ship__name {
  display: block; color: var(--el-ink-500); font-weight: var(--fw-medium);
}
.redeem-confirm-box--with-ship { max-width: 360px; }

/* ============================================================
 * NOTIFICATION CENTER PAGE (?page=notifications)
 * filter tabs + circular gradient icons + per-tab dot
 * ============================================================ */
.notif-page {
  min-height: 100vh;
  background: var(--el-paper);
  display: flex; flex-direction: column;
}
.notif-page__head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--el-paper);
  border-bottom: 1px solid var(--el-ink-100);
  flex-shrink: 0;
}
.notif-page__back,
.notif-page__readall {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: var(--fs-xl);
  color: var(--el-ink-700);
  background: transparent;
  transition: background var(--dur-fast);
}
.notif-page__back:active,
.notif-page__readall:active {
  background: var(--el-ink-100);
}
.notif-page__title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
  margin: 0;
}

/* ── Filter tabs (scrollable horizontal pills) ── */
.notif-tabs {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--el-paper);
  border-bottom: 1px solid var(--el-ink-100);
}
.notif-tabs::-webkit-scrollbar { display: none; }

.notif-tab {
  position: relative;
  flex-shrink: 0;
  padding: 10px 22px;
  border: 1.5px solid var(--el-ink-200);
  border-radius: var(--rd-full);
  background: var(--el-paper);
  color: var(--el-ink-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.notif-tab.is-active {
  background: var(--grd-primary);
  border-color: transparent;
  color: #fff;
}
.notif-tab__dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #DC2626;
  box-shadow: 0 0 0 2px var(--el-paper);
}
.notif-tab.is-active .notif-tab__dot {
  box-shadow: 0 0 0 2px #fff;
  background: #FECACA;
}

/* ── List ── */
.notif-list {
  flex: 1;
  padding: 0;
}
.notif-list__loading,
.notif-list__empty {
  padding: 60px var(--sp-4);
  text-align: center;
  color: var(--el-ink-400);
  font-size: var(--fs-sm);
}

.notif-item {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--el-ink-100);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.notif-item:active { background: var(--el-ink-50, #F9FAFB); }
.notif-item--unread { background: rgba(252, 165, 165, 0.05); }

.notif-item__icon {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.notif-item__dot {
  position: absolute;
  top: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #DC2626;
  border: 2px solid var(--el-paper);
}

.notif-item__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.notif-item__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
  margin: 0;
  line-height: 1.4;
}
.notif-item__desc {
  font-size: var(--fs-sm);
  color: var(--el-ink-700);
  line-height: 1.55;
  margin: 0;
}
.notif-item__date {
  font-size: var(--fs-xs);
  color: var(--el-ink-400);
  margin-top: 4px;
}

/* ============================================================
 * CART FAB
 * ============================================================ */
.cart-fab {
  position: fixed;
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 16px);
  right: 20px;
  z-index: 100;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grd-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform 0.2s var(--ease-spring);
}
.cart-fab:active { transform: scale(0.88); }
.cart-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--el-gold-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--el-paper);
  line-height: 1;
}

/* ============================================================
 * CART SHEET
 * ============================================================ */
.cart-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}
.cart-sheet[aria-hidden="false"] { pointer-events: auto; }
.cart-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.48);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.cart-sheet[aria-hidden="false"] .cart-sheet__backdrop { opacity: 1; }
.cart-sheet__panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: var(--app-max-width);
  max-height: 80vh;
  background: var(--el-paper);
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-out);
  overflow: hidden;
}
.cart-sheet[aria-hidden="false"] .cart-sheet__panel { transform: translate(-50%, 0); }
.cart-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--el-ink-100);
  flex-shrink: 0;
}
.cart-sheet__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
}
.cart-sheet__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--el-ink-100);
  color: var(--el-ink-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cart-sheet__body { flex: 1; overflow-y: auto; padding: 4px 0; }
.cart-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--el-ink-400);
  font-size: var(--fs-sm);
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--el-ink-50);
}
.cart-item__img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--el-ink-50);
  flex-shrink: 0;
}
.cart-item__icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--el-gold-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--el-gold-700);
  flex-shrink: 0;
}
.cart-item__icon svg { width: 26px; height: 26px; }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--el-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item__pts {
  font-size: var(--fs-xs);
  color: var(--el-gold-700);
  font-weight: var(--fw-bold);
  margin-top: 2px;
}
.cart-item__ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cart-item__qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--el-ink-100);
  color: var(--el-ink-800);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.cart-item__qty-btn:active { background: var(--el-ink-200); }
/* --off = ดูเป็น disabled (เทาอ่อน) แต่ยังคลิกได้ → cartQtyChange จะ toast แจ้ง user */
.cart-item__qty-btn--off { background: var(--el-ink-100); color: var(--el-ink-400); opacity: 0.7; }
.cart-item__qty-btn--off:active { background: var(--el-ink-100); }
.cart-item__qty {
  min-width: 26px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--el-ink-900);
}
.cart-sheet__footer {
  padding: 14px 20px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--el-ink-100);
  flex-shrink: 0;
}
.cart-sheet__summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.cart-sheet__summary-label { font-size: var(--fs-sm); color: var(--el-ink-600); }
.cart-sheet__summary-pts {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--el-gold-700);
}
.cart-sheet__checkout-btn {
  width: 100%;
  padding: 13px;
  border-radius: var(--rd-full);
  background: var(--grd-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  box-shadow: var(--sh-glow);
  text-align: center;
  transition: transform 0.15s var(--ease-spring);
}
.cart-sheet__checkout-btn:active { transform: scale(0.98); }
.cart-sheet__checkout-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* btn-add-cart (replaces btn-redeem on cards) */
.btn-add-cart {
  padding: 6px 14px;
  border-radius: var(--rd-full);
  background: var(--grd-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  transition: transform var(--dur-fast) var(--ease-spring);
  box-shadow: var(--sh-glow);
  white-space: nowrap;
  text-align: center;
}
.btn-add-cart:active { transform: scale(0.94); }
.btn-add-cart:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-add-cart--locked {
  background: var(--el-ink-200); color: var(--el-ink-600); box-shadow: none;
}
.btn-add-cart--in-cart {
  background: var(--el-success); box-shadow: none;
}
.btn-add-cart--insufficient {
  background: var(--el-ink-200); color: var(--el-ink-600); box-shadow: none; opacity: 1;
  cursor: not-allowed;
}

/* ============================================================
 * CART CONFIRM MODAL
 * ============================================================ */
.cart-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out);
}
.cart-confirm-modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.cart-confirm-box {
  background: var(--el-paper);
  border-radius: 24px;
  padding: var(--sp-6) var(--sp-5);
  width: 100%;
  max-width: 340px;
  text-align: center;
  transform: translateY(16px);
  transition: transform 0.25s var(--ease-out);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.cart-confirm-modal[aria-hidden="false"] .cart-confirm-box { transform: translateY(0); }
.cart-confirm-icon { font-size: 36px; margin-bottom: 8px; }
.cart-confirm-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-ink-900);
  margin: 0 0 12px;
}
.cart-confirm-pts-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--el-gold-100);
  padding: 6px 14px;
  border-radius: var(--rd-full);
  margin-bottom: 14px;
}
.cart-confirm-pts {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--el-gold-700);
}
.cart-confirm-items {
  text-align: left;
  border: 1px solid var(--el-ink-100);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.cart-confirm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--el-ink-50);
  gap: 8px;
}
.cart-confirm-item:last-child { border-bottom: none; }
.cart-confirm-item__name {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--el-ink-800);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-confirm-item__meta {
  font-size: var(--fs-xs);
  color: var(--el-gold-700);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* ============================================================
 * CLAIM (Migration 055) — history segment + form page
 * ============================================================ */
.claim-list-actions { padding: var(--sp-3) var(--sp-5) var(--sp-2); }
.claim-new-btn { width: 100%; }
.claim-list { padding: var(--sp-2) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.claim-card {
  background: var(--el-paper); border: 1px solid var(--el-ink-100); border-radius: var(--rd-lg);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
}
.claim-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.claim-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--el-ink-900); flex: 1; }
.claim-card__status {
  padding: 2px 8px; border-radius: var(--rd-full); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  flex-shrink: 0; white-space: nowrap;
}
.claim-card__status--pending     { background: #FEF3C7; color: #92400E; }
.claim-card__status--approved    { background: #DBEAFE; color: #1E40AF; }
.claim-card__status--in_progress { background: #DBEAFE; color: #1E40AF; }
.claim-card__status--rejected    { background: #FEE2E2; color: #B91C1C; }
.claim-card__status--cancelled   { background: #E5E7EB; color: #6B7280; }
.claim-card__sub { font-size: var(--fs-xs); color: var(--el-ink-600); }
.claim-card__issue { font-size: var(--fs-sm); color: var(--el-ink-700); line-height: 1.5; }
.claim-card__note,
.claim-card__claim-no {
  font-size: var(--fs-xs); color: var(--el-ink-700);
  background: var(--el-ink-50); padding: 6px 10px; border-radius: var(--rd-sm);
}
.claim-card__date { font-size: var(--fs-2xs); color: var(--el-ink-400); }

/* ── Claim new form page ───────────────────────────────────── */
.claim-new-page { padding: var(--sp-4) var(--sp-5) var(--sp-6); max-width: 600px; margin: 0 auto; }
.claim-new-page__header {
  display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--el-ink-100);
}
.claim-new-page__back {
  width: 36px; height: 36px; border-radius: var(--rd-full); background: var(--el-ink-100);
  display: grid; place-items: center; color: var(--el-ink-700); font-size: 20px;
}
.claim-new-page__back:active { background: var(--el-ink-200); }
.claim-new-page__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--el-ink-900); }

.claim-new-empty {
  padding: var(--sp-8) var(--sp-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.claim-new-empty__icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--el-ink-50);
  display: grid; place-items: center; color: var(--el-ink-400); font-size: 36px;
}
.claim-new-empty__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--el-ink-700); }
.claim-new-empty__hint  { font-size: var(--fs-sm); color: var(--el-ink-500); }

.claim-new-loading { text-align: center; padding: var(--sp-8); color: var(--el-ink-500); font-size: var(--fs-sm); }
.claim-new-loading__spinner {
  width: 28px; height: 28px; border: 3px solid var(--el-ink-100); border-top-color: var(--el-primary-500);
  border-radius: 50%; animation: spin 0.7s linear infinite; margin: 0 auto var(--sp-3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* claim form ใช้ .reg-form / .wf-* จาก register page — ไม่มี per-form styles ที่นี่
   override เฉพาะ: ลบ padding ของ .reg-form ภายใน .claim-new-page (page wrapper padded แล้ว) */
.claim-new-page .reg-form { padding: 0; gap: var(--sp-3); }
.claim-new-page .reg-form__section-title:first-of-type { margin-top: 0; }

/* address prefill hint + manage link */
.claim-addr-hint {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  background: var(--el-ink-50);
  border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-md);
  font-size: var(--fs-xs);
  color: var(--el-ink-600);
}
.claim-addr-hint > i { font-size: 16px; color: var(--el-primary-600); flex-shrink: 0; }
.claim-addr-hint > span { flex: 1; min-width: 140px; }
.claim-addr-manage {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-primary-600);
  text-decoration: none;
  padding: 4px 10px;
  background: var(--el-primary-50);
  border-radius: var(--rd-full);
  transition: background var(--dur-fast);
}
.claim-addr-manage:active { background: var(--el-primary-100); }
.claim-addr-manage i { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════════════════ */
.home-page { display: flex; flex-direction: column; min-height: 100%; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  background: linear-gradient(135deg, var(--el-primary-700) 0%, var(--el-primary-500) 55%, var(--el-primary-400) 100%);
  padding: var(--sp-6) var(--sp-4) 0;
  overflow: hidden;
}
.home-hero__bg-pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.10) 0%, transparent 55%),
                    radial-gradient(circle at 10% 70%, rgba(0,0,0,0.08) 0%, transparent 45%);
}
.home-hero__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}
.home-hero__avatar {
  flex-shrink: 0;
  width: 52px; height: 52px; border-radius: var(--rd-full);
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.5);
  display: grid; place-items: center; overflow: hidden;
}
.home-hero__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__avatar-initials {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: #fff; line-height: 1;
}
.home-hero__text { flex: 1; min-width: 0; }
.home-hero__hello { font-size: var(--fs-xs); color: rgba(255,255,255,0.75); margin: 0 0 1px; }
.home-hero__name {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: #fff; margin: 0 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-hero__tier-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 2px 8px; border-radius: var(--rd-full);
  opacity: 0.95;
}
.home-hero__points-box {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: var(--rd-lg); padding: 8px 12px;
  text-decoration: none; gap: 1px;
  transition: background var(--dur-fast);
}
.home-hero__points-box:active { background: rgba(255,255,255,0.28); }
.home-hero__points-val {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: #fff; line-height: 1;
}
.home-hero__points-label { font-size: var(--fs-2xs); color: rgba(255,255,255,0.8); }
.home-hero__points-arrow { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* Tier progress */
.home-hero__progress-wrap {
  position: relative; z-index: 1;
  padding: 0 var(--sp-1) var(--sp-4);
}
.home-hero__progress-bar {
  height: 5px; background: rgba(255,255,255,0.25); border-radius: var(--rd-full);
  overflow: hidden; margin-bottom: 5px;
}
.home-hero__progress-fill {
  height: 100%; background: rgba(255,255,255,0.85); border-radius: var(--rd-full);
  transition: width 0.8s var(--ease-out);
  min-width: 4%;
}
.home-hero__progress-text {
  font-size: var(--fs-2xs); color: rgba(255,255,255,0.80); margin: 0; text-align: right;
}
.home-hero__progress-text strong { color: #fff; }

/* Wave */
.home-hero__wave {
  display: block; width: 100%; height: 28px;
  margin-bottom: -1px; position: relative; z-index: 1;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.home-section {
  padding: var(--sp-5) var(--sp-4) 0;
  background: var(--el-surface-app, #FAFCFD);
}
.home-section--last { padding-bottom: var(--sp-8); }
.home-section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.home-section__title {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--el-ink-900); margin: 0;
}
.home-section__more {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--el-primary-500); text-decoration: none;
}
.home-section__more i { font-size: 14px; }

/* ── Quick Navigation ─────────────────────────────────────────────────────── */
.home-quicknav-section { padding-top: var(--sp-4); }
.home-quicknav {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.home-quicknav__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-decoration: none; padding: var(--sp-3) var(--sp-2);
  background: var(--el-paper); border-radius: var(--rd-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.home-quicknav__item:active { transform: scale(0.95); box-shadow: var(--sh-xs); }
.home-quicknav__icon {
  width: 44px; height: 44px; border-radius: var(--rd-md);
  display: grid; place-items: center;
  font-size: 22px;
}
.home-quicknav__icon--red   { background: var(--el-primary-50);   color: var(--el-primary-500); }
.home-quicknav__icon--gold  { background: var(--el-warning-bg);   color: var(--el-gold-600); }
.home-quicknav__icon--blue  { background: #E3F2FD;                color: #1565C0; }
.home-quicknav__icon--purple{ background: #EDE9FE;                color: #6D28D9; }
.home-quicknav__label {
  font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  color: var(--el-ink-700); text-align: center; line-height: 1.4;
}

/* ── Mission / Profile Card ──────────────────────────────────────────────── */
.home-mission-card {
  display: flex; align-items: center; gap: var(--sp-3);
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #FDE68A;
  border-radius: var(--rd-lg); padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  transition: transform var(--dur-fast);
}
.home-mission-card:active { transform: scale(0.98); }
.home-mission-card__icon {
  width: 40px; height: 40px; border-radius: var(--rd-full);
  background: var(--el-gold-500); color: #fff;
  display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
}
.home-mission-card__body { flex: 1; min-width: 0; }
.home-mission-card__title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--el-ink-900); margin: 0 0 2px;
}
.home-mission-card__desc {
  font-size: var(--fs-xs); color: var(--el-ink-500); margin: 0;
}
.home-mission-card__pts {
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--el-gold-600); flex-shrink: 0;
}
.home-mission-card__arrow { font-size: 18px; color: var(--el-ink-400); flex-shrink: 0; }

/* ── Benefits strip ──────────────────────────────────────────────────────── */
.home-benefits-strip {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.home-benefits-strip::-webkit-scrollbar { display: none; }
.home-benefit-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--el-paper); border: 1px solid var(--el-ink-100);
  border-radius: var(--rd-full); padding: 5px 12px;
  white-space: nowrap; flex-shrink: 0;
  font-size: var(--fs-xs); color: var(--el-ink-700);
  box-shadow: var(--sh-xs);
}
.home-benefit-chip__icon { color: var(--el-primary-500); font-size: 14px; }

/* ── Product List ────────────────────────────────────────────────────────── */
.home-product-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.home-product-item {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--el-paper); border-radius: var(--rd-lg);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--sh-xs);
  border: 1px solid var(--el-ink-100);
}
.home-product-item__icon {
  width: 36px; height: 36px; border-radius: var(--rd-md);
  background: var(--el-ink-50); display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0;
}
.home-product-item__body { flex: 1; min-width: 0; }
.home-product-item__order {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--el-ink-900); margin: 0 0 2px;
  font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-product-item__meta { font-size: var(--fs-xs); color: var(--el-ink-400); margin: 0; }
.home-product-item__shield { font-size: 18px; color: var(--el-primary-400); flex-shrink: 0; }

.home-add-product {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--el-paper); border: 2px dashed var(--el-ink-200);
  border-radius: var(--rd-lg); padding: var(--sp-5) var(--sp-4);
  text-decoration: none; color: var(--el-ink-500);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.home-add-product:active { border-color: var(--el-primary-300); color: var(--el-primary-500); }
.home-add-product__icon { font-size: 22px; }

/* ── Rewards Grid ────────────────────────────────────────────────────────── */
.home-rewards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
.home-reward-card {
  display: flex; flex-direction: column;
  background: var(--el-paper); border-radius: var(--rd-lg);
  box-shadow: var(--sh-sm); border: 1px solid var(--el-ink-100);
  overflow: hidden; text-decoration: none; position: relative;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.home-reward-card:active { transform: scale(0.97); box-shadow: var(--sh-xs); }
.home-reward-card--out { opacity: 0.55; }
.home-reward-card__media {
  height: 90px; background: var(--el-ink-50);
  display: grid; place-items: center;
}
.home-reward-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.home-reward-card__name {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-ink-800); margin: 0 0 4px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.4;
}
.home-reward-card__pts {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--el-ink-500); background: var(--el-ink-50);
  padding: 2px 7px; border-radius: var(--rd-full);
}
.home-reward-card__pts i { font-size: 13px; }
.home-reward-card__pts--can {
  color: var(--el-primary-600); background: var(--el-primary-50);
}
.home-reward-card__out-badge {
  position: absolute; top: 6px; right: 6px;
  background: var(--el-danger-bg); color: var(--el-danger);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  padding: 2px 6px; border-radius: var(--rd-full);
}

/* ═══════════════════════════════════════════════════════════
   HOME — ANNOUNCEMENT BAR
════════════════════════════════════════════════════════════ */
.home-announce {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  line-height: 1.4;
}
.home-announce i { font-size: 16px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   HOME — BANNER SLIDER
════════════════════════════════════════════════════════════ */
.home-banner-slider {
  position: relative;
  overflow: hidden;
  background: var(--el-ink-100);
}
.home-banner-slider__track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.home-banner-slide {
  flex: 0 0 100%;
  display: block;
  text-decoration: none;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.home-banner-slide__img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.home-banner-slide__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.home-banner-slide__title {
  margin: 0 0 2px;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.home-banner-slide__subtitle {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: var(--fs-xs);
}
.home-banner-slider__dots {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.home-banner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none; padding: 0; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.home-banner-dot--active {
  background: #fff;
  transform: scale(1.3);
}

/* ════════════════════════════════════════════════════════════
   HOME PAGE v2  (hp-* classes)  — Simplus-style layout
════════════════════════════════════════════════════════════ */

/* ── Root & body bg ──────────────────────────────────────── */
.hp {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--el-surface-bg, #F4F6F8);
}

/* ── Announcement bar ────────────────────────────────────── */
.hp-announce {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.hp-announce i { font-size: 15px; flex-shrink: 0; }

/* ── Banner Slider ───────────────────────────────────────── */
.hp-slider {
  position: relative; overflow: hidden;
}
.hp-slider__track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.hp-slide {
  flex: 0 0 100%; display: block;
  text-decoration: none; position: relative;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.hp-slide__img {
  display: block; width: 100%; height: 200px; object-fit: cover;
}
.hp-slide__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 16px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
}
.hp-slide__title {
  margin: 0 0 2px; color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.hp-slide__sub { margin: 0; color: rgba(255,255,255,.85); font-size: var(--fs-xs); }
.hp-slider__dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.hp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: none; padding: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.hp-dot--active { background: #fff; transform: scale(1.35); }

/* ── Default hero (no banners) ───────────────────────────── */
.hp-hero-default {
  position: relative; height: 160px; overflow: hidden;
  background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
}
.hp-hero-default__pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 0%, transparent 60%),
                    radial-gradient(circle at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%);
}
.hp-hero-default__content {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 24px 20px;
}
.hp-hero-default__img { width: 80px; height: 80px; object-fit: contain; filter: brightness(0) invert(1) opacity(.4); }
.hp-hero-default__brand {
  margin: 0 0 4px; color: #fff;
  font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -.3px;
}
.hp-hero-default__tagline { margin: 0; color: rgba(255,255,255,.8); font-size: var(--fs-xs); }

/* ── Body wrapper ────────────────────────────────────────── */
.hp-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Shared card ─────────────────────────────────────────── */
.hp-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  overflow: hidden;
}

/* ── Greeting card ───────────────────────────────────────── */
.hp-greeting {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
}
.hp-greeting__left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.hp-greeting__info { flex: 1; min-width: 0; }
.hp-greeting__hello { margin: 0; font-size: var(--fs-xs); color: var(--el-ink-400); }
.hp-greeting__name {
  margin: 1px 0 4px; font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--el-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Avatar ──────────────────────────────────────────────── */
.hp-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--el-primary-100, #FFEBEE);
  border: 2.5px solid var(--el-primary-300, #E57373);
  overflow: hidden;
}
.hp-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.hp-avatar__init {
  font-size: 20px; font-weight: var(--fw-bold);
  color: var(--el-primary-600, #C62828);
}
.tier-ring--gold   { border-color: #F59E0B; background: #FEF3C7; }
.tier-ring--gold   .hp-avatar__init { color: #B45309; }
.tier-ring--silver { border-color: #94A3B8; background: #F1F5F9; }
.tier-ring--silver .hp-avatar__init { color: #475569; }
.tier-ring--platinum { border-color: #7C3AED; background: #EDE9FE; }
.tier-ring--platinum .hp-avatar__init { color: #5B21B6; }

.hp-tier-badge { font-size: var(--fs-2xs); }

/* ── Points pill ─────────────────────────────────────────── */
.hp-points-pill {
  display: flex; align-items: center; gap: 4px;
  background: #FEF3C7; border: 1.5px solid #FCD34D;
  border-radius: 999px; padding: 6px 10px 6px 8px;
  text-decoration: none; flex-shrink: 0;
  transition: transform .15s;
}
.hp-points-pill:active { transform: scale(.96); }
.hp-points-pill__icon { font-size: 18px; color: #D97706; }
.hp-points-pill__val { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: #92400E; }
.hp-points-pill__arr { font-size: 14px; color: #D97706; }

/* ── Progress card ───────────────────────────────────────── */
.hp-progress-card {
  padding: 10px 16px 12px;
}
.hp-progress-bar {
  height: 6px; border-radius: 999px;
  background: var(--el-ink-100, #F1F5F9);
  overflow: hidden; margin-bottom: 6px;
}
.hp-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #E53935 0%, #FF8A80 100%);
  transition: width .6s ease;
}
.hp-progress-text {
  margin: 0; font-size: var(--fs-xs); color: var(--el-ink-500);
  text-align: center;
}
.hp-progress-text strong { color: var(--el-primary-600, #C62828); }

/* ── Quick Actions ───────────────────────────────────────── */
.hp-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.hp-action-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 10px 16px; gap: 10px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.hp-action-card:active { transform: scale(.96); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.hp-action-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.hp-action-card__icon--red  { background: #FFEBEE; color: #E53935; }
.hp-action-card__icon--gold { background: #FEF3C7; color: #D97706; }
.hp-action-card__label {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-ink-700); text-align: center; line-height: 1.5;
}

/* ── Benefits card ───────────────────────────────────────── */
.hp-benefits-card { padding: 16px; }
.hp-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.hp-section-hd--pad { padding: 0 2px; }
.hp-section-hd__title {
  margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--el-ink-900);
}
.hp-section-hd__more {
  display: flex; align-items: center; gap: 2px;
  font-size: var(--fs-xs); color: var(--el-primary-500, #E53935);
  text-decoration: none; font-weight: var(--fw-medium);
}
.hp-benefits-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.hp-benefit-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hp-benefit-item__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.hp-benefit-item__label {
  font-size: 10px; font-weight: var(--fw-medium);
  color: var(--el-ink-600); text-align: center;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-explore-btn {
  display: block; width: 100%; padding: 10px;
  background: var(--el-primary-50, #FFEBEE);
  color: var(--el-primary-600, #C62828);
  border: none; border-radius: 8px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-align: center; text-decoration: none;
  transition: background .15s;
}
.hp-explore-btn:active { background: var(--el-primary-100, #FFCDD2); }

/* ── Mission card ────────────────────────────────────────── */
.hp-mission-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid #FCD34D;
  box-shadow: 0 2px 8px rgba(251,191,36,.2);
}
.hp-mission-card__title {
  margin: 0 0 3px; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: #78350F;
}
.hp-mission-card__sub {
  margin: 0 0 10px; font-size: var(--fs-xs); color: #92400E;
}
.hp-mission-card__sub strong { color: #B45309; }
.hp-mission-card__cta {
  display: inline-block;
  padding: 5px 14px; border-radius: 999px;
  background: #D97706; color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.hp-mission-card__ill {
  position: relative; flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251,191,36,.25); border-radius: 50%;
  color: #D97706; font-size: 28px;
}
.hp-mission-card__pts {
  position: absolute; top: -4px; right: -4px;
  background: #D97706; color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: var(--fw-bold);
  padding: 1px 5px; line-height: 1.4;
}

/* ── Products ────────────────────────────────────────────── */
.hp-add-product {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; text-decoration: none;
  font-size: var(--fs-sm); color: var(--el-primary-500, #E53935);
  font-weight: var(--fw-medium); border: 1.5px dashed var(--el-primary-200, #EF9A9A);
  border-radius: 14px; background: #fff;
}
.hp-add-product__icon { font-size: 20px; }
.hp-product-list { padding: 4px 0; }
.hp-product-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--el-ink-50, #F8FAFC);
  text-decoration: none; color: inherit;
  transition: background var(--dur-fast);
}
.hp-product-row:hover,
.hp-product-row:active { background: var(--el-ink-50, #F8FAFC); }
.hp-product-row:last-child { border-bottom: none; }
.hp-product-row__icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--el-ink-50, #F8FAFC); font-size: 20px;
}
.hp-product-row__thumb {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  background: var(--el-ink-50, #F8FAFC);
  display: flex; align-items: center; justify-content: center;
}
.hp-product-row__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.hp-product-row__thumb-icon { font-size: 22px; }
.hp-product-row__body { flex: 1; min-width: 0; }
.hp-product-row__name {
  margin: 0 0 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.hp-product-row__more {
  font-size: 10px; font-weight: var(--fw-medium); color: var(--el-ink-500);
  background: var(--el-ink-100); border-radius: var(--rd-full); padding: 1px 5px; flex-shrink: 0;
}
.hp-product-row__order {
  margin: 0 0 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-product-row__order-num {
  margin: 0 0 1px; font-size: 11px; color: var(--el-ink-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-product-row__meta { margin: 0; font-size: 11px; color: var(--el-ink-400); }
.hp-product-row__badge { font-size: 20px; color: var(--el-primary-400, #EF5350); flex-shrink: 0; }
.hp-product-row__status {
  font-size: 10px; font-weight: var(--fw-bold); padding: 3px 8px;
  border-radius: var(--rd-full); flex-shrink: 0; white-space: nowrap;
}
.hp-product-row__status--confirmed  { background: #EFF6FF; color: #1D4ED8; }
.hp-product-row__status--shipped    { background: #FFF7ED; color: #C2410C; }
.hp-product-row__status--delivered  { background: #F0FDF4; color: #15803D; }
.hp-product-row__status--cancelled  { background: #FEF2F2; color: #DC2626; }

/* ── Rewards grid ────────────────────────────────────────── */
.hp-rewards-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.hp-reward-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
  text-decoration: none; overflow: hidden; position: relative;
  transition: transform .15s;
}
.hp-reward-card:active { transform: scale(.97); }
.hp-reward-card--out { opacity: .55; }
.hp-reward-card__media {
  height: 110px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.hp-reward-card__media img { width: 100%; height: 110px; object-fit: contain; }
.hp-reward-card__media .reward-icon-emoji { font-size: 40px; }
.hp-reward-card__media .reward-icon-box { width: 64px; height: 64px; font-size: 28px; }
.hp-reward-card__body { padding: 8px 10px 10px; }
.hp-reward-card__name {
  margin: 0 0 5px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--el-ink-800); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-reward-card__pts {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--el-ink-500); background: var(--el-ink-50);
  padding: 2px 7px; border-radius: 999px;
}
.hp-reward-card__pts i { font-size: 13px; }
.hp-reward-card__pts--can { color: #D97706; background: #FEF3C7; }
.hp-reward-card__sold {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: 999px;
}

/* ── Bottom spacer ───────────────────────────────────────── */
/* ---- Redemption History Cards ---- */
.hp-redeem-list {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.page-home .hp-redeem-card {
  border-radius: ;
  border: none;
  border-bottom: 1px solid var(--el-ink-100);
  padding-bottom: var(--sp-3);
}
.page-home .hp-redeem-card:last-child { border-bottom: none; }
.hp-redeem-card {
  background: var(--el-paper);
  border-radius: var(--rd-xl);
  border: 1.5px solid var(--el-ink-100);
  padding: var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.hp-redeem-card__top {
  display: flex; align-items: center; gap: var(--sp-3);
}
.hp-redeem-card__thumb {
  width: 44px; height: 44px; border-radius: var(--rd-md);
  overflow: hidden; border: 1px solid var(--el-ink-100);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--el-surface);
}
.hp-redeem-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-redeem-card__fallback { font-size: 22px; line-height: 1; }
.hp-redeem-card__info { flex: 1; min-width: 0; }
.hp-redeem-card__name {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--el-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 2px;
}
.hp-redeem-card__pts { font-size: 11px; font-weight: var(--fw-bold); color: var(--el-primary-500); margin: 0; }
.hp-redeem-card__pts span { font-weight: var(--fw-regular); color: var(--el-ink-400); }
.hp-redeem-card__date { font-size: 10px; color: var(--el-ink-400); flex-shrink: 0; }
.hp-redeem-cancelled {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: var(--fw-bold);
  color: #DC2626; background: #FEF2F2;
  padding: 3px 10px; border-radius: var(--rd-full);
}
.hp-redeem-cancel-info {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-top: var(--sp-2);
}
.hp-redeem-cancel-reason {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--el-warning-700, #B45309);
  background: var(--el-warning-bg, #FFFBEB);
  border: 1px solid var(--el-warning-border, #FDE68A);
  border-radius: var(--rd-full); padding: 4px 10px;
}
.hp-redeem-cancel-reason .bx { font-size: 12px; flex-shrink: 0; }
.hp-redeem-cancel-actions {
  display: flex; gap: var(--sp-2);
}
.hp-redeem-cancel-btn {
  flex: 1; text-align: center;
  font-size: 12px; font-weight: var(--fw-semibold);
  padding: 6px var(--sp-2);
  border-radius: var(--rd-md);
  border: 1.5px solid var(--el-ink-200);
  cursor: pointer;
}
.hp-redeem-cancel-btn--ghost {
  background: #fff; color: var(--el-ink-700);
  border-color: var(--el-ink-200);
}
.hp-redeem-cancel-btn--primary {
  background: var(--el-ink-900); color: #fff;
  border-color: var(--el-ink-900);
}
/* Timeline */
.hp-redeem-tl {
  display: flex; align-items: flex-start;
}
.hp-redeem-tl__step {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0;
}
.hp-redeem-tl__dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--el-ink-200); background: var(--el-paper);
}
.hp-redeem-tl__dot--done { background: var(--el-primary-500); border-color: var(--el-primary-500); }
.hp-redeem-tl__dot--current { box-shadow: 0 0 0 3px rgba(229,57,53,0.18); }
.hp-redeem-tl__lbl { font-size: 9px; color: var(--el-ink-300); text-align: center; line-height: 1.2; }
.hp-redeem-tl__lbl--done { color: var(--el-ink-600); }
.hp-redeem-tl__line {
  flex: 1; height: 2px; background: var(--el-ink-100);
  align-self: flex-start; margin-top: 4px;
}
.hp-redeem-tl__line--done { background: var(--el-primary-500); }
/* ---- end Redemption History ---- */
.hp-bottom-space { height: 20px; }

/* ── Hamburger menu overlay + floating bubbles ── */
.hp-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 310;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hp-menu-overlay--open {
  display: block;
  opacity: 1;
}
.hp-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 311;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-4) 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.hp-menu-drawer--open {
  pointer-events: auto;
  opacity: 1;
  transform: translateX(0);
}
.hp-menu-bubbles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.hp-menu-bubble {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.14);
  text-decoration: none;
  color: var(--el-ink-700);
  font-size: 1.35rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  padding: 0;
}
.hp-menu-bubble:active {
  transform: scale(0.92);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
.hp-menu-bubble__icon { display: flex; align-items: center; justify-content: center; }
.hp-menu-bubble__label { display: none; }
.hp-menu-bubble--danger { color: var(--el-primary-500); }
.hp-menu-bubble--close { color: var(--el-ink-500); }
/* contact bubble accent */
.hp-menu-bubble:nth-child(2) { color: #06b6d4; }


/* ============================================================
   HOME PAGE · UI Kit Aligned Storefront
   Scoped by body.page-home — uses Eloop design tokens throughout.
════════════════════════════════════════════════════════════ */
/* Shell */
.page-home .header { display: none; }
.page-home .main {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-height) + var(--sp-6) + var(--safe-bottom));
  background: var(--el-surface);
}
.page-home .app,
.page-home .hp {
  background: var(--el-surface);
}

/* Announcement */
.page-home .hp-announce { margin: 0; padding: 8px 16px; }

/* ── Hero multi-slide (Hero Section tab) ─────────────────── */
.page-home .hp-hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--el-primary-500) 0%, var(--el-primary-700) 100%);
  transition: height var(--dur-base) var(--ease-out);
}
.page-home .hp-hero-slider__track {
  display: flex;
  width: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  align-items: flex-start;
}
.page-home .hp-hero-slide {
  flex: 0 0 100%;
  position: relative; display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.page-home .hp-hero-slide__img {
  display: block;
  width: 100%;
  height: auto;  /* NATURAL ASPECT — ตามสัดส่วนภาพจริง */
}
.page-home .hp-hero-slide__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 20px 28px;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.32) 55%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.page-home .hp-hero-slide__title {
  margin: 0 0 4px;
  color: #fff; font-size: 20px; font-weight: var(--fw-bold);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.page-home .hp-hero-slide__sub {
  margin: 0;
  color: rgba(255,255,255,.92); font-size: var(--fs-sm);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.page-home .hp-hero-dots {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
  padding: 6px 10px;
  background: rgba(0,0,0,.22);
  border-radius: var(--rd-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-home .hp-hero-dot {
  width: 16px; height: 3px;
  border-radius: var(--rd-full);
  background: rgba(255,255,255,.55);
  border: 0; padding: 0; cursor: pointer;
  transition: width var(--dur-fast), background var(--dur-fast);
}
.page-home .hp-hero-dot--active { width: 26px; background: #fff; }

/* Hero slider (legacy + default fallback) */
.page-home .hp-slider,
.page-home .hp-hero-default {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.page-home .hp-slide { position: relative; }
.page-home .hp-slide__img { height: 260px; object-fit: cover; }

/* Caption: gradient backdrop + readable typography (BANNER STYLE) */
.page-home .hp-slide__caption {
  display: block;
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 20px 28px;
  background: linear-gradient(to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.page-home .hp-slide__title {
  margin: 0 0 4px;
  color: #fff;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.page-home .hp-slide__sub {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: var(--fs-sm);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Dots: pill modern */
.page-home .hp-slider__dots {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
  padding: 6px 10px;
  background: rgba(0,0,0,.22);
  border-radius: var(--rd-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.page-home .hp-dot {
  width: 16px; height: 3px;
  border-radius: var(--rd-full);
  background: rgba(255,255,255,.55);
  transition: width var(--dur-fast), background var(--dur-fast);
}
.page-home .hp-dot--active { width: 26px; background: #fff; transform: none; }

/* Default hero (no banners) — 2-col rich content */
.page-home .hp-hero-default {
  height: 260px;
  background:
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.18) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.10) 0%, transparent 50%),
    linear-gradient(135deg, var(--el-primary-500) 0%, var(--el-primary-700) 100%);
}
.page-home .hp-hero-default__content {
  height: 100%;
  padding: 60px var(--sp-5) var(--sp-6);
  display: flex; flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.page-home .hp-hero-default__text { flex: 1; min-width: 0; }
.page-home .hp-hero-default__eyebrow {
  margin: 0 0 6px; font-size: 12px;
  color: rgba(255,255,255,.85);
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: var(--fw-medium);
}
.page-home .hp-hero-default__brand {
  color: #fff; font-size: 30px;
  font-weight: var(--fw-black); margin: 0 0 8px;
  letter-spacing: -.5px; line-height: 1.05;
}
.page-home .hp-hero-default__tagline {
  color: rgba(255,255,255,.88); font-size: var(--fs-sm); margin: 0;
  line-height: 1.4;
}
.page-home .hp-hero-default__deco {
  flex-shrink: 0;
  width: 96px; height: 96px;
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.22);
  display: grid; place-items: center;
  font-size: 48px;
  color: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* E logo + hamburger overlay */
.page-home .hp-hero-mark,
.page-home .hp-hero-menu {
  position: absolute; z-index: 4;
  top: calc(var(--safe-top) + 16px);
}
.page-home .hp-hero-mark { left: 16px; display: flex; align-items: center; }
.page-home .hp-hero-mark__coin {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 4px;
  box-shadow: var(--sh-md);
}
.page-home .hp-hero-menu {
  right: 16px; width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18); color: #fff; font-size: 24px;
}

/* Body */
.page-home .hp-body {
  position: relative; z-index: 2;
  margin-top: -12px;
  padding: 0 var(--sp-4) var(--sp-5);
  gap: var(--sp-4); background: transparent;
}

/* Cards */
.page-home .hp-card {
  border-radius: var(--rd-lg);
  box-shadow: var(--sh-sm);
  background: var(--el-paper);
}

/* Greeting */
.page-home .hp-greeting {
  margin: -8px -16px 0;
  padding: 20px var(--sp-4) var(--sp-4);
  border-radius: 22px 22px 0 0;
  box-shadow: none;
  background: linear-gradient(to bottom, #fff 0%, var(--el-surface) 100%);
}
.page-home .hp-greeting__left { gap: 10px; }
.page-home .hp-avatar {
  width: 52px; height: 52px;
  border: 2px solid var(--el-primary-200);
  background: var(--el-primary-50);
}
.page-home .hp-avatar__init { color: var(--el-primary-600); font-size: 20px; }
.page-home .hp-greeting__name {
  margin: 0 0 6px; color: var(--el-ink-900);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.page-home .hp-tier-badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--rd-full);
  background: var(--el-primary-50); color: var(--el-primary-600); font-size: 10px;
}
.page-home .hp-points-pill {
  display: grid; grid-template-columns: auto auto;
  column-gap: 4px; row-gap: 2px;
  padding: 0; border: 0; background: transparent; color: var(--el-ink-900);
}
.page-home .hp-points-pill__label {
  grid-column: 1 / -1;
  color: var(--el-ink-400); font-size: var(--fs-xs);
}
.page-home .hp-points-pill__val {
  color: var(--el-ink-900); font-size: var(--fs-md); font-weight: var(--fw-medium);
}
.page-home .hp-points-pill__arr { align-self: center; color: var(--el-ink-400); font-size: 18px; }

/* Quick actions */
.page-home .hp-actions { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
/* Profile nudge — soft banner เตือนกรอกข้อมูล */
.page-home .hp-profile-nudge {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 14px 14px 14px;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--el-primary-50) 0%, #fff 100%);
  border: 1px solid var(--el-primary-100, rgba(229,57,53,.15));
  border-radius: var(--rd-md);
  box-shadow: var(--sh-xs);
}
.page-home .hp-profile-nudge__close {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--el-ink-500, #6B7280); border-radius: 999px;
}
.page-home .hp-profile-nudge__close:active { background: rgba(0,0,0,.05); }
.page-home .hp-profile-nudge__close i { font-size: 20px; }
.page-home .hp-profile-nudge__icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--el-primary-500);
  color: #fff;
}
.page-home .hp-profile-nudge__icon i { font-size: 22px; }
.page-home .hp-profile-nudge__body { flex: 1; min-width: 0; }
.page-home .hp-profile-nudge__title {
  color: var(--el-ink-900, #111827);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  margin: 0 28px 4px 0;
}
.page-home .hp-profile-nudge__bonus {
  color: var(--el-primary-600); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); margin: 0 0 8px;
}
.page-home .hp-profile-nudge__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.page-home .hp-profile-nudge__chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: #fff;
  color: var(--el-ink-700, #374151);
  font-size: 11px; font-weight: var(--fw-medium);
  border-radius: 999px;
  border: 1px solid var(--el-border-soft, #E5E7EB);
}
.page-home .hp-profile-nudge__cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: var(--el-primary-500); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border-radius: 999px;
  text-decoration: none;
}
.page-home .hp-profile-nudge__cta:active { transform: scale(.97); }
.page-home .hp-profile-nudge__cta i { font-size: 16px; }

.page-home .hp-action-card {
  gap: 6px; padding: 6px;
  background: var(--el-paper);
  border-radius: var(--rd-md); box-shadow: var(--sh-xs);
}
.page-home .hp-action-card__media {
  width: 100%; height: 96px;
  border-radius: var(--rd-md);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  background: transparent;
}
.page-home .hp-action-card__media--warranty { color: var(--el-primary-500); }
.page-home .hp-action-card__media--mall { color: var(--el-primary-600); }
.page-home .hp-action-card__media i { font-size: 28px; }
.page-home .hp-action-card__media img {
  max-width: 100%; max-height: 100%;
  width: auto; height: 100%;
  object-fit: contain;
  border-radius: var(--rd-md);
  padding: 4px;
}
.page-home .hp-action-card__media span {
  position: absolute; right: 8px; bottom: 8px;
  padding: 2px 6px; border-radius: var(--rd-full);
  background: rgba(255,255,255,.9); color: var(--el-primary-600);
  font-size: 9px; font-weight: var(--fw-bold);
}
.page-home .hp-action-card__label {
  color: var(--el-ink-800); font-size: var(--fs-xs);
  padding: 0; text-align: center;
}

/* Section headings */
/* Promo codes section — Simplus-style discount card row */
.page-home .hp-promo { padding: 14px 12px 12px; border-radius: var(--rd-lg); }
.page-home .hp-promo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.page-home .hp-promo-card {
  position: relative;
  padding: 14px 10px 12px;
  border-radius: var(--rd-md);
  border: 1.5px solid var(--el-primary-100);
  background: linear-gradient(180deg, var(--el-primary-50) 0%, #fff 60%);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  overflow: hidden;
}
.page-home .hp-promo-card::before,
.page-home .hp-promo-card::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--el-paper);
  border: 1.5px solid var(--el-primary-100);
  top: 50%; transform: translateY(-50%);
}
.page-home .hp-promo-card::before { left: -8px; }
.page-home .hp-promo-card::after  { right: -8px; }
.page-home .hp-promo-card__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--el-primary-500); color: #fff;
  display: grid; place-items: center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(229,57,53,.22);
}
.page-home .hp-promo-card__amount {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--el-primary-600);
  letter-spacing: -.2px;
  line-height: 1.1;
}
.page-home .hp-promo-card__cond {
  font-size: 10.5px; color: var(--el-ink-500); line-height: 1.25;
  min-height: 26px;
}
.page-home .hp-promo-card__code {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  background: var(--el-ink-900);
  color: #fff;
  border-radius: var(--rd-sm);
  border: 0;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
  letter-spacing: .04em;
  transition: background var(--dur-fast);
}
.page-home .hp-promo-card__code:hover,
.page-home .hp-promo-card__code:focus-visible { background: var(--el-primary-600); }
.page-home .hp-promo-card__code.is-copied { background: var(--el-success-500, #16A34A); }
.page-home .hp-promo-card__code-label { opacity: .75; font-size: 9.5px; }
.page-home .hp-promo-card__code-val { font-weight: var(--fw-bold); letter-spacing: .03em; }
.page-home .hp-promo-card__code i { font-size: 13px; opacity: .85; }

.page-home .hp-promo__period {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--el-ink-100);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  color: var(--el-primary-600);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.page-home .hp-promo__period i { font-size: 14px; }

@media (max-width: 480px) {
  .page-home .hp-promo__grid { grid-template-columns: 1fr; gap: 10px; }
  .page-home .hp-promo-card__cond { min-height: 0; }
}

.page-home .hp-section-hd { margin-bottom: -6px; }
.page-home .hp-section-hd__title { color: var(--el-ink-900); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.page-home .hp-section-hd__more { color: var(--el-primary-500); font-size: var(--fs-xs); }

/* Benefits */
.page-home .hp-benefits-card { padding: 10px; border-radius: var(--rd-lg); }
.page-home .hp-benefits-card--image {
  display: block; padding: 0; overflow: hidden;
  border-radius: var(--rd-lg);
  text-decoration: none;
  transition: transform .15s ease;
}
.page-home .hp-benefits-card--image:active { transform: scale(.98); }
.page-home .hp-benefits-card--image img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rd-lg);
}
.page-home .hp-benefits-panel {
  padding: 12px 10px 14px; border-radius: var(--rd-md);
  background: var(--el-primary-500); overflow: hidden;
}
.page-home .hp-benefits-panel__eyebrow {
  margin: 0 0 16px; color: rgba(255,255,255,.8);
  font-size: 9px; text-align: center; font-weight: var(--fw-medium);
}
.page-home .hp-benefits-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }
.page-home .hp-benefit-item { gap: 6px; min-width: 0; }
.page-home .hp-benefit-item__icon {
  width: 38px; height: 38px; border-radius: 50%;
  color: #fff; background: rgba(255,255,255,.2); font-size: 18px;
}
.page-home .hp-benefit-item__label { color: rgba(255,255,255,.9); font-size: 8px; line-height: 1.2; }
.page-home .hp-explore-btn {
  width: min(240px,82%); margin: 0 auto;
  padding: 12px 16px; border-radius: var(--rd-full);
  background: #fff; color: var(--el-primary-600);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-align: center; display: block;
}

/* Mission card */
.page-home .hp-mission-card {
  min-height: 98px; padding: 18px var(--sp-4);
  border: 0; border-radius: var(--rd-md);
  box-shadow: var(--sh-xs); background: var(--el-gold-50);
}
.page-home .hp-mission-card__title { color: var(--el-gold-600); font-size: var(--fs-md); }
.page-home .hp-mission-card__sub { color: var(--el-gold-600); font-size: var(--fs-sm); }
.page-home .hp-mission-card__sub strong { color: var(--el-gold-500); }
.page-home .hp-mission-card__cta {
  padding: 8px 18px; background: var(--el-gold-500); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.page-home .hp-mission-card__ill {
  width: 94px; height: 72px; border-radius: 0;
  background: transparent; color: var(--el-gold-400); font-size: 68px;
}
.page-home .hp-mission-card__pen {
  position: absolute; right: 8px; bottom: 8px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--el-gold-300); font-size: 18px;
}

/* Add product */
.page-home .hp-add-product {
  min-height: 80px; padding: var(--sp-5);
  border: 0; border-radius: var(--rd-md);
  background: var(--el-ink-50); color: var(--el-primary-600);
}
.page-home .hp-add-product span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 18px; border-radius: var(--rd-full);
  border: 1px solid var(--el-primary-300);
  font-size: var(--fs-xs);
}

/* Product list */
.page-home .hp-product-list {
  background: var(--el-paper); border-radius: var(--rd-md); box-shadow: var(--sh-xs);
}

/* Filter chips */
.page-home .hp-filter-chips {
  display: flex; gap: 10px; margin-top: -8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.page-home .hp-filter-chips::-webkit-scrollbar { display: none; }
.page-home .hp-filter-chip {
  min-width: 42px; height: 30px; border-radius: var(--rd-full);
  display: inline-grid; place-items: center;
  border: 1px solid var(--el-ink-100);
  background: var(--el-paper); color: var(--el-ink-500); font-size: var(--fs-xs);
}
.page-home .hp-filter-chip--active {
  border-color: var(--el-primary-500);
  background: var(--el-primary-500); color: #fff;
}

/* Rewards grid */
.page-home .hp-rewards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.page-home .hp-reward-card {
  border-radius: var(--rd-md); box-shadow: var(--sh-sm); background: var(--el-paper);
}
.page-home .hp-reward-card__media { height: 136px; background: #fff; }
.page-home .hp-reward-card__media img { height: 136px; object-fit: contain; padding: 6px; }
.page-home .hp-reward-card__fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--el-primary-600); background: var(--el-primary-50);
}
.page-home .hp-reward-card__fallback svg { width: 52px; height: 52px; }
.page-home .hp-reward-card__body { padding: 8px 9px 10px; }
.page-home .hp-reward-card__tag,
.page-home .hp-reward-card__name {
  margin: 0; color: var(--el-ink-600); font-size: var(--fs-xs); line-height: 1.35;
}
.page-home .hp-reward-card__name {
  min-height: 32px; margin-bottom: 7px; color: var(--el-ink-900);
}
.page-home .hp-reward-card__pts {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; background: transparent;
  color: var(--el-gold-700); font-size: var(--fs-md);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.page-home .hp-reward-card__pts-unit { font-size: 11px; font-weight: var(--fw-medium); }
.page-home .hp-reward-card__pts-coin {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #FCD34D, #F59E0B);
  color: #FFF7D6;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 -1px 1px rgba(146,64,14,.22), 0 1px 2px rgba(146,64,14,.16);
}
.page-home .hp-reward-card__pts-coin i { font-size: 12px; line-height: 1; }
.page-home .hp-reward-card__old {
  margin: 1px 0 0; color: var(--el-ink-300); font-size: 10px; text-decoration: line-through;
}
.page-home .hp-bottom-space { height: 30px; }

/* Event banner slide */
.page-home .hp-event-slide {
  position: relative;
  overflow: hidden;
  border-radius: var(--rd-lg);
}
.page-home .hp-event-track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.page-home .hp-event-card {
  flex: 0 0 100%;
  min-height: 112px;
  border-radius: var(--rd-lg);
  padding: 18px var(--sp-4);
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: var(--sh-sm);
}
.page-home .hp-event-card--gold  { background: linear-gradient(135deg, var(--el-gold-500), var(--el-gold-700)); }
.page-home .hp-event-card--red   { background: linear-gradient(135deg, var(--el-primary-500), var(--el-primary-700)); }
.page-home .hp-event-card--green { background: linear-gradient(135deg, #10B981, #059669); }

/* Banner variant — เต็มภาพ ไม่มี gradient + icon decoration */
.page-home .hp-event-card--banner {
  padding: 0;
  min-height: 0;
  background: var(--el-ink-100);
}
.page-home .hp-event-card--banner .hp-event-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.page-home .hp-event-card--banner .hp-event-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%);
}
.page-home .hp-event-card--banner .hp-event-card__title {
  margin: 0 0 2px;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.page-home .hp-event-card--banner .hp-event-card__sub {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: var(--fs-xs);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.page-home .hp-event-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.page-home .hp-event-card__eyebrow {
  margin: 0; font-size: 10px; color: rgba(255,255,255,.72);
  text-transform: uppercase; letter-spacing: .06em; font-weight: var(--fw-medium);
}
.page-home .hp-event-card__title {
  margin: 0; color: #fff; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.25;
}
.page-home .hp-event-card__sub { margin: 0; color: rgba(255,255,255,.82); font-size: var(--fs-xs); }
.page-home .hp-event-card__sub strong { color: #fff; }
.page-home .hp-event-card__cta {
  display: inline-block; margin-top: var(--sp-2);
  padding: 5px 14px; border-radius: var(--rd-full);
  background: rgba(255,255,255,.2); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); text-align: center;
}
.page-home .hp-event-card__deco {
  flex-shrink: 0; font-size: 54px; color: rgba(255,255,255,.18); line-height: 1;
}
.page-home .hp-event-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.page-home .hp-event-dot {
  width: 18px; height: 3px; border-radius: var(--rd-full);
  background: rgba(255,255,255,.45); border: none; padding: 0; cursor: pointer;
  transition: background .2s, width .2s;
}
.page-home .hp-event-dot--active { width: 26px; background: #fff; }

/* Tabbar — home page ใช้ style เดียวกับ global (ไม่ต้อง override) */

/* Responsive: tablet+ */
@media (min-width: 600px) {
  .page-home .hp-actions { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .page-home .hp-benefits-grid { grid-template-columns: repeat(4, 1fr); }
  .page-home .hp-rewards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .hp-hero-default { height: 260px; }
  .page-home .hp-slide__img { height: 260px; }
}

@media (min-width: 1024px) {
  /* AGENTS.md RWD: home ใช้ sidebar layout เหมือนหน้าอื่น (header + left tabbar + main fluid) */
  .page-home .header { display: flex; }
  .page-home .main { padding-bottom: var(--sp-10); }

  /* Tabbar กลับเป็น left sidebar — รีเซ็ตสี home-mobile (pill style) */
  .page-home .tabbar { background: var(--el-paper); }
  .page-home .tabbar__item { color: var(--el-ink-600); }
  .page-home .tabbar__item--active { color: var(--el-primary-500); }
  .page-home .tabbar__item--active .tabbar__icon { background: var(--el-primary-50); color: var(--el-primary-500); }
  .page-home .tabbar__item--center .tabbar__icon { background: transparent; color: inherit; border: none; box-shadow: none; }
  .page-home .tabbar__item--center .tabbar__label { color: inherit; }

  /* Content centered + max-width 1100px เพื่อ readability บนจอกว้าง */
  .page-home .hp { max-width: 1100px; margin: 0 auto; }

  /* Hero ที่ desktop — caption ใหญ่ขึ้น (ขนาดกรอบตาม natural image aspect) */
  .page-home .hp-hero-slide__caption { padding: 80px 32px 36px; }
  .page-home .hp-hero-slide__title { font-size: 26px; margin-bottom: 6px; }
  .page-home .hp-hero-slide__sub { font-size: var(--fs-md); }
  .page-home .hp-slider,
  .page-home .hp-hero-default { min-height: 340px; height: 340px; }
  .page-home .hp-slide__img { height: 340px; }
  .page-home .hp-slide__caption { padding: 80px 32px 36px; }
  .page-home .hp-slide__title { font-size: 26px; margin-bottom: 6px; }
  .page-home .hp-slide__sub { font-size: var(--fs-md); }
  .page-home .hp-hero-default__content { padding: 80px 32px 40px; }
  .page-home .hp-hero-default__brand { font-size: 40px; }
  .page-home .hp-hero-default__tagline { font-size: var(--fs-md); }
  .page-home .hp-hero-default__deco { width: 128px; height: 128px; font-size: 64px; border-radius: 28px; }

  /* ซ่อน hamburger เพราะมี left sidebar แล้ว */
  .page-home .hp-hero-menu { display: none; }

  /* Benefits icon contrast เพิ่ม */
  .page-home .hp-benefit-item__icon {
    background: rgba(255,255,255,.22);
    color: #fff;
  }
  .page-home .hp-benefit-item__icon i { font-size: 18px; }
  .page-home .hp-benefit-item__label { font-size: 11px; }

  /* Quick action media: icon ใหญ่ขึ้น + เพิ่ม contrast */
  .page-home .hp-action-card__media {
    height: 200px;
    padding: 16px;
    background: var(--el-ink-50);
  }
  .page-home .hp-action-card__media i { font-size: 36px; }
  .page-home .hp-action-card__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    max-width: none; max-height: none;
  }
  .page-home .hp-action-card__label {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    padding: 10px 0 6px;
  }

  /* Home-specific content layouts */
  .page-home .hp-rewards-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Rewards: shortage button ── */
.btn-add-cart--shortage {
    background: var(--el-warning-bg);
    color: var(--el-gold-700);
    border: 1px solid var(--el-gold-500);
    border-radius: 8px;
    font-size: 12px;
    padding: 7px 10px;
    cursor: pointer;
    line-height: 1.3;
    text-align: center;
    width: 100%;
}
.btn-add-cart--shortage:hover { background: var(--el-warning-bg); filter: brightness(.95); }

/* ── Earn Guide Bottom Sheet ── */
.earn-guide-sheet {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: flex-end;
}
.earn-guide-sheet[aria-hidden="true"] { display: none; }
.earn-guide-sheet__backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.earn-guide-sheet__card {
    position: relative; width: 100%;
    background: var(--el-paper);
    border-radius: 20px 20px 0 0;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.earn-guide-sheet__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--el-ink-100);
}
.earn-guide-sheet__title { font-size: 15px; font-weight: 700; color: var(--el-ink-900); }
.earn-guide-sheet__close {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: var(--el-ink-100); color: var(--el-ink-500);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px;
}
.earn-guide-sheet__list { padding: 8px 0; }
.earn-guide-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; text-decoration: none;
    border-bottom: 1px solid var(--el-ink-50);
}
.earn-guide-item:last-child { border-bottom: none; }
.earn-guide-item__icon { font-size: 22px; color: var(--el-primary-500); flex-shrink: 0; }
.earn-guide-item__body { flex: 1; }
.earn-guide-item__title { font-size: 14px; font-weight: 600; color: var(--el-ink-900); }
.earn-guide-item__pts { font-size: 12px; color: var(--el-success); margin-top: 2px; }
.earn-guide-item__chevron { font-size: 18px; color: var(--el-ink-300); flex-shrink: 0; }

/* ── Tx Sheet — cancel reason + recovery ── */
.tx-sheet__row-value--cancel {
    color: var(--el-gold-700);
    background: var(--el-warning-bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.tx-sheet__cancel-actions {
    display: flex; gap: 8px; padding: 12px 16px 0;
}
.tx-sheet__cancel-btn {
    flex: 1; text-align: center;
    padding: 10px 8px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.tx-sheet__cancel-btn--primary { background: var(--el-primary-500); color: #fff; }
.tx-sheet__cancel-btn--ghost {
    background: transparent; color: var(--el-ink-600);
    border: 1px solid var(--el-ink-200);
}

/* ── Header help button ── */
.header__help {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--el-ink-200);
    color: var(--el-ink-500); text-decoration: none; font-size: 20px;
}
.header__help:hover { background: var(--el-ink-50); }

/* ── How-to-earn page ── */
.hte-page { padding-bottom: 80px; }
.hte-back-bar { padding: 12px 16px 0; }
.hte-back-btn {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 14px; color: var(--el-ink-500); text-decoration: none;
}
.hte-header { padding: 16px 16px 8px; }
.hte-title { font-size: 22px; font-weight: 700; color: var(--el-ink-900); margin-bottom: 4px; }
.hte-subtitle { font-size: 14px; color: var(--el-ink-400); }
.hte-steps { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.hte-step-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--el-paper); border: 1px solid var(--el-ink-100);
    border-radius: 12px; padding: 14px;
}
.hte-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--el-primary-500); color: #fff;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hte-step-body { flex: 1; }
.hte-step-title { font-size: 14px; font-weight: 600; color: var(--el-ink-900); margin-bottom: 3px; }
.hte-step-detail { font-size: 12px; color: var(--el-ink-400); line-height: 1.5; }
.hte-step-pts {
    font-size: 11px; color: var(--el-success); background: var(--el-success-bg);
    padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; align-self: flex-start;
}
.hte-faq { padding: 0 16px 20px; }
.hte-faq-title { font-size: 18px; font-weight: 700; color: var(--el-ink-900); margin-bottom: 12px; }
.hte-faq-list { display: flex; flex-direction: column; gap: 8px; }
.hte-faq-item { border: 1px solid var(--el-ink-100); border-radius: 10px; overflow: hidden; }
.hte-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 13px 14px; background: var(--el-paper); border: none;
    cursor: pointer; font-size: 14px; color: var(--el-ink-900); text-align: left;
}
.hte-faq-chevron { font-size: 18px; color: var(--el-ink-300); transition: transform .2s; flex-shrink: 0; }
.hte-faq-a {
    font-size: 13px; color: var(--el-ink-500); line-height: 1.6;
    padding: 0 14px 13px; background: var(--el-ink-50);
}