/* TokoGrosir — full-screen marketplace styles */

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:#fafafa; color:#222; line-height:1.4;
}
a { color:inherit; text-decoration:none; }
img { display:block; }

.container { max-width:1440px; margin:0 auto; padding:0 24px; }
.muted { color:#888; }
.small { font-size:12px; }

/* ==== TOPBAR ==== */
.topbar {
  background:linear-gradient(135deg,#e53935 0%,#b71c1c 100%);
  color:#fff; position:sticky; top:0; z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.topbar-inner {
  display:flex; align-items:center; gap:24px;
  padding:14px 24px;
}
.logo {
  font-size:24px; font-weight:800; letter-spacing:-0.5px;
  white-space:nowrap; color:#fff;
}
.logo span { color:#FFD700; }
.search {
  flex:1; display:flex; background:#fff; border-radius:24px;
  padding:6px 8px 6px 16px; max-width:560px;
}
.search input {
  flex:1; border:none; outline:none; font-size:14px; color:#222;
  background:transparent;
}
.search button {
  border:none; background:#FFD700; color:#b71c1c; font-weight:700;
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:14px;
}
.topnav { display:flex; gap:18px; align-items:center; font-size:14px; font-weight:600; }
.cart-link { display:flex; align-items:center; gap:6px; }
.cart-badge {
  background:#FFD700; color:#b71c1c; font-size:11px; font-weight:800;
  padding:2px 7px; border-radius:10px; min-width:18px; text-align:center;
}

/* ==== HERO ==== */
.hero {
  background:linear-gradient(135deg,#FFD700,#FF8F00);
  padding:32px 0; color:#7f3b00;
}
.hero h1 { font-size:28px; margin-bottom:6px; }
.hero p { font-size:14px; }

/* ==== CATEGORIES ==== */
.categories {
  display:flex; gap:12px; padding:20px 24px; overflow-x:auto;
}
.categories::-webkit-scrollbar { display:none; }
.cat-chip {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:14px 18px; min-width:90px;
  background:#fff; border:1px solid #eee; border-radius:14px;
  font-size:12px; cursor:pointer; transition:all 0.15s;
  white-space:nowrap;
}
.cat-chip.active, .cat-chip:hover {
  background:#e53935; color:#fff; border-color:#e53935;
  transform:translateY(-1px);
}
.cat-icon { font-size:28px; }

/* ==== PRODUCTS GRID ==== */
.products-section { padding:20px 0 60px; }
.section-head {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:0 24px 16px;
}
.section-head h2 { font-size:22px; }

.products-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px; padding:0 24px;
}
@media (min-width:600px)  { .products-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px)  { .products-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:1200px) { .products-grid { grid-template-columns:repeat(5,1fr); } }
@media (min-width:1500px) { .products-grid { grid-template-columns:repeat(6,1fr); } }

.product-card {
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  transition:transform 0.15s, box-shadow 0.15s;
  display:flex; flex-direction:column;
}
.product-card:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.product-img {
  width:100%; aspect-ratio:1;
  background:#f5f5f5; position:relative; overflow:hidden;
}
.product-img img {
  width:100%; height:100%; object-fit:cover;
}
.placeholder {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:60px;
}
.discount-tag {
  position:absolute; top:8px; left:8px;
  background:#e53935; color:#fff;
  padding:3px 8px; border-radius:8px;
  font-size:11px; font-weight:800;
}
.discount-tag.big { font-size:14px; padding:6px 12px; position:static; display:inline-block; }
.product-body { padding:10px 12px 12px; flex:1; display:flex; flex-direction:column; gap:6px; }
.product-title {
  font-size:13px; line-height:1.35; height:36px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-price { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price-new { color:#e53935; font-size:17px; font-weight:800; }
.price-old { color:#bbb; text-decoration:line-through; font-size:12px; }
.product-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; font-size:11px;
}
.moq-badge {
  background:#fff3e0; color:#e65100;
  padding:2px 7px; border-radius:10px; font-weight:600;
}

/* ==== PRODUCT DETAIL ==== */
.product-page { padding:24px 0 60px; }
.product-detail {
  display:grid; grid-template-columns:1fr; gap:24px;
  background:#fff; border-radius:14px; padding:24px;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
@media (min-width:900px) {
  .product-detail { grid-template-columns:1fr 1fr; }
}
.pd-gallery { background:#f7f7f7; border-radius:10px; overflow:hidden; }
.pd-gallery #pd-main { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.pd-thumbs {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(70px,1fr));
  gap:6px; padding:8px; background:#fff;
}
.pd-thumb {
  width:100%; aspect-ratio:1; object-fit:cover;
  border:2px solid transparent; border-radius:8px;
  cursor:pointer; transition:border-color 0.15s;
}
.pd-thumb:hover { border-color:#e53935aa; }
.pd-thumb.active { border-color:#e53935; }
.pd-title { font-size:22px; margin-bottom:12px; }
.pd-price-row {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.pd-price { font-size:32px; color:#e53935; font-weight:800; }
.pd-price-old { color:#bbb; text-decoration:line-through; font-size:16px; }
.pd-meta {
  display:flex; gap:18px; padding:10px 0; border-top:1px solid #eee; border-bottom:1px solid #eee;
  margin:14px 0; font-size:13px; color:#555; flex-wrap:wrap;
}
.pd-qty {
  display:flex; align-items:center; gap:10px; margin:14px 0;
}
.pd-qty button {
  width:34px; height:34px; border:1px solid #ddd; background:#fff;
  border-radius:50%; font-size:18px; cursor:pointer;
}
.pd-qty input { width:60px; text-align:center; padding:6px; border:1px solid #ddd; border-radius:6px; }
.btn-primary {
  display:inline-block; background:#e53935; color:#fff; border:none;
  padding:14px 24px; border-radius:10px; font-size:15px; font-weight:700;
  cursor:pointer; transition:all 0.15s;
  text-align:center;
}
.btn-primary:hover { background:#b71c1c; transform:translateY(-1px); }
.btn-primary.big { padding:18px 28px; font-size:17px; }
.pd-supplier { margin-top:14px; font-size:13px; }

.pd-description {
  margin-top:24px; background:#fff; border-radius:14px; padding:24px;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.pd-description h2 { margin-bottom:12px; font-size:18px; }
.pd-desc-body { color:#444; line-height:1.6; font-size:14px; }

.pd-recommend { margin-top:36px; }
.pd-recommend h2 { padding:0 24px 14px; font-size:18px; }

/* ==== CART ==== */
.cart-page { padding:32px 0 60px; }
.cart-page h1 { margin-bottom:20px; font-size:26px; }
.cart-table {
  width:100%; background:#fff; border-radius:14px; overflow:hidden;
  border-collapse:collapse;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.cart-table th { padding:14px 12px; text-align:left; font-size:13px; color:#666;
  background:#fafafa; border-bottom:1px solid #eee; }
.cart-table td { padding:14px 12px; border-bottom:1px solid #f5f5f5; vertical-align:middle; }
.cart-table tbody tr:last-child td { border-bottom:none; }
.cart-img { width:60px; height:60px; object-fit:cover; border-radius:8px; background:#f0f0f0; }
.cart-title { color:#222; font-weight:600; font-size:14px; }
.cart-qty {
  display:inline-flex; align-items:center; gap:10px;
}
.cart-qty button {
  width:28px; height:28px; border:1px solid #ddd; background:#fff;
  border-radius:50%; cursor:pointer;
}
.btn-remove {
  background:transparent; border:none; color:#999; cursor:pointer; font-size:18px;
}
.btn-remove:hover { color:#e53935; }
.cart-summary {
  margin-top:24px; background:#fff; border-radius:14px; padding:20px 24px;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
  display:flex; flex-direction:column; gap:14px;
}
.cart-total {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:20px;
}
.cart-total strong { color:#e53935; font-size:26px; font-weight:800; }

.empty { text-align:center; padding:60px 20px; }
.empty-icon { font-size:64px; margin-bottom:14px; }
.empty p { margin-bottom:16px; color:#666; }

/* ==== FOOTER ==== */
.footer {
  background:#222; color:#aaa; padding:40px 0; margin-top:60px;
}
.footer-inner { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer strong { color:#fff; }

/* ==== TOAST ==== */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:#222; color:#fff; padding:12px 20px; border-radius:24px;
  z-index:999; opacity:0; transition:opacity 0.2s;
  font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,0.2);
  pointer-events:none;
}
.toast.show { opacity:1; }

.loading { text-align:center; padding:60px 20px; color:#888; grid-column:1/-1; }

/* ==== MOBILE ==== */
@media (max-width:768px) {
  .container { padding:0 12px; }
  .topbar-inner { padding:10px 12px; gap:10px; flex-wrap:wrap; }
  .logo { font-size:20px; }
  .search { order:3; flex-basis:100%; max-width:none; }
  .topnav a { font-size:13px; }
  .topnav a:not(.cart-link) { display:none; }
  .hero { padding:20px 0; }
  .hero h1 { font-size:20px; }
  .hero p { font-size:12px; }
  .section-head { padding:0 12px 12px; }
  .section-head h2 { font-size:18px; }
  .categories { padding:14px 12px; gap:8px; }
  .cat-chip { padding:10px 12px; min-width:74px; }
  .cat-icon { font-size:22px; }
  .products-grid { padding:0 12px; gap:10px; }
  .product-detail { padding:14px; }
  .pd-title { font-size:18px; }
  .pd-price { font-size:24px; }
  .cart-table th:first-child, .cart-table td:first-child { display:none; }
  .cart-img { width:48px; height:48px; }
}