/* ==========================================================================
   1) CSS VARIABLES / THEME
   ========================================================================== */
:root{
  --color-primary:#06C755;
  --color-primary-dark:#05a047;
  --color-primary-light:#e6f9ee;
  --color-bg:#F5F5F5;
  --color-card:#ffffff;
  --color-text:#212121;
  --color-text-secondary:#7a7a7a;
  --color-border:#eeeeee;
  --color-danger:#e53935;
  --color-warning:#f9a825;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-soft:0 4px 16px rgba(0,0,0,0.07);
  --shadow-soft-lg:0 8px 24px rgba(0,0,0,0.10);
  --nav-height:64px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-top:env(safe-area-inset-top, 0px);
}

html[data-theme="dark"]{
  --color-bg:#101314;
  --color-card:#1c2022;
  --color-text:#f2f2f2;
  --color-text-secondary:#a5aaad;
  --color-border:#2c3133;
  --color-primary-light:#0f2a1c;
  --shadow-soft:0 4px 16px rgba(0,0,0,0.45);
  --shadow-soft-lg:0 8px 24px rgba(0,0,0,0.55);
}

/* ==========================================================================
   2) RESET / BASE
   ========================================================================== */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
::-webkit-scrollbar{ display:none; }
*{ scrollbar-width:none; }

#app{
  max-width:560px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  padding-bottom:calc(var(--nav-height) + var(--safe-bottom) + 12px);
  background:var(--color-bg);
}

/* ==========================================================================
   3) HEADER (เหลือแค่ช่องค้นหา + ปุ่มธีม)
   ========================================================================== */
.app-header{
  position:sticky; top:0; z-index:50;
  background:var(--color-card);
  padding:calc(12px + var(--safe-top)) 16px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 14px rgba(0,0,0,0.08);
}
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--color-text-secondary); background:var(--color-card);
  box-shadow:var(--shadow-soft);
  transition:background .2s ease, transform .15s ease;
  flex-shrink:0;
}
.icon-btn:active{ transform:scale(0.9); }

.search-box{
  flex:1; display:flex; align-items:center; gap:6px;
  background:var(--color-bg); border-radius:999px; padding:10px 14px;
}
.search-box .search-icon{ color:#9aa0a6; font-size:20px; }
.search-box input{
  border:none; outline:none; flex:1; font-size:14.5px; color:var(--color-text); background:transparent;
}
.clear-search-btn{ color:#9aa0a6; display:flex; }
.clear-search-btn .material-icons{ font-size:18px; }

/* ==========================================================================
   4) MAIN / PAGES
   ========================================================================== */
#mainContent{ padding:14px 16px 8px; }
.page{ display:none; animation:fadeIn .25s ease; }
.page.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.page-title{ font-size:18px; font-weight:700; margin-bottom:14px; }

/* ---- Banner Slider ---- */
.banner-slider{
  position:relative; width:100%; aspect-ratio:16/7;
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:20px;
  box-shadow:var(--shadow-soft);
}
.banner-track{ display:flex; width:100%; height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.banner-slide{
  min-width:100%; height:100%; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; padding:22px 26px; color:#fff;
}
.banner-slide h2{ font-size:20px; font-weight:800; margin-bottom:6px; text-shadow:0 2px 6px rgba(0,0,0,.2); }
.banner-slide p{ font-size:13px; opacity:.95; text-shadow:0 1px 4px rgba(0,0,0,.2); }
.banner-dots{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.banner-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55); transition:all .25s ease; }
.banner-dot.active{ width:18px; border-radius:4px; background:#fff; }

/* ---- Category Sections (หน้าแรก) ---- */
.category-section{ margin-bottom:22px; }
.category-section-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.category-section-header h3{ font-size:16px; font-weight:700; }
.view-all-btn{
  display:flex; align-items:center; font-size:12.5px; color:var(--color-text-secondary); font-weight:500;
}
.view-all-btn .material-icons{ font-size:16px; }

.product-scroll-row{
  display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px;
  scroll-snap-type:x proximity;
}
.product-scroll-row .product-card{ min-width:150px; max-width:150px; scroll-snap-align:start; }

/* ---- Product Card ---- */
.product-card{
  background:var(--color-card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); overflow:hidden; display:flex; flex-direction:column;
  animation:popIn .3s ease; transition:transform .15s ease;
}
.product-card:active{ transform:scale(0.97); }
@keyframes popIn{ from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} }

.product-img-wrap{ position:relative; width:100%; aspect-ratio:1/1; background:var(--color-border); overflow:hidden; }
.product-img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease; }
.product-img.loaded{ opacity:1; }
.badge-out{
  position:absolute; top:8px; left:8px; background:var(--color-danger); color:#fff;
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:6px;
}
.product-info{ padding:10px 10px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.product-name{
  font-size:13px; font-weight:500; line-height:1.35; height:2.7em; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.product-price{ font-size:15px; font-weight:800; color:var(--color-primary-dark); }
.product-stock{ font-size:11px; color:var(--color-text-secondary); min-height:14px; }
.btn-add-cart{
  margin-top:4px; background:var(--color-primary); color:#fff; border-radius:var(--radius-sm);
  padding:7px 6px; font-size:11.5px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:4px;
  transition:background .2s ease, transform .15s ease;
}
.btn-add-cart .material-icons{ font-size:15px; }
.btn-add-cart:active{ transform:scale(0.95); }
.btn-add-cart:disabled{ background:#c9c9c9; color:#fff; }

/* ---- Skeleton ---- */
.skeleton{ position:relative; overflow:hidden; background:var(--color-border); }
.skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation:shimmer 1.3s infinite;
}
html[data-theme="dark"] .skeleton::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes shimmer{ 100%{ transform:translateX(100%); } }
.skel-img{ width:100%; aspect-ratio:1/1; }
.skel-line{ height:10px; border-radius:6px; margin:8px 10px; }
.skel-line.short{ width:60%; }

/* ---- Category List (แนวตั้ง เรียงลงมาด้านล่าง) ---- */
.category-list{ display:flex; flex-direction:column; gap:10px; }
.category-list-item{
  display:flex; align-items:center; gap:14px;
  background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:12px; transition:transform .15s ease;
}
.category-list-item:active{ transform:scale(0.98); }
.category-list-icon{
  width:56px; height:56px; border-radius:var(--radius-sm); overflow:hidden; background:var(--color-primary-light);
  flex-shrink:0;
}
.category-list-icon img{ width:100%; height:100%; object-fit:cover; }
.category-list-info{ flex:1; min-width:0; }
.category-list-info h4{ font-size:15px; font-weight:600; margin-bottom:4px; }
.category-list-info small{ font-size:12px; color:var(--color-text-secondary); }
.category-list-item .chevron{ color:var(--color-text-secondary); }

.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }

.detail-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.back-btn{
  width:34px; height:34px; border-radius:50%; background:var(--color-card); box-shadow:var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
}
.detail-header h2{ font-size:17px; font-weight:700; }

/* ---- Cart Page ---- */
#page-cart{
  flex-direction:column;
  min-height:calc(100vh - 148px);
}
#page-cart.active{
  display:flex;
}
#cartListWrap{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:10px;
}
.cart-item{
  display:flex; gap:12px; background:var(--color-card); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft); padding:10px; margin-bottom:14px; align-items:center;
  animation:fadeIn .25s ease;
}
.cart-item-img{ width:64px; height:64px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; background:var(--color-border); }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-size:13.5px; font-weight:500; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-item-price{ font-size:14px; font-weight:800; color:var(--color-primary-dark); margin-bottom:6px; }
.qty-control{ display:flex; align-items:center; gap:10px; }
.qty-btn{
  width:26px; height:26px; border-radius:50%; background:var(--color-primary-light); color:var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.qty-btn .material-icons{ font-size:16px; }
.qty-value{ font-size:14px; font-weight:600; min-width:16px; text-align:center; }
.remove-btn{ color:var(--color-text-secondary); align-self:flex-start; }
.remove-btn .material-icons{ font-size:20px; }

#cartEmptyState{ flex:1; justify-content:center; }
.cart-summary{
  position:relative; bottom:auto;
  background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft-lg);
  padding:12px 14px; margin-top:12px;
}
.summary-row{ display:flex; justify-content:space-between; align-items:center; font-size:14.5px; font-weight:600; margin-bottom:8px; }
.summary-row span:last-child{ font-size:19px; font-weight:800; color:var(--color-primary-dark); }

/* ---- Buttons ---- */
.btn-primary{
  width:100%; background:var(--color-primary); color:#fff; border-radius:var(--radius-md);
  padding:13px; font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 12px rgba(6,199,85,0.35); transition:transform .15s ease, background .2s ease;
}
.btn-primary:active{ transform:scale(0.97); background:var(--color-primary-dark); }

.btn-secondary{
  width:100%; background:var(--color-bg); color:var(--color-text); border-radius:var(--radius-md);
  padding:11px; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .15s ease;
}
.btn-secondary:active{ transform:scale(0.97); }

.btn-danger{
  width:100%; background:var(--color-danger); color:#fff; border-radius:var(--radius-md);
  padding:11px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .15s ease;
}
.btn-danger:active{ transform:scale(0.97); }

.btn-add{
  background:var(--color-primary-light); color:var(--color-primary-dark);
  padding:6px 12px; font-size:12.5px; font-weight:700; border-radius:999px;
  display:flex; align-items:center; gap:4px;
}
.btn-add .material-icons{ font-size:16px; }

/* ---- Empty state ---- */
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:var(--color-text-secondary); gap:10px; }
.empty-state .material-icons{ font-size:52px; opacity:.5; }
.empty-state p{ font-size:14px; }

/* ---- Orders (ในหน้าสมาชิก) ---- */
.order-card{
  background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:14px; margin-bottom:12px;
}
.order-card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.order-card-date{ font-size:12px; color:var(--color-text-secondary); }
.order-status{ font-size:11px; font-weight:700; color:var(--color-primary-dark); background:var(--color-primary-light); padding:3px 9px; border-radius:999px; }
.order-items-list{ font-size:12.5px; color:var(--color-text); line-height:1.7; border-top:1px dashed var(--color-border); border-bottom:1px dashed var(--color-border); padding:8px 0; margin-bottom:8px; }
.order-total-row{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; }
.order-total-row span:last-child{ color:var(--color-primary-dark); }

/* ==========================================================================
   5) MEMBER / LOGIN
   ========================================================================== */
.login-card, .profile-card{
  background:var(--color-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);
  padding:20px;
}
.login-card{ text-align:center; }
.login-icon .material-icons{ font-size:64px; color:var(--color-primary); }
.login-hint{ font-size:13px; color:var(--color-text-secondary); margin:10px 0 18px; line-height:1.6; }
.login-note{ font-size:11.5px; color:var(--color-text-secondary); margin-top:12px; }

.form-field{ margin-bottom:12px; text-align:left; }
.form-field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--color-text-secondary); }
.form-field input, .setting-input{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text);
  font-size:14px; outline:none; transition:border-color .2s ease;
}
.form-field input:focus, .setting-input:focus{ border-color:var(--color-primary); }

.profile-card{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.profile-avatar{
  width:56px; height:56px; border-radius:50%; background:var(--color-primary);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; flex-shrink:0;
}
.profile-info{ flex:1; min-width:0; }
.profile-name{ font-size:16px; font-weight:700; }
.profile-role{ font-size:12px; color:var(--color-text-secondary); margin-top:2px; }

.menu-list{ display:flex; flex-direction:column; gap:8px; }
.menu-item{
  display:flex; align-items:center; gap:14px;
  background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:14px; text-align:left; transition:transform .15s ease;
}
.menu-item:active{ transform:scale(0.98); }
.menu-item > .material-icons:first-child{ font-size:24px; color:var(--color-primary); }
.menu-item-body{ flex:1; min-width:0; }
.menu-item-body p{ font-size:14.5px; font-weight:600; }
.menu-item-body small{ font-size:11.5px; color:var(--color-text-secondary); }
.menu-item .chevron{ color:var(--color-text-secondary); }

/* ==========================================================================
   6) ADMIN
   ========================================================================== */
.admin-tabs{
  display:flex; gap:6px; background:var(--color-card); border-radius:var(--radius-md);
  padding:6px; margin-bottom:14px; box-shadow:var(--shadow-soft);
}
.admin-tab{
  flex:1; padding:10px 6px; border-radius:var(--radius-sm);
  font-size:12px; font-weight:600; color:var(--color-text-secondary);
  display:flex; align-items:center; justify-content:center; gap:4px;
  transition:all .2s ease;
}
.admin-tab .material-icons{ font-size:16px; }
.admin-tab.active{ background:var(--color-primary); color:#fff; }

.admin-tab-content{ display:none; animation:fadeIn .25s ease; }
.admin-tab-content.active{ display:block; }

.admin-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.admin-search{
  flex:1; display:flex; align-items:center; gap:6px;
  background:var(--color-card); border-radius:999px; padding:8px 14px; box-shadow:var(--shadow-soft);
}
.admin-search input{ border:none; outline:none; flex:1; font-size:13px; background:transparent; color:var(--color-text); }
.admin-search .material-icons{ font-size:18px; color:#9aa0a6; }
.admin-stats{ font-size:11.5px; color:var(--color-text-secondary); white-space:nowrap; }

.admin-category-select{
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--color-border); background:var(--color-card);
  color:var(--color-text); font-family:inherit; font-size:12.5px; font-weight:500;
  cursor:pointer; outline:none; max-width:180px;
  box-shadow:var(--shadow-soft);
}
.admin-category-select:focus{ border-color:var(--color-primary); }

.admin-product-list{ display:flex; flex-direction:column; gap:8px; }
.admin-product-item{
  display:flex; align-items:center; gap:10px;
  background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:10px; transition:opacity .2s ease;
}
.admin-product-item.hidden-product{ opacity:0.5; }
.admin-product-item img{ width:48px; height:48px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; background:var(--color-border); }
.admin-product-info{ flex:1; min-width:0; }
.admin-product-info h4{ font-size:13px; font-weight:600; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-product-meta{ font-size:11.5px; color:var(--color-text-secondary); display:flex; gap:8px; }
.admin-product-meta .price{ color:var(--color-primary-dark); font-weight:700; }
.admin-product-actions{ display:flex; align-items:center; gap:4px; }
.admin-product-actions button{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--color-text-secondary); background:var(--color-bg);
}
.admin-product-actions button:active{ transform:scale(0.9); }
.admin-product-actions .material-icons{ font-size:18px; }
.admin-product-actions .edit-btn{ color:var(--color-primary); }
.admin-product-actions .toggle-btn.on{ color:var(--color-primary); }
.admin-product-actions .toggle-btn.off{ color:var(--color-danger); }

/* ---- Setting card ---- */
.setting-card{
  background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:14px; margin-bottom:12px;
}
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.setting-title{ font-size:14px; font-weight:600; margin-bottom:2px; }
.setting-card small{ font-size:11.5px; color:var(--color-text-secondary); }

.admin-section-title{ display:flex; align-items:center; justify-content:space-between; margin:16px 0 10px; }
.admin-section-title h3{ font-size:15px; font-weight:700; }

.admin-banner-item{
  background:var(--color-card); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:12px; margin-bottom:8px; display:flex; align-items:center; gap:10px;
}
.admin-banner-preview{
  width:60px; height:38px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700;
}
.admin-banner-info{ flex:1; min-width:0; }
.admin-banner-info h4{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-banner-info small{ font-size:11.5px; color:var(--color-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

/* ---- Toggle Switch ---- */
.switch{ position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{
  position:absolute; inset:0; background:#ccc; border-radius:26px; cursor:pointer;
  transition:background .2s ease;
}
.switch .slider::before{
  content:''; position:absolute; width:20px; height:20px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:transform .2s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.switch input:checked + .slider{ background:var(--color-primary); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

/* ---- Stat grid (admin dashboard) ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }
.stat-item{
  background:var(--color-bg); border-radius:var(--radius-sm); padding:10px;
  display:flex; flex-direction:column; gap:2px;
}
.stat-item small{ font-size:11px; color:var(--color-text-secondary); }
.stat-item strong{ font-size:16px; font-weight:800; color:var(--color-primary-dark); }

/* ---- Banner Preview ในโมดัลแก้ไข ---- */
.banner-preview{
  width:100%; aspect-ratio:16/7; border-radius:var(--radius-md); margin-top:8px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:20px; color:#fff;
}
.banner-preview h4{ font-size:16px; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.2); }
.banner-preview p{ font-size:12px; margin-top:4px; text-shadow:0 1px 4px rgba(0,0,0,.2); }

/* ---- LIFF Guide (คู่มือตั้งค่า) ---- */
.liff-guide{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.guide-step{ display:flex; gap:12px; align-items:flex-start; }
.guide-step .step-num{
  width:26px; height:26px; border-radius:50%;
  background:var(--color-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; flex-shrink:0;
}
.guide-step > div{ flex:1; min-width:0; font-size:13px; line-height:1.6; }
.guide-step strong{ font-size:13.5px; display:block; margin-bottom:3px; }
.guide-step p{ color:var(--color-text-secondary); }
.guide-step ul{ padding-left:18px; margin-top:4px; color:var(--color-text-secondary); }
.guide-step li{ margin:3px 0; }
.guide-step code{
  background:var(--color-bg); padding:1px 6px; border-radius:4px;
  font-family:monospace; font-size:11.5px; color:var(--color-primary-dark);
}

/* Status Badge ในแท็บ LIFF */
.liff-status-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
}
.liff-status-badge .material-icons{ font-size:16px; }
.liff-status-badge.connected{ background:var(--color-primary-light); color:var(--color-primary-dark); }
.liff-status-badge.disconnected{ background:#ffebee; color:var(--color-danger); }
.liff-status-badge.warning{ background:#fff8e1; color:#c07800; }

/* ==========================================================================
   7) BOTTOM NAVIGATION
   ========================================================================== */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-width:560px; margin:0 auto;
  background:var(--color-card); box-shadow:0 -2px 14px rgba(0,0,0,0.08);
  display:flex; height:var(--nav-height); padding-bottom:var(--safe-bottom);
  border-top-left-radius:18px; border-top-right-radius:18px;
  /* บังคับให้อยู่ล่างสุดของ viewport เสมอบนมือถือ */
  transform:translateZ(0);
  will-change:transform;
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--color-text-secondary); font-size:10.5px; font-weight:500; position:relative;
  transition:color .2s ease;
}
.nav-item .material-icons{ font-size:23px; transition:transform .2s ease; }
.nav-item.active{ color:var(--color-primary); }
.nav-item.active .material-icons{ transform:translateY(-2px); }
.nav-cart-badge{
  position:absolute; top:2px; right:26%; background:var(--color-danger); color:#fff;
  font-size:9.5px; font-weight:700; min-width:15px; height:15px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* ==========================================================================
   8) MODAL / TOAST / SPINNER
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-box{
  background:var(--color-card); width:100%; max-width:560px; border-top-left-radius:20px; border-top-right-radius:20px;
  padding:20px; transform:translateY(20px); transition:transform .25s ease;
  max-height:90vh; display:flex; flex-direction:column; overflow-y:auto;
}
.modal-overlay.active .modal-box{ transform:translateY(0); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.modal-header h3{ font-size:16px; font-weight:700; }
.modal-body{ margin-bottom:14px; }
.order-message-text{
  white-space:pre-wrap; font-family:inherit; font-size:13.5px; line-height:1.8;
  background:var(--color-bg); border-radius:var(--radius-sm); padding:12px; margin-bottom:14px; overflow-y:auto;
}

.toast{
  position:fixed; bottom:calc(var(--nav-height) + var(--safe-bottom) + 16px); left:50%;
  transform:translateX(-50%) translateY(20px); background:#212121; color:#fff; font-size:13px;
  padding:10px 18px; border-radius:999px; z-index:200; opacity:0; transition:all .3s ease; pointer-events:none;
  white-space:nowrap; box-shadow:var(--shadow-soft-lg);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.spinner-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.25); z-index:300; display:flex; align-items:center; justify-content:center; }
.spinner{ width:38px; height:38px; border:4px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.error-box{ text-align:center; padding:40px 20px; color:var(--color-text-secondary); }
.error-box .material-icons{ font-size:44px; color:var(--color-danger); margin-bottom:10px; }
.retry-btn{ margin-top:12px; background:var(--color-primary); color:#fff; padding:9px 20px; border-radius:999px; font-size:13px; font-weight:600; }

/* ==========================================================================
   9) RESPONSIVE — รองรับ Tablet และ Desktop
   ==========================================================================
   Breakpoints:
     - < 640px  : มือถือ (default)
     - 640-899  : Tablet (2-3 คอลัมน์, บอตทอมเนวิยังอยู่ล่าง)
     - >= 900   : Desktop (Sidebar ซ้าย, content กว้างขึ้น, สินค้าหลายคอลัมน์)
     - >= 1400  : Wide Desktop
*/

/* ---------- Tablet (640px+) ---------- */
@media (min-width:640px){
  #app{
    max-width:720px;
    box-shadow:0 0 40px rgba(0,0,0,0.08);
  }
  #mainContent{ padding:20px 24px 12px; }
  .app-header{ padding:calc(14px + var(--safe-top)) 24px 14px; }
  .bottom-nav{ max-width:720px; }

  /* สินค้า Grid 3 คอลัมน์ */
  .product-grid{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .product-scroll-row .product-card{ min-width:180px; max-width:180px; }

  /* Banner สูงขึ้นเล็กน้อย */
  .banner-slider{ aspect-ratio:16/6; }
  .banner-slide h2{ font-size:24px; }
  .banner-slide p{ font-size:14px; }
}

/* ---------- Desktop (900px+): Sidebar Layout เต็มจอ ---------- */
@media (min-width:900px){
  body{ background:var(--color-bg); }

  #app{
    max-width:none;                  /* เต็มจอ ไม่จำกัดความกว้าง */
    width:100%;
    padding-left:220px;              /* เว้นที่ให้ Sidebar */
    padding-right:0;
    padding-bottom:20px;
    box-shadow:none;
    background:var(--color-bg);
    min-height:100vh;
  }

  /* Header เต็มความกว้าง content */
  .app-header{
    padding:24px 40px 20px;
    background:transparent;
    box-shadow:none;
    gap:14px;
  }
  .search-box{
    padding:14px 18px;
    background:var(--color-card);
    box-shadow:var(--shadow-soft);
    max-width:600px;
  }
  .search-box input{ font-size:15px; }

  #mainContent{ padding:8px 40px 24px; max-width:1600px; }

  /* Sidebar Nav ด้านซ้าย ยึดขอบซ้ายจริง */
  .bottom-nav{
    position:fixed;
    top:0; bottom:0; left:0;
    width:200px; height:100vh;
    max-width:none; margin:0;
    flex-direction:column;
    justify-content:flex-start;
    padding:32px 12px;
    gap:6px;
    border-radius:0;
    border-right:1px solid var(--color-border);
    box-shadow:none;
    background:var(--color-card);
  }
  /* ป้ายชื่อร้านบนสุดของ sidebar */
  .bottom-nav::before{
    content:'🛒 My Shop';
    display:block;
    font-size:20px; font-weight:800;
    color:var(--color-primary);
    padding:0 12px 24px;
    letter-spacing:0.3px;
  }
  .nav-item{
    flex:0 0 auto;
    flex-direction:row;
    justify-content:flex-start;
    padding:12px 16px;
    border-radius:var(--radius-md);
    gap:14px;
    font-size:14px;
    transition:background .2s ease, color .2s ease;
  }
  .nav-item:hover{ background:var(--color-bg); }
  .nav-item.active{
    background:var(--color-primary-light);
    color:var(--color-primary-dark);
  }
  .nav-item .material-icons{ font-size:22px; }
  .nav-item.active .material-icons{ transform:none; }
  .nav-cart-badge{
    position:static;
    margin-left:auto;
    top:auto; right:auto;
  }

  /* Banner ขนาดใหญ่ขึ้น */
  .banner-slider{ aspect-ratio:20/6; margin-bottom:28px; }
  .banner-slide{ padding:32px 40px; }
  .banner-slide h2{ font-size:28px; margin-bottom:8px; }
  .banner-slide p{ font-size:15px; }

  /* Product Grid 4 คอลัมน์ */
  .product-grid{ grid-template-columns:repeat(4,1fr); gap:20px; }
  .product-scroll-row{ gap:16px; }
  .product-scroll-row .product-card{ min-width:200px; max-width:200px; }

  .product-name{ font-size:14px; }
  .product-price{ font-size:16px; }
  .btn-add-cart{ padding:9px 8px; font-size:12.5px; }

  /* Category List 2 คอลัมน์ */
  .category-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  /* ปิด Hover effect ที่ scale ลง (บนคอมไม่จำเป็น) */
  .product-card:active,
  .category-list-item:active,
  .menu-item:active,
  .icon-btn:active,
  .qty-btn:active{ transform:none; }

  /* Hover effect สำหรับคอม */
  .product-card{ cursor:pointer; }
  .product-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-soft-lg); }
  .category-list-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow-soft-lg); }
  .menu-item:hover{ background:var(--color-bg); }
  .btn-add-cart:hover{ background:var(--color-primary-dark); }
  .btn-primary:hover{ transform:translateY(-1px); }
  .icon-btn:hover{ background:var(--color-bg); }

  /* Cart summary ไม่ต้อง sticky ที่ล่าง */
  .cart-summary{ bottom:20px; }

  /* Modal ตรงกลางจอ */
  .modal-overlay{ align-items:center; }
  .modal-box{
    max-width:520px;
    border-radius:var(--radius-lg);
    max-height:85vh;
  }

  /* Admin: 2 คอลัมน์บน desktop */
  .admin-product-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }

  /* Cart items กว้างขึ้น */
  .cart-item-img{ width:80px; height:80px; }
  .cart-item-name{ font-size:14.5px; white-space:normal; }
  .cart-item-price{ font-size:15px; }
}

/* ---------- Large Desktop (1200px+): เพิ่มคอลัมน์สินค้า ---------- */
@media (min-width:1200px){
  .product-grid{ grid-template-columns:repeat(5,1fr); }
  .admin-product-list{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- Wide Desktop (1600px+): เพิ่มคอลัมน์อีก ---------- */
@media (min-width:1600px){
  .product-grid{ grid-template-columns:repeat(6,1fr); }
  .admin-product-list{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- Ultra-wide (1920px+) ---------- */
@media (min-width:1920px){
  #app{ padding-left:240px; }
  .bottom-nav{ width:220px; }
  .product-grid{ grid-template-columns:repeat(7,1fr); }
}

/* ---------- Hover states เฉพาะ device ที่มี pointer จริง (mouse) ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-add-cart:hover{ background:var(--color-primary-dark); }
  .qty-btn:hover{ opacity:0.85; }
  .remove-btn:hover{ color:var(--color-danger); }
  .admin-tab:not(.active):hover{ background:var(--color-bg); }
}