@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&family=Kanit:wght@400;600;700;800&display=swap');
  *{box-sizing:border-box;margin:0;padding:0}
  .wrap{font-family:'Sarabun',sans-serif;color:var(--color-text-primary);padding:20px}
  .top-bar{background:#EE4D2D;border-radius:var(--border-radius-lg);padding:14px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .logo{font-family:'Kanit',sans-serif;font-weight:800;font-size:1.1rem;color:#fff;white-space:nowrap}
  .logo span{background:#fff;color:#EE4D2D;border-radius:6px;padding:1px 7px;font-size:0.72rem;font-weight:700;margin-left:6px}
  .search-row{flex:1;min-width:180px;display:flex;gap:0}
  .search-row input{flex:1;padding:8px 12px;border:none;border-radius:8px 0 0 8px;font-family:'Sarabun',sans-serif;font-size:0.88rem;outline:none;background:#fff;color:#222}
  .search-row button{background:#1a0a00;color:#fff;border:none;border-radius:0 8px 8px 0;padding:8px 14px;cursor:pointer;font-size:0.95rem}
  .count-pill{background:rgba(255,255,255,0.2);color:#fff;border-radius:99px;padding:5px 12px;font-size:0.78rem;font-weight:600;white-space:nowrap}
  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .tab{padding:6px 14px;border-radius:99px;border:1.5px solid var(--color-border-tertiary);background:var(--color-background-primary);color:var(--color-text-secondary);font-size:0.8rem;font-weight:600;cursor:pointer;font-family:'Sarabun',sans-serif;transition:all .18s}
  .tab.active,.tab:hover{background:#EE4D2D;border-color:#EE4D2D;color:#fff}
  .info-row{font-size:0.78rem;color:var(--color-text-secondary);margin-bottom:10px;min-height:18px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  .card{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;transition:transform .2s}
  .card:hover{transform:translateY(-3px)}
  .card-img{width:100%;padding-top:90%;position:relative;background:var(--color-background-secondary);overflow:hidden}
  .card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .badge{position:absolute;top:8px;left:8px;font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:5px;font-family:'Kanit',sans-serif}
  .badge-hot{background:#e01e5a;color:#fff}
  .badge-new{background:#1e9e6c;color:#fff}
  .badge-sale{background:#f5a623;color:#1a0a00}
  .card-body{padding:10px 10px 0}
  .cat-label{font-size:0.67rem;font-weight:700;color:#EE4D2D;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
  .prod-name{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .price-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .price{font-family:'Kanit',sans-serif;font-size:1.05rem;font-weight:800;color:#EE4D2D}
  .price-old{font-size:0.72rem;color:var(--color-text-secondary);text-decoration:line-through}
  .card-foot{padding:10px}
  .sold-wrap{display:flex;align-items:center;gap:5px;font-size:0.68rem;color:var(--color-text-secondary);margin-bottom:7px}
  .sold-track{flex:1;height:3px;background:var(--color-background-secondary);border-radius:99px;overflow:hidden}
  .sold-fill{height:100%;background:#EE4D2D;border-radius:99px}
  .btn-buy{display:block;width:100%;padding:8px;background:#EE4D2D;color:#fff;text-align:center;border-radius:7px;font-family:'Kanit',sans-serif;font-weight:700;font-size:0.82rem;text-decoration:none;transition:opacity .2s}
  .btn-buy:hover{opacity:0.88}
  .no-result{text-align:center;padding:40px 16px;color:var(--color-text-secondary)}
  .db-status{font-size:0.7rem;color:var(--color-text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:5px}
  .dot{width:7px;height:7px;border-radius:50%;background:#1e9e6c;display:inline-block;flex-shrink:0}

/* Scroll Buttons */
.scroll-btns {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}
.scroll-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  transition: transform .2s, opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.scroll-btn:hover  { transform: scale(1.1); }
.scroll-btn:active { transform: scale(0.95); }
.btn-top  { background: #EE4D2D; color: #fff;
               opacity: 0; pointer-events: none; }
.btn-top.show { opacity: 1; pointer-events: all; }
.btn-bottom { background: #1a0a00; color: #fff; }

/* <!-- ── Sort Bar Style ── --> */
		  .sort-bar {
		    display: flex;
		    align-items: center;
		    gap: 8px;
		    flex-wrap: wrap;
		    padding: 0 4px;
		    margin-top: 8px;
		  }
		  .sort-label {
		    font-size: 0.8rem;
		    color: #8a5c48;
		    font-weight: 600;
		    white-space: nowrap;
		  }
		  .sort-btn {
		    padding: 5px 13px;
		    border-radius: 999px;
		    border: 1.5px solid #f0d5cb;
		    background: #fff;
		    color: #8a5c48;
		    font-size: 0.78rem;
		    font-weight: 600;
		    cursor: pointer;
		    transition: all 0.18s;
		    font-family: inherit;
		  }
		  .sort-btn:hover,
		  .sort-btn.active {
		    background: #1a0a00;
		    border-color: #1a0a00;
		    color: #fff;
		  }