:root{
  --bg-0:#0a0616; /* base */
  --bg-1:#140b2c; /* deep purple */
  --bg-2:#1c0f3f; /* dark indigo */
  --accent:#7c3aed; /* purple 600 */
  --accent-2:#a78bfa; /* purple 300 */
  --accent-3:#c4b5fd; /* purple 200 */
  --text:#edeaff; /* near white with lilac tint */
  --muted:#b3a8e6; /* muted text */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --card-bg: rgba(255,255,255,0.06);
  --card-stroke: 1px solid rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(124,58,237,0.25);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background: radial-gradient(1200px 800px at 10% 10%, #1f1140 0%, #0a0616 55%),
            radial-gradient(900px 600px at 90% 0%, #2a1364 0%, transparent 60%),
            radial-gradient(900px 600px at 10% 100%, #1d0d45 0%, transparent 60%),
            linear-gradient(180deg, var(--bg-1), var(--bg-0));
  font-family:'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  overflow-x:hidden;
}

/* Themed scrollbar (WebKit) */
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-track{background:linear-gradient(180deg, #1b1038, #281050)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg, #3b1a78, #7c3aed); border:2px solid rgba(20,12,44,.95); border-radius:999px; box-shadow:inset 0 0 6px rgba(0,0,0,.35)}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, #5b21b6, #a78bfa)}

/* Themed scrollbar (Firefox) */
html{scrollbar-width:thin; scrollbar-color:#6d28d9 #1f1540}

/* --- Enhanced 3D Background System --- */
.bg-3d{
  position:fixed; inset:0; z-index:-1; overflow:hidden; 
  perspective:1200px; perspective-origin:center center;
  background: 
    radial-gradient(ellipse 1200px 900px at 20% 20%, rgba(124,58,237,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 1400px 1000px at 80% 30%, rgba(139,92,246,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 1000px 800px at 50% 80%, rgba(167,139,250,0.06) 0%, transparent 80%),
    linear-gradient(180deg, 
      rgba(10,6,22,0.95) 0%, 
      rgba(20,12,44,0.90) 25%, 
      rgba(15,10,30,0.85) 50%, 
      rgba(20,12,44,0.90) 75%, 
      rgba(10,6,22,0.95) 100%
    );
}

/* Primary 3D Elements */
.blob{
  position:absolute; 
  border-radius:50%; 
  filter: blur(120px) saturate(120%) brightness(1.05);
  opacity:0.4; 
  transform-style:preserve-3d;
  will-change: transform;
  mix-blend-mode: screen;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main Central Orb */
.blob.b1{
  width:90vmax; height:90vmax;
  background: 
    radial-gradient(circle at 30% 30%, rgba(124,58,237,0.3) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(167,139,250,0.2) 0%, transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 50%);
  left:50%; top:50%; 
  transform:translate(-50%, -50%);
  animation:centralFloat 30s ease-in-out infinite;
}

/* Top Right Orb */
.blob.b2{
  width:70vmax; height:70vmax;
  background: 
    radial-gradient(circle at 30% 30%, rgba(147,51,234,0.25) 0%, transparent 65%),
    radial-gradient(circle at 70% 70%, rgba(59,130,246,0.2) 0%, transparent 75%),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,0.15) 0%, transparent 55%);
  right:-15vmax; top:-20vmax; 
  animation:topRightFloat 25s ease-in-out infinite;
}

/* Bottom Left Orb */
.blob.b3{
  width:80vmax; height:80vmax;
  background: 
    radial-gradient(circle at 40% 40%, rgba(236,72,153,0.2) 0%, transparent 60%),
    radial-gradient(circle at 60% 60%, rgba(167,139,250,0.15) 0%, transparent 70%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.08) 0%, transparent 50%);
  left:-20vmax; bottom:-25vmax; 
  animation:bottomLeftFloat 35s ease-in-out infinite;
}

/* Floating Particles */
.blob.b4{
  width:25vmax; height:25vmax;
  background: 
    radial-gradient(circle at 50% 50%, rgba(167,139,250,0.2) 0%, transparent 80%);
  left:15%; top:25%; 
  animation:particleFloat1 20s ease-in-out infinite;
}

.blob.b5{
  width:20vmax; height:20vmax;
  background: 
    radial-gradient(circle at 50% 50%, rgba(124,58,237,0.15) 0%, transparent 85%);
  right:20%; bottom:35%; 
  animation:particleFloat2 18s ease-in-out infinite;
}

.blob.b6{
  width:30vmax; height:30vmax;
  background: 
    radial-gradient(circle at 50% 50%, rgba(139,92,246,0.12) 0%, transparent 90%);
  left:55%; top:65%; 
  animation:particleFloat3 22s ease-in-out infinite;
}

/* Enhanced Animations */
@keyframes centralFloat { 
  0%,100%{transform:translate(-50%, -50%) translate3d(0,0,0) scale(1)} 
  25%{transform:translate(-50%, -50%) translate3d(30px,-20px,150px) scale(1.08)} 
  50%{transform:translate(-50%, -50%) translate3d(-20px,40px,200px) scale(0.95)} 
  75%{transform:translate(-50%, -50%) translate3d(40px,10px,100px) scale(1.05)} 
}

@keyframes topRightFloat { 
  0%,100%{transform:translate3d(0,0,0) scale(1)} 
  33%{transform:translate3d(-40px,30px,-180px) scale(1.1)} 
  66%{transform:translate3d(20px,-50px,120px) scale(0.9)} 
}

@keyframes bottomLeftFloat { 
  0%,100%{transform:translate3d(0,0,0) scale(1)} 
  40%{transform:translate3d(50px,-30px,160px) scale(1.15)} 
  80%{transform:translate3d(-30px,20px,-100px) scale(0.85)} 
}

@keyframes particleFloat1 { 
  0%,100%{transform:translate3d(0,0,0) scale(1)} 
  50%{transform:translate3d(60px,-40px,80px) scale(1.2)} 
}

@keyframes particleFloat2 { 
  0%,100%{transform:translate3d(0,0,0) scale(1)} 
  50%{transform:translate3d(-50px,30px,-60px) scale(0.8)} 
}

@keyframes particleFloat3 { 
  0%,100%{transform:translate3d(0,0,0) scale(1)} 
  50%{transform:translate3d(40px,50px,100px) scale(1.1)} 
}

/* --- Layout --- */
header{
  position:sticky; top:0; backdrop-filter:saturate(160%) blur(10px); background:linear-gradient(180deg, rgba(15,10,30,0.85), rgba(10,6,22,0.6)); z-index:10;
}
.nav{display:flex; align-items:center; gap:14px; max-width:1200px; margin:0 auto; padding:12px 20px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px}
.logo{width:70px;height:70px; display:grid; place-items:center; border-radius:8px; background:none; box-shadow:none}
.logo img{width:100%; height:100%; object-fit:contain}
nav{
  margin-left:auto; 
  display:flex; 
  gap:6px; 
  flex-wrap:wrap;
  animation:slideInRight 0.8s ease-out;
}

@keyframes slideInRight{
  from{
    opacity:0;
    transform:translateX(30px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

.tab{
  appearance:none; 
  border:var(--card-stroke); 
  color:var(--text); 
  background:rgba(255,255,255,.04);
  padding:8px 12px; 
  border-radius:10px; 
  cursor:pointer; 
  font-weight:500; 
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size:.9rem; 
  letter-spacing:.3px; 
  position:relative;
  overflow:hidden;
  box-shadow:none;
}

.tab::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s ease;
}

.tab:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.tab:hover::before{
  left:100%;
}

.tab:active{
  transform:translateY(0);
}

.tab.active{
  background:rgba(167,139,250,.16);
  border-color:rgba(167,139,250,.45);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.25);
}

@keyframes gradientPulse{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Mobile header */
.menu-toggle{display:none; margin-left:auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text); width:36px; height:36px; border-radius:10px; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s ease; z-index:1001}
.menu-toggle:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2)}
.menu-toggle:active{transform:scale(0.95)}
.menu-toggle svg{pointer-events:none}

.mobile-menu{position:fixed; inset:0 0 auto 0; top:56px; max-height:0; overflow:auto; background:linear-gradient(180deg, rgba(20,12,44,.98), rgba(10,6,22,.94)); border-bottom:none; transition:max-height .25s ease; z-index:1000}
.mobile-menu.open{max-height:80vh; border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu-inner{max-width:1200px; margin:0 auto; padding:12px 20px 20px; display:grid; gap:10px}
.mobile-link{appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); padding:12px; border-radius:12px; text-align:left; font-weight:600; cursor:pointer; transition:all 0.2s ease}
.mobile-link:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2)}
.mobile-link:active{transform:scale(.99)}

@media (max-width: 900px){
  nav{display:none}
  .menu-toggle{display:inline-flex}
}

main{max-width:1200px; margin:24px auto 120px; padding:0 20px;}
section{display:none; animation:fade .3s ease forwards}
section.active{display:block}
@keyframes fade{from{opacity:.0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* --- Hero --- */
.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center;}
.badge{display:inline-flex; align-items:center; gap:10px; background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.35); padding:8px 12px; border-radius:999px; font-size:.94rem; color:var(--accent-3)}
h1{font-size: clamp(32px, 3.4vw, 54px); line-height:1.12; margin:14px 0 12px}
.hero p{color:var(--muted); font-size: clamp(15px,1.2vw,18px)}
.cta{
  display:flex; 
  gap:12px; 
  margin-top:22px;
  animation:fadeInUp 0.8s ease-out 0.3s both;
}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.btn{
  appearance:none; 
  border:none; 
  cursor:pointer; 
  padding:12px 16px; 
  border-radius:14px; 
  font-weight:600; 
  font-size:14px;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s ease;
}

.btn:hover::before{
  left:100%;
}

.btn.primary{
  background:linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  background-size:200% 200%;
  color:white; 
  box-shadow:0 8px 25px rgba(139,92,246,0.3);
  animation:gradientShift 3s ease infinite;
}

@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.btn.primary:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 15px 35px rgba(139,92,246,0.5);
  background-position:100% 50%;
}

.btn.primary:active{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 20px rgba(139,92,246,0.4);
}

.btn.ghost{
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:2px solid rgba(124,58,237,0.3);
  color:var(--text);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

.btn.ghost:hover{
  transform:translateY(-2px) scale(1.03);
  background:linear-gradient(135deg, rgba(124,58,237,0.1), rgba(139,92,246,0.05));
  border-color:rgba(124,58,237,0.5);
  box-shadow:0 10px 25px rgba(124,58,237,0.2);
  color:white;
}

.btn.ghost:active{
  transform:translateY(0) scale(1.01);
  box-shadow:0 4px 15px rgba(124,58,237,0.3);
}

.showcase{position:relative; width:434px; height:434px; border-radius:var(--radius); background:radial-gradient(120% 120% at 80% 20%, rgba(124,58,237,.35), rgba(255,255,255,.04) 60%, rgba(255,255,255,.02) 100%); border:var(--card-stroke); overflow:hidden; box-shadow:var(--shadow)}
.orb{position:absolute; width:180px; height:180px; border-radius:50%; filter:blur(10px); opacity:.9; }
.orb.o1{left:20px; top:40px; background:radial-gradient(circle at 30% 30%, #7c3aed, transparent 60%), radial-gradient(circle at 70% 70%, #a78bfa, transparent 60%)}
.orb.o2{right:30px; bottom:40px; width:220px; height:220px; background:radial-gradient(circle at 60% 40%, #22d3ee, transparent 60%), radial-gradient(circle at 30% 70%, #a78bfa, transparent 60%)}
.orb.o3{left:50%; top:50%; transform:translate(-50%,-50%); width:260px; height:260px; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.5), transparent 55%)}

/* --- Sections shared --- */
.section-title{font-size: clamp(24px,2.3vw,34px); margin:8px 0 16px}

/* Accent left border for all H2-like titles */
.section-title, .siam-title, .faq-title{
  position: relative;
  padding-left: 16px;
}
.section-title::before, .siam-title::before, .faq-title::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%);
  box-shadow: 0 0 12px rgba(124,58,237,.5);
}

@media (max-width: 640px){
  .section-title, .siam-title, .faq-title{padding-left:12px}
  .section-title::before, .siam-title::before, .faq-title::before{width:4px}
}

/* Centered FAQ title: place the accent bar directly before the text */
.faq-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding-left:0; /* override global */
}
.faq-title::before{
  position: static; /* make it sit before the text */
  width:8px;
  height:1.2em;
  border-radius:999px;
  flex:0 0 8px;
  background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 50%, #7c3aed 100%);
  box-shadow: 0 0 10px rgba(124,58,237,.45);
}

@media (max-width: 640px){
  .faq-title{gap:10px}
  .faq-title::before{width:6px; height:1.1em}
}
.grid{display:grid; gap:16px}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}

/* --- Category Filter --- */
.category-filter{
  display:flex; 
  gap:12px; 
  margin-bottom:24px; 
  flex-wrap:wrap; 
  justify-content:center; 
  padding:12px; 
  border-radius:20px; 
  background:linear-gradient(135deg, rgba(124,58,237,0.08), rgba(139,92,246,0.04));
  border:2px solid rgba(124,58,237,0.2); 
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  animation:slideInDown 0.6s ease-out;
}

@keyframes slideInDown{
  from{
    opacity:0;
    transform:translateY(-30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.category-btn{
  position:relative; 
  appearance:none; 
  color:#e9e3ff; 
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  padding:12px 20px; 
  border-radius:16px; 
  cursor:pointer; 
  font-weight:600; 
  font-size:.9rem;
  border:2px solid rgba(124,58,237,0.3) !important; 
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:hidden; 
  isolation:isolate;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.category-btn::after{
  /* mouse-follow glow */
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(124,58,237,.30), transparent 45%);
  opacity:.0; transition:opacity .25s ease; pointer-events:none; mix-blend-mode:screen;
}
/* Removed ::before pseudo-element */
.category-btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s ease;
}

.category-btn:hover{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(135deg, rgba(124,58,237,0.2), rgba(139,92,246,0.15));
  border-color:rgba(124,58,237,0.6) !important;
  box-shadow:0 12px 28px rgba(124,58,237,0.4);
  color:#ffffff;
}

.category-btn:hover::before{
  left:100%;
}

.category-btn:hover::after{
  opacity:.8;
}

.category-btn:active{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 20px rgba(124,58,237,0.3);
}

.category-btn.active{
  background:linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  background-size:200% 200%;
  color:#fff;
  border:2px solid #7c3aed !important;
  box-shadow:0 8px 24px rgba(124,58,237,0.5);
  animation:gradientPulse 2s ease infinite;
}

@keyframes gradientPulse{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* Removed active::before */
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* --- Pagination --- */
.pagination{
  display:flex; 
  gap:8px; 
  justify-content:center; 
  margin-top:32px; 
  flex-wrap:wrap;
  animation:fadeInUp 0.6s ease-out 0.2s both;
}

@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.pagination-btn{
  appearance:none; 
  border:2px solid rgba(124,58,237,0.3); 
  color:var(--text); 
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  padding:10px 14px; 
  border-radius:12px; 
  cursor:pointer; 
  font-weight:600; 
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width:44px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-size:0.9rem;
}

.pagination-btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition:left 0.6s ease;
}

.pagination-btn:hover:not(:disabled){
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(135deg, rgba(124,58,237,0.15), rgba(139,92,246,0.1));
  border-color:rgba(124,58,237,0.6);
  box-shadow:0 12px 28px rgba(124,58,237,0.3);
  color:white;
}

.pagination-btn:hover:not(:disabled)::before{
  left:100%;
}

.pagination-btn:active:not(:disabled){
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 8px 20px rgba(124,58,237,0.4);
}

.pagination-btn.active{
  background:linear-gradient(135deg, #8b5cf6, #7c3aed, #6d28d9);
  background-size:200% 200%;
  border:2px solid #7c3aed;
  color:white;
  box-shadow:0 8px 24px rgba(124,58,237,0.5);
  animation:gradientPulse 2s ease infinite;
}

@keyframes gradientPulse{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.pagination-btn:disabled{
  opacity:.4; 
  cursor:not-allowed;
  transform:none;
  background:rgba(255,255,255,0.02);
  border-color:rgba(255,255,255,0.1);
  color:var(--muted);
}

/* Mobile Pagination - Single Row */
@media (max-width: 640px){
  .pagination{
    flex-wrap:nowrap;
    gap:6px;
    margin-top:24px;
    padding:0 10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .pagination-btn{
    padding:8px 10px;
    min-width:36px;
    font-size:14px;
    flex-shrink:0;
  }
}

@media (max-width: 1200px){
  .grid.cols-4{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;}
  .grid.cols-4{grid-template-columns: 1fr 1fr}
  .grid.cols-3{grid-template-columns: 1fr 1fr}
  .showcase{width:100%; max-width:434px; height:280px}
}
@media (max-width: 640px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr}
  .category-filter{
    flex-direction:column; 
    gap:8px; 
    padding:12px; 
    background:rgba(255,255,255,0.02); 
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
  }
  .category-filter::before{
    content:"หมวดหมู่";
    display:block;
    color:#ffffff;
    font-size:14px;
    font-weight:500;
    margin-bottom:6px;
    padding-bottom:6px;
    border-bottom:1px solid #fbbf24;
  }
  .category-btn{
    width:100%;
    padding:10px 14px;
    font-size:14px;
    font-weight:400;
    background:rgba(255,255,255,0.03);
    border:none !important;
    border-radius:8px;
    color:#e9e3ff;
    text-align:left;
    position:relative;
    transition:all 0.2s ease;
  }
  .category-btn:hover{
    background:rgba(124,58,237,0.15);
    border:none !important;
    transform:translateX(2px);
  }
  .category-btn.active{
    background:linear-gradient(135deg, #8b5cf6, #7c3aed);
    border:none !important;
    color:#ffffff;
    font-weight:500;
  }
  /* Removed dropdown arrow */
  .showcase{width:100%; max-width:434px; height:auto}
  .showcase-img{height:auto !important; position:relative !important; top:auto !important; left:auto !important;}
}
@media (max-width: 420px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr}
}

.card{background:var(--card-bg); border:var(--card-stroke); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.card-body{padding:16px}
.title{font-weight:600}
.muted{color:var(--muted)}

/* --- Product --- */
.product-card{display:flex; flex-direction:column}
.product-media{background:linear-gradient(135deg, #1b1038, #281050); display:block; overflow:hidden; position:relative; height:auto}
.product-media img{width:100%; height:auto; object-fit:contain; transition:transform .3s ease; display:block}
.product-media:hover img{transform:scale(1.05)}
.product-media .mock{width:70%; height:70%; border-radius:16px; background: radial-gradient(60% 60% at 35% 30%, #8b5cf6, #7c3aed 40%, #312e81 70%); box-shadow: inset 0 0 24px rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.35)}
.price{font-weight:700}
.tag{font-size:.8rem; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(124,58,237,.12); color:#c4b5fd}
.card-actions{display:flex; gap:8px; margin-top:12px}
.qty{display:flex; align-items:center; gap:6px}
.icon-btn{
  display:grid; 
  place-items:center; 
  width:40px; 
  height:40px; 
  border-radius:12px; 
  border:2px solid var(--accent-2); 
  background:rgba(167,139,250,.15); 
  cursor:pointer;
  color:var(--accent-2);
  font-size:1.2rem;
  font-weight:700;
  transition:all 0.3s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.icon-btn:hover{
  background:var(--accent-2);
  color:var(--bg);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(167,139,250,.4);
}
.icon-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(167,139,250,.6);
}

/* --- Promotion --- */
.promotion-banner{
  position:relative; width:100%; max-width:1140px; margin:0 auto 32px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)
}
.promotion-banner img{width:100%; height:auto; object-fit:contain; display:block}
.banner-placeholder{
  display:none; width:100%; height:476px; background:linear-gradient(135deg, #1b1038, #281050); border:2px dashed rgba(167,139,250,.4); align-items:center; justify-content:center; flex-direction:column; text-align:center; color:var(--muted)
}
.placeholder-content svg{color:var(--accent-2); margin-bottom:16px}
.placeholder-content p{font-size:1.2rem; font-weight:500; margin:8px 0; color:var(--text)}
.placeholder-content small{font-size:.9rem; color:var(--muted)}

.coupon{display:flex; align-items:center; justify-content:space-between; gap:16px}
.coupon-code{font-weight:700; letter-spacing:1px; font-size:1.1rem}

/* Promotion Gallery */
.promotion-gallery{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1140px; margin:0 auto 20px;
}
.promotion-tile{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(255,255,255,.03)); box-shadow:var(--shadow)}
.promotion-tile img{width:100%; height:auto; object-fit:contain; display:block}
.promotion-fallback{display:none; align-items:center; justify-content:center; min-height:260px; color:#c4b5fd}
.promotion-fallback span{font-weight:600}

@media (max-width: 900px){
  .promotion-gallery{grid-template-columns:1fr; gap:14px}
}

/* Desktop tuning: make gallery frame smaller while keeping full images */
@media (min-width: 1024px){
  .promotion-gallery{max-width: 900px}
  .section-title{font-size: 28px; margin: 12px 0 20px}
}

/* Position section title over banner image */
#page-promotion .section-title{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

#page-promotion{
  position: relative;
}
/* --- Review --- */
.reviews-gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:40px; max-width:1200px; margin-left:auto; margin-right:auto
}
.review-item{
  position:relative; width:100%; height:504px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease
}
.review-item:hover{
  transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.3)
}
.review-item img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease
}
.review-item:hover img{
  transform:scale(1.05)
}
.review-placeholder{
  display:none; width:100%; height:100%; background:linear-gradient(135deg, #1b1038, #281050); border:2px dashed rgba(167,139,250,.4); align-items:center; justify-content:center; flex-direction:column; text-align:center; color:var(--muted)
}
.placeholder-content svg{color:var(--accent-2); margin-bottom:12px}
.placeholder-content p{font-size:1rem; font-weight:500; color:var(--text)}

.stars{display:inline-flex; gap:4px}
.star{width:18px; height:18px; fill:#fbbf24}

/* --- Cart --- */
/* Empty Cart State */
.empty-cart{
  display:flex; flex-direction:column; align-items:center; justify-content:center; 
  min-height:400px; text-align:center; padding:40px 20px;
}
.empty-cart-icon{
  width:120px; height:120px; margin-bottom:24px; 
  background:linear-gradient(135deg, rgba(124,58,237,.15), rgba(167,139,250,.1));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--muted); border:2px dashed rgba(167,139,250,.3);
}
.empty-cart h3{font-size:1.5rem; font-weight:600; margin:0 0 8px; color:var(--text)}
.empty-cart p{color:var(--muted); margin:0 0 24px; font-size:1rem}
.empty-cart .btn{padding:12px 24px; font-size:1rem}

/* --- New Checkout Modal Styles --- */
.checkout-modal{
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.8); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:1000; 
  backdrop-filter:blur(10px);
}

.checkout-modal-content{
  background:linear-gradient(135deg, #1a1a2e, #16213e); 
  border-radius:20px; 
  width:90%; 
  max-width:500px; 
  max-height:90vh; 
  overflow-y:auto; 
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn{
  from{opacity:0; transform:scale(0.9) translateY(-20px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}

.checkout-header{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:24px 32px; 
  border-bottom:1px solid rgba(124,58,237,0.3);
}

.checkout-header h3{
  color:#00d4ff; 
  font-size:1.5rem; 
  font-weight:600; 
  margin:0;
}

.close-btn{
  background:none; 
  border:none; 
  color:white; 
  font-size:1.5rem; 
  cursor:pointer; 
  padding:8px; 
  border-radius:50%; 
  transition:all 0.3s ease;
}

.close-btn:hover{
  background:rgba(255,255,255,0.1); 
  transform:scale(1.1);
}

.checkout-body{
  padding:24px 32px;
}

.order-summary-section, .payment-method-section, .contact-payment-section{
  margin-bottom:24px;
}

.order-summary-section h4, .payment-method-section h4, .contact-payment-section h4{
  color:#00d4ff; 
  font-size:1.1rem; 
  font-weight:600; 
  margin:0 0 16px 0;
}

.order-items{
  display:flex; 
  flex-direction:column; 
  gap:12px;
}

.order-item{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:12px; 
  background:rgba(255,255,255,0.05); 
  border-radius:8px;
}

.order-item-name{
  color:white; 
  font-weight:500;
}

.order-item-price{
  color:#a78bfa; 
  font-weight:600;
}

.order-summary-details{
  margin-top:16px; 
  padding-top:16px; 
  border-top:1px solid rgba(124,58,237,0.3);
}

.summary-row{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  margin-bottom:8px; 
  color:white;
}

.summary-row.total{
  margin-top:12px; 
  padding-top:12px; 
  border-top:1px solid rgba(124,58,237,0.3); 
  font-size:1.2rem; 
  font-weight:600; 
  color:#00d4ff;
}

.order-total{
  text-align:right; 
  margin-top:16px; 
  padding-top:16px; 
  border-top:1px solid rgba(124,58,237,0.3);
}

.order-total span{
  color:#00d4ff; 
  font-size:1.2rem; 
  font-weight:600;
}


.payment-instruction{
  background:rgba(0,212,255,0.1); 
  border:1px solid rgba(0,212,255,0.3); 
  border-radius:12px; 
  padding:16px; 
  margin-bottom:16px;
}

.payment-instruction p{
  color:white; 
  margin:0 0 8px 0; 
  font-size:0.95rem;
}

.payment-instruction p:last-child{
  margin-bottom:0;
}

.line-btn{
  background:linear-gradient(135deg, #00c851, #00a844); 
  color:white; 
  border:none; 
  padding:12px 24px; 
  border-radius:8px; 
  font-weight:600; 
  cursor:pointer; 
  display:flex; 
  align-items:center; 
  gap:8px; 
  transition:all 0.3s ease;
}

.line-btn:hover{
  background:linear-gradient(135deg, #00a844, #008f3a); 
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,200,81,0.3);
}

.line-icon{
  font-size:1.2rem;
}

.checkout-actions{
  display:flex; 
  gap:16px; 
  padding:24px 32px; 
  border-top:1px solid rgba(124,58,237,0.3);
}

.checkout-actions .btn{
  flex:1; 
  padding:12px 24px; 
  font-weight:600;
}


/* Success Alert Modal */
.success-alert-modal{
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  background:rgba(0,0,0,0.8); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:1002; 
  backdrop-filter:blur(10px);
}

.alert-content{
  background:linear-gradient(135deg, #2d2d2d, #1a1a1a); 
  border-radius:12px; 
  width:90%; 
  max-width:400px; 
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:modalSlideIn 0.3s ease-out;
}

.alert-header{
  padding:20px 24px; 
  border-bottom:1px solid rgba(255,255,255,0.1);
}

.alert-header h4{
  color:white; 
  font-size:1.1rem; 
  font-weight:600; 
  margin:0;
}

.alert-body{
  padding:20px 24px;
}

.alert-body p{
  color:white; 
  margin:0; 
  font-size:0.95rem;
}

.alert-actions{
  display:flex; 
  gap:12px; 
  padding:20px 24px; 
  border-top:1px solid rgba(255,255,255,0.1);
}

.alert-actions .btn{
  flex:1; 
  padding:10px 20px; 
  font-weight:600; 
  font-size:0.9rem;
}


/* Blog Styles */

.blog-articles{
  padding:80px 0;
}

.articles-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); 
  gap:30px; 
  margin-top:40px;
}

.article-card{
  background:rgba(255,255,255,0.05); 
  border-radius:20px; 
  overflow:hidden; 
  border:1px solid rgba(124,58,237,0.2); 
  transition:all 0.3s ease;
}

.article-card:hover{
  transform:translateY(-5px); 
  border-color:rgba(124,58,237,0.4); 
  box-shadow:0 10px 30px rgba(124,58,237,0.2);
}

.article-image{
  height:200px; 
  overflow:hidden;
}

.article-image img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition:transform 0.3s ease;
}

.article-card:hover .article-image img{
  transform:scale(1.05);
}

.article-content{
  padding:25px;
}

.article-meta{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  margin-bottom:15px;
}

.article-date{
  color:#a78bfa; 
  font-size:0.9rem;
}

.article-category{
  background:rgba(0,212,255,0.2); 
  color:#00d4ff; 
  padding:4px 12px; 
  border-radius:15px; 
  font-size:0.8rem; 
  font-weight:600;
}

.article-title{
  color:#edeaff; 
  font-size:1.3rem; 
  font-weight:600; 
  margin-bottom:15px; 
  line-height:1.4;
}

.article-excerpt{
  color:#a78bfa; 
  line-height:1.6; 
  margin-bottom:20px;
}

.article-link{
  color:#00d4ff; 
  text-decoration:none; 
  font-weight:600; 
  transition:color 0.3s ease;
}

.article-link:hover{
  color:#a78bfa;
}

/* Mobile Responsive */
@media (max-width: 640px){
  .checkout-modal-content{
    width:95%; 
    margin:20px;
  }
  
  .checkout-header{
    padding:20px 24px;
  }
  
  .checkout-body{
    padding:20px 24px;
  }
  
  .checkout-actions{
    padding:20px 24px;
  }
  
  .alert-content{
    width:95%; 
    margin:20px;
  }
  
  .alert-header, .alert-body, .alert-actions{
    padding:16px 20px;
  }
  
}

.checkout-form-header{
  text-align:center; 
  margin-bottom:32px;
}

.checkout-form-header h3{
  color:var(--accent); 
  font-size:1.8rem; 
  font-weight:600; 
  margin-bottom:8px;
  background:linear-gradient(135deg, #8b5cf6, #7c3aed);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.checkout-form-header p{
  color:var(--text-secondary); 
  font-size:1rem; 
  opacity:0.8;
}

.customer-info-form{
  display:flex; 
  flex-direction:column; 
  gap:24px;
}

.form-group{
  display:flex; 
  flex-direction:column; 
  gap:8px;
}

.form-group label{
  color:var(--text); 
  font-weight:600; 
  font-size:1rem;
  display:flex; 
  align-items:center; 
  gap:4px;
}

.form-group label::after{
  content:"*"; 
  color:#ef4444; 
  font-weight:bold;
}

.form-group:has(textarea) label::after{
  display:none;
}

.form-group input,
.form-group textarea{
  padding:16px 20px; 
  border:2px solid rgba(124,58,237,0.3); 
  border-radius:12px; 
  background:rgba(255,255,255,0.05); 
  color:var(--text); 
  font-size:1rem; 
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
  font-family:inherit;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none; 
  border-color:var(--accent); 
  background:rgba(255,255,255,0.08); 
  box-shadow:0 0 0 4px rgba(124,58,237,0.1);
  transform:translateY(-2px);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:var(--text-secondary); 
  opacity:0.6;
}

.form-group textarea{
  resize:vertical; 
  min-height:100px;
}

.payment-method{
  margin-top:16px; 
  padding:24px; 
  background:rgba(124,58,237,0.05); 
  border:2px solid rgba(124,58,237,0.2); 
  border-radius:16px;
}

.payment-method h4{
  color:var(--text); 
  font-size:1.2rem; 
  font-weight:600; 
  margin-bottom:20px;
  text-align:center;
}

.payment-options{
  display:flex; 
  flex-direction:column; 
  gap:12px;
}

.payment-option{
  position:relative; 
  cursor:pointer;
}

.payment-option input[type="radio"]{
  position:absolute; 
  opacity:0; 
  pointer-events:none;
}

.payment-label{
  display:flex; 
  align-items:center; 
  gap:16px; 
  padding:20px; 
  border:2px solid rgba(124,58,237,0.3); 
  border-radius:12px; 
  background:rgba(255,255,255,0.03); 
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
}

.payment-option:hover .payment-label{
  border-color:var(--accent); 
  background:rgba(124,58,237,0.1); 
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(124,58,237,0.2);
}

.payment-option input[type="radio"]:checked + .payment-label{
  border-color:var(--accent); 
  background:linear-gradient(135deg, rgba(124,58,237,0.15), rgba(139,92,246,0.1));
  box-shadow:0 4px 20px rgba(124,58,237,0.3);
}

.payment-icon{
  font-size:1.5rem; 
  width:40px; 
  height:40px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  background:rgba(124,58,237,0.1); 
  border-radius:50%;
}

.payment-label div{
  display:flex; 
  flex-direction:column; 
  gap:4px;
}

.payment-label strong{
  color:var(--text); 
  font-size:1rem; 
  font-weight:600;
}

.payment-label small{
  color:var(--text-secondary); 
  font-size:0.9rem; 
  opacity:0.8;
}

.checkout-actions{
  display:flex; 
  gap:16px; 
  margin-top:32px; 
  padding-top:24px; 
  border-top:2px solid rgba(124,58,237,0.2);
}

.checkout-actions .btn{
  flex:1; 
  padding:16px 24px; 
  font-size:1rem; 
  font-weight:600;
}

.btn-loading{
  display:inline-flex; 
  align-items:center; 
  gap:8px;
}

.btn-loading::after{
  content:""; 
  width:16px; 
  height:16px; 
  border:2px solid transparent; 
  border-top:2px solid currentColor; 
  border-radius:50%; 
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

/* Mobile Responsive for Checkout */
@media (max-width: 640px){
  .checkout-form{
    margin-top:24px; 
    padding:20px; 
    border-radius:16px;
  }
  
  .checkout-form-header h3{
    font-size:1.5rem;
  }
  
  .customer-info-form{
    gap:20px;
  }
  
  .form-group input,
  .form-group textarea{
    padding:14px 16px; 
    font-size:0.95rem;
  }
  
  .payment-method{
    padding:20px; 
    margin-top:12px;
  }
  
  .payment-label{
    padding:16px; 
    gap:12px;
  }
  
  .payment-icon{
    font-size:1.3rem; 
    width:36px; 
    height:36px;
  }
  
  .checkout-actions{
    flex-direction:column; 
    gap:12px; 
    margin-top:24px;
  }
  
  .checkout-actions .btn{
    padding:14px 20px;
  }
}

/* Cart Container */
.cart-container{display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-top:24px}
.cart-items-card, .order-summary-card{
  background:var(--card-bg); border:var(--card-stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.cart-items-header, .order-summary-header{
  padding:20px 24px; border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
}
.cart-items-header h3, .order-summary-header h3{
  margin:0; font-size:1.2rem; font-weight:600; color:var(--text)
}
.cart-items-body, .order-summary-body{padding:24px}

/* Cart Items List */
.cart-items-list{display:flex; flex-direction:column; gap:16px}
.cart-item{
  display:flex; align-items:center; gap:16px; padding:16px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05);
  border-radius:12px; transition:all .2s ease;
}
.cart-item:hover{background:rgba(255,255,255,.04); border-color:rgba(167,139,250,.2)}
.cart-item-image{
  width:80px; height:80px; border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center;
}
.cart-item-image img{width:100%; height:100%; object-fit:contain}
.cart-item-info{flex:1; min-width:0}
.cart-item-name{font-weight:600; margin:0 0 4px; color:var(--text); font-size:1rem}
.cart-item-desc{color:var(--muted); font-size:.9rem; margin:0 0 8px}
.cart-item-price{color:white; font-weight:600; font-size:1.1rem}
.cart-item-controls{
  display:flex; align-items:center; gap:12px; margin-left:16px;
}
.cart-item-qty{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05);
  padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.1);
}
.qty-btn{
  width:28px; height:28px; border-radius:6px; border:none; background:var(--accent);
  color:white; font-weight:bold; cursor:pointer; transition:all .2s ease;
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.qty-btn:hover{background:var(--accent-2); transform:scale(1.05)}
.qty-btn:active{transform:scale(0.95)}
.qty-display{
  min-width:32px; text-align:center; font-weight:600; color:var(--text);
}
.cart-item-total{
  font-weight:700; color:white; font-size:1.1rem; margin-left:16px;
  min-width:80px; text-align:right;
}
.cart-item-remove{
  background:var(--danger); color:white; border:none; padding:8px 12px;
  border-radius:6px; font-size:.9rem; cursor:pointer; transition:all .2s ease;
  margin-left:12px;
}
.cart-item-remove:hover{background:#dc2626; transform:scale(1.05)}

/* Order Summary */
.summary-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; color:var(--text);
}
.summary-row.total{
  font-size:1.2rem; font-weight:700; color:white;
  padding:16px 0 0; margin-top:16px;
}
.summary-divider{
  height:1px; background:linear-gradient(90deg, transparent, rgba(167,139,250,.3), transparent);
  margin:16px 0;
}

/* Promo Section */
.promo-section{margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1)}
.promo-input-group{
  display:flex; gap:8px; margin-bottom:8px;
}
.promo-input{
  flex:1; background:var(--card-bg); color:var(--text); border:var(--card-stroke);
  padding:10px 12px; border-radius:8px; font-size:.9rem;
}
.promo-hint{
  font-size:.8rem; color:var(--muted); text-align:center;
}

/* Cart Actions */
.cart-actions{
  display:flex; gap:12px; justify-content:center; margin-top:24px;
  flex-wrap:wrap;
}
.cart-actions .btn{padding:12px 20px; font-size:1rem; min-width:140px}

/* Card Actions for Product Page */
.card-actions{display:flex; gap:10px; margin-top:12px}
.card-actions .btn{padding:8px 12px; border-radius:10px; font-size:.9rem; flex:1}

/* Responsive */
@media (max-width: 900px){
  .cart-container{grid-template-columns:1fr; gap:20px}
  .cart-item{flex-direction:column; align-items:stretch; gap:12px}
  .cart-item-controls{justify-content:center; margin-left:0}
  .cart-item-total{text-align:center; margin-left:0}
  .cart-actions{flex-direction:column; align-items:center}
  .cart-actions .btn{width:100%; max-width:300px}
}

/* Card Actions Mobile */
@media (max-width: 640px){
  .card-actions{flex-direction:column; gap:8px; align-items:stretch}
  .card-actions .btn{padding:12px 16px; font-size:.85rem; text-align:center; line-height:1.2; min-height:44px; display:flex; align-items:center; justify-content:center; width:100%; border-radius:12px}
  .card-actions .btn:first-child{order:1; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; font-weight:600; color:white !important}
  .card-actions .btn:last-child{order:2; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; color:white !important; font-weight:600}
}
@media (max-width: 420px){
  .card-actions{flex-direction:column; gap:6px; align-items:stretch}
  .card-actions .btn{padding:10px 14px; font-size:.8rem; text-align:center; line-height:1.2; min-height:40px; display:flex; align-items:center; justify-content:center; width:100%; border-radius:10px}
  .card-actions .btn:first-child{order:1; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; font-weight:600; color:white !important}
  .card-actions .btn:last-child{order:2; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; color:white !important; font-weight:600}
}

/* --- Detail Product --- */
.detail-header{display:flex; align-items:center; gap:16px; margin-bottom:24px}
.detail-content{display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:start}
.detail-image{position:relative; border-radius:var(--radius); overflow:hidden; background:linear-gradient(135deg, #1b1038, #281050); height:auto}
.detail-image img{width:100%; height:auto; object-fit:contain; display:block}
.detail-info h1{font-size: clamp(28px, 3vw, 42px); margin:0 0 8px; line-height:1.2}
.detail-category{display:inline-block; padding:6px 12px; border-radius:20px; font-size:.9rem; font-weight:500; margin-bottom:16px}
.detail-price{font-size: clamp(24px, 2.5vw, 36px); font-weight:700; color:var(--accent); margin:16px 0}
.detail-desc{color:var(--muted); font-size:1.1rem; line-height:1.6; margin:16px 0}
.detail-specs{background:var(--card-bg); border:var(--card-stroke); border-radius:var(--radius); padding:20px; margin:20px 0}
.detail-specs h3{margin:0 0 12px; color:var(--accent-2)}
.spec-item{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1)}
.spec-item:last-child{border-bottom:none}
.spec-label{color:var(--muted)}
.spec-value{font-weight:500}
.detail-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.quantity-selector{display:flex; align-items:center; justify-content:center; gap:16px; margin:20px 0; padding:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px}
.quantity-selector label{font-weight:600; color:var(--text); margin-right:8px}
.qty-input{width:100px; text-align:center; background:var(--card-bg); color:var(--text); border:var(--card-stroke); padding:10px 12px; border-radius:8px; font-size:1rem; font-weight:600}
.quantity-selector .icon-btn{width:40px; height:40px; border-radius:8px; background:var(--accent); color:white; border:none; font-size:1.2rem; font-weight:bold; cursor:pointer; transition:all .2s ease; display:flex; align-items:center; justify-content:center}
.quantity-selector .icon-btn:hover{background:var(--accent-2); transform:scale(1.05)}
.quantity-selector .icon-btn:active{transform:scale(0.95)}

/* --- Price Grid --- */
.price-grid{
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
  gap:20px; 
  margin-top:24px;
  padding:24px;
  background:linear-gradient(135deg, rgba(124,58,237,0.1), rgba(139,92,246,0.05));
  border:2px solid rgba(124,58,237,0.2);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
}
.price-item{
  display:flex; 
  flex-direction:column;
  align-items:center; 
  padding:20px 16px; 
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); 
  border:2px solid rgba(124,58,237,0.3); 
  border-radius:12px;
  transition:all 0.3s ease;
  text-align:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
.price-item:hover{
  background:linear-gradient(135deg, rgba(124,58,237,0.15), rgba(139,92,246,0.1));
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(124,58,237,0.3);
}
.price-item:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.price-item::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  background:rgba(255,255,255,.2);
  border-radius:50%;
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}
.price-item:active::before{
  width:300px;
  height:300px;
}
.price-qty{
  color:#c4b5fd; 
  font-size:.9rem;
  font-weight:600;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.price-value{
  color:var(--accent); 
  font-weight:700;
  font-size:1.3rem;
  text-shadow:0 2px 4px rgba(0,0,0,0.1);
  margin-bottom:6px;
}
.price-hint{
  color:#a78bfa; 
  font-size:.8rem;
  font-weight:500;
  opacity:0.8;
  margin-top:4px;
}

/* Selected state for price items */
.price-item.selected{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color:var(--accent);
  color:white;
  box-shadow:0 8px 24px rgba(124,58,237,0.4);
}
.price-item.selected .price-qty,
.price-item.selected .price-value,
.price-item.selected .price-hint{
  color:white;
}

@media (max-width: 768px){
  .detail-content{grid-template-columns:1fr; gap:24px}
  .detail-actions{justify-content:center}
  .reviews-gallery{grid-template-columns:repeat(2, 1fr); gap:16px}
  .review-item{height:400px}
  .promotion-banner img{height:auto}
  .banner-placeholder{height:auto}
  .price-grid{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap:12px;
    padding:16px;
  }
  .price-item{
    padding:12px 8px;
  }
  .price-qty{
    font-size:.8rem;
  }
  .price-value{
    font-size:1rem;
  }
  .price-hint{
    font-size:.7rem;
  }
  .icon-btn{
    width:36px;
    height:36px;
    font-size:1rem;
  }
}

/* Desktop tuning: make banner frame smaller while keeping full image */
@media (min-width: 1024px){
  .promotion-banner{max-width: 900px}
}

@media (max-width: 480px){
  .reviews-gallery{grid-template-columns:1fr; gap:12px}
  .review-item{height:350px}
  .price-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    padding:12px;
  }
  .price-item{
    padding:10px 6px;
  }
  .price-qty{
    font-size:.75rem;
    margin-bottom:4px;
  }
  .price-value{
    font-size:.9rem;
  }
  .price-hint{
    font-size:.65rem;
  }
  .icon-btn{
    width:32px;
    height:32px;
    font-size:.9rem;
  }
}

/* --- Footer / Toast --- */
footer{max-width:1200px; margin:60px auto; padding:0 20px; color:var(--muted)}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(30px); background:rgba(17,12,34,.85); border:1px solid rgba(167,139,250,.4); color:var(--text); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.35s ease}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Floating Action Button */
.fab{position:fixed; right:16px; bottom:20px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; color:#fff; text-decoration:none; background:rgba(124,58,237,.22); border:1px solid rgba(167,139,250,.28); box-shadow:0 8px 22px rgba(124,58,237,.25); backdrop-filter: blur(5px); transition:.25s ease; z-index:11}
.fab:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(124,58,237,.32)}
.fab span{font-weight:700; letter-spacing:.3px}
@media (max-width:640px){.fab{padding:9px 12px; right:12px; bottom:16px}}

/* Animated chat-like icon */
.fab-icon{position:relative; display:inline-grid; place-items:center; width:22px; height:22px; color:#e9e3ff}
.fab-icon svg{position:relative; width:100%; height:100%}
.fab-icon .dot{position:absolute; bottom:7px; width:4px; height:4px; background:white; border-radius:50%; opacity:.9; animation: typing 1.2s infinite ease-in-out}
.fab-icon .d1{left:7px; animation-delay:0s}
.fab-icon .d2{left:11px; animation-delay:.15s}
.fab-icon .d3{left:15px; animation-delay:.3s}
@keyframes typing{0%,80%,100%{transform:translateY(0); opacity:.5}40%{transform:translateY(-3px); opacity:1}}

/* subtle pulse for the whole button */
.fab{animation: pulseGlow 5s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 22px rgba(124,58,237,.25)}50%{box-shadow:0 10px 26px rgba(124,58,237,.33)}}

/* Site Footer */
.site-footer{display:block; width:100%; max-width:none; margin:80px 0 0; padding:18px 0; color:var(--muted); background:linear-gradient(180deg, rgba(20,12,44,.75), rgba(10,6,22,.85)); border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -8px 30px rgba(0,0,0,.25) inset}
.footer-bar{max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px}
.footer-brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600}
.footer-brand .logo{width:60px; height:60px; border-radius:8px; background:none; box-shadow:none}
.footer-brand .logo img{width:100%; height:100%; object-fit:contain}
.footer-links{display:flex; gap:16px; justify-content:flex-end}
.footer-links a{color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:8px; transition:.2s ease}
.footer-links a:hover{color:var(--text); background:rgba(255,255,255,.06)}
.footer-copy{justify-self:center; color:#b3a8e6; font-size:.9rem}

@media (max-width: 720px){
  .footer-bar{grid-template-columns:1fr; gap:12px; align-items:flex-start}
  .footer-brand{gap:12px}
  .footer-links{justify-content:flex-start; flex-wrap:wrap; gap:10px 12px}
  .footer-links a{display:inline-block; padding:8px 10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
  .footer-copy{justify-self:flex-start; font-size:.85rem; color:#a9a2d6}
  .site-footer{padding:16px 0}
}

/* --- SIAM SYRUP Hero Sections --- */
.siam-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  margin: 40px 0;
}

.siam-title {
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 600;
  color: #edeaff;
  margin: 10px 0 10px;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.siam-intro {
  color: #b3a8e6;
  font-size: 16px;
  margin-bottom: 16px;
  line-height: 1.6;
}

.siam-categories, .siam-instructions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.siam-categories li, .siam-instructions li {
  position: relative;
  padding: 12px 0 12px 24px;
  color: #edeaff;
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(167, 139, 250, 0.2);
}

.siam-categories li:last-child, .siam-instructions li:last-child {
  border-bottom: none;
}

.siam-categories li::before, .siam-instructions li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #a78bfa;
  font-size: 20px;
  font-weight: bold;
}

.siam-showcase {
  position: relative;
  width: 436px;
  height: 436px;
  border-radius: 18px;
  background: radial-gradient(120% 120% at 80% 20%, rgba(124, 58, 237, 0.35), rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
}

.siam-showcase img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

@media (max-width: 640px) {
  .siam-showcase img {
    height: auto;
  }
}

.siam-showcase:hover img {
  transform: scale(1.05);
}

.siam-placeholder {
  display: none;
  width: 100%;
  height: 100%;
  background: radial-gradient(120% 120% at 80% 20%, rgba(124, 58, 237, 0.35), rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.02) 100%);
  border: 2px dashed rgba(167, 139, 250, 0.4);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #a78bfa;
}

.siam-placeholder .placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.siam-placeholder .placeholder-content svg {
  color: #a78bfa;
  opacity: 0.7;
}

.siam-placeholder .placeholder-content p {
  font-size: 18px;
  font-weight: 600;
  color: #edeaff;
  margin: 0;
}

.siam-placeholder .placeholder-content small {
  font-size: 14px;
  color: #b3a8e6;
  margin: 0;
}


/* Mobile Responsive for SIAM SYRUP */
@media (max-width: 900px) {
  .siam-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .siam-showcase {
    width: 100%;
    max-width: 436px;
    height: 320px;
  }
}

@media (max-width: 640px) {
  .siam-hero {
    margin: 28px 0;
  }
  
  .siam-title {
    font-size: clamp(24px, 2vw, 32px);
  }
  
  .siam-showcase {
    width: 100%;
    max-width: 436px;
    height: auto;
  }
  
  .siam-placeholder .placeholder-content p {
    font-size: 16px;
  }
  
  .siam-placeholder .placeholder-content small {
    font-size: 12px;
  }
}

/* Mixing Tips Section */
.mixing-section{margin:60px 0}
.mixing-content{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center}
.mixing-text .section-title{margin:0 0 10px}
.mixing-intro{color:#b3a8e6; margin:0 0 14px}
.mixing-list{list-style:none; margin:0; padding:0}
.mixing-list li{position:relative; padding-left:22px; margin:8px 0; color:#edeaff}
.mixing-list li::before{content:'•'; position:absolute; left:0; top:0; color:#a78bfa; font-size:18px}
.mixing-visual{position:relative; width:436px; height:436px; border-radius:18px; border:1px solid rgba(167,139,250,.3); background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(255,255,255,.04)); overflow:hidden; box-shadow:var(--shadow)}
.mixing-visual img{width:100%; height:100%; object-fit:cover; display:block}
.mixing-placeholder{display:none; width:100%; height:100%; align-items:center; justify-content:center; color:#a78bfa}
.mixing-placeholder .placeholder-content{display:grid; place-items:center; gap:10px}
.mixing-placeholder .placeholder-content p{color:#edeaff; margin:0}
.mixing-placeholder .placeholder-content small{color:#b3a8e6}

@media (max-width: 900px){
  .mixing-content{grid-template-columns:1fr; gap:24px}
  .mixing-visual{width:100%; max-width:436px; height:320px}
  .mixing-visual img{width:100%; height:100%; object-fit:cover}
}
@media (max-width: 640px){
  .mixing-visual{width:100%; max-width:436px; height:auto}
  .mixing-visual img{width:100%; height:auto; object-fit:contain}
}

/* Popular Products */
.popular-section{margin:60px 0}
.popular-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.popular-card{display:flex; flex-direction:column; text-decoration:none; background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:.25s ease}
.popular-card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.3)}
.popular-media{aspect-ratio: 4/3; background:linear-gradient(135deg,#20124a,#351271); border-bottom:1px solid rgba(255,255,255,.06); display:block}
.popular-media img{width:100%; height:100%; object-fit:cover; display:block}
.popular-media-mock{display:grid; place-items:center; width:100%; height:100%; color:#c4b5fd; font-weight:700; letter-spacing:.3px}
.popular-body{padding:14px}
.popular-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.popular-badge{display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.35); font-size:.8rem; font-weight:600}
.popular-price{color:#edeaff; font-weight:700}
.popular-title{color:#edeaff; font-weight:700; margin:2px 0}
.popular-sub{color:#b3a8e6; font-size:.9rem; margin:0 0 8px}
.popular-desc{color:#c4b5fd; font-size:.8rem; line-height:1.4; margin:0 0 16px; opacity:.9}
.popular-actions{display:flex; gap:10px}
.btn.sm{padding:8px 10px; border-radius:10px; font-size:.9rem}

@media (max-width: 900px){
  .popular-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .popular-grid{grid-template-columns:repeat(2,1fr)}
  .popular-actions{flex-direction:column; gap:8px; align-items:stretch}
  .popular-actions .btn.sm{padding:12px 16px; font-size:.85rem; text-align:center; line-height:1.2; min-height:44px; display:flex; align-items:center; justify-content:center; width:100%; border-radius:12px}
  .popular-actions .btn.primary.sm{order:1; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; font-weight:600; color:white !important}
  .popular-actions .btn.ghost.sm{order:2; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; color:white !important; font-weight:600}
}
@media (max-width: 420px){
  .popular-grid{grid-template-columns:1fr 1fr}
  .popular-actions{flex-direction:column; gap:6px; align-items:stretch}
  .popular-actions .btn.sm{padding:10px 14px; font-size:.8rem; text-align:center; line-height:1.2; min-height:40px; display:flex; align-items:center; justify-content:center; width:100%; border-radius:10px}
  .popular-actions .btn.primary.sm{order:1; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; font-weight:600; color:white !important}
  .popular-actions .btn.ghost.sm{order:2; background:linear-gradient(135deg, #8b5cf6, #7c3aed) !important; border:none !important; color:white !important; font-weight:600}
}
/* --- FAQ Section --- */
.faq-section {
  margin: 60px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.faq-title {
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 600;
  color: #edeaff;
  text-align: center;
  margin-bottom: 40px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.faq-container {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: all 0.25s ease;
  cursor: pointer;
}

.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
  border-color: rgba(167, 139, 250, 0.4);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(167, 139, 250, 0.05));
  border-bottom: 1px solid rgba(167, 139, 250, 0.2);
  transition: all 0.25s ease;
}

.faq-question:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(167, 139, 250, 0.08));
}

.faq-question h3 {
  font-size: 16px;
  font-weight: 600;
  color: #edeaff;
  margin: 0;
  line-height: 1.4;
}

.faq-icon {
  font-size: 24px;
  font-weight: 300;
  color: #a78bfa;
  transition: all 0.3s ease;
  user-select: none;
  min-width: 24px;
  text-align: center;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: #7c3aed;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.02);
}

.faq-item.active .faq-answer {
  max-height: 1000px !important;
  padding: 0 24px 20px 24px !important;
  opacity: 1 !important;
}

.faq-answer p {
  color: #b3a8e6;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px 0;
}

.faq-answer ul {
  margin: 12px 0;
  padding-left: 24px;
}

.faq-answer li {
  color: #b3a8e6;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
}

.faq-answer strong {
  color: #a78bfa;
  font-weight: 600;
}

.faq-answer em {
  color: #8b5cf6;
  font-style: italic;
}

/* Mobile Responsive for FAQ */
@media (max-width: 768px) {
  .faq-section {
    margin: 60px 0;
    padding: 0 16px;
  }
  
  .faq-title {
    font-size: clamp(24px, 2vw, 32px);
    margin-bottom: 32px;
  }
  
  .faq-container {
    gap: 12px;
  }
  
  .faq-question {
    padding: 16px 20px;
  }
  
  .faq-question h3 {
    font-size: 16px;
  }
  
  .faq-icon {
    font-size: 20px;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 20px 16px 20px;
  }
  
  .faq-answer p {
    font-size: 15px;
  }
  
  .faq-answer li {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .faq-question {
    padding: 14px 16px;
  }
  
  .faq-question h3 {
    font-size: 15px;
  }
  
  .faq-icon {
    font-size: 18px;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 16px 14px 16px;
  }
  
  .faq-answer p {
    font-size: 14px;
  }
  
  .faq-answer li {
    font-size: 14px;
  }
}

/* Utility */
.pill{
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:4px 8px; 
  border-radius:999px; 
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  font-size:.8rem;
}
.row{display:flex; align-items:center; gap:12px}
.space{height:14px}