*{ box-sizing:border-box; }

body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(59,130,246,.10), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(34,197,94,.08), transparent 50%),
    #f5f6fa;
  color:#222;
  margin:0;
  padding:0;
}

/* =====================
   NAVBAR
   ===================== */
.navbar{
  border:1px solid rgba(229,231,235,.9);
  border-radius:16px;
}

.navbar .form-control{
  border-radius:12px;
  font-size:.9rem;
}

.nav-icons a{
  text-decoration:none;
}

/* badge keranjang kecil */
.cart-badge{
  font-size:10px!important;
  padding:2px 5px!important;
  min-width:16px!important;
  height:16px!important;
  line-height:12px!important;
}

/* =====================
   CONTAINER
   ===================== */
.container.py-4{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(229,231,235,.9);
  border-radius:18px;
  box-shadow:0 10px 25px rgba(15,23,42,.08);
}

/* =====================
   SELLER INFO (BIRU)
   ===================== */
.seller-card{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(229,231,235,.9);
  overflow:hidden;
  box-shadow:0 6px 16px rgba(15,23,42,.06);
}

.seller-card-header{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  padding:14px 16px;
}

.seller-card-title{
  font-size:1.1rem;
  font-weight:800;
  margin:0;
}

.seller-card-subtitle{
  font-size:.85rem;
  opacity:.9;
  margin-top:2px;
}

.seller-card-body{
  padding:16px;
}

.seller-row{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background:#f9fafb;
  border:1px solid rgba(229,231,235,.9);
  margin-bottom:10px;
}

.seller-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:#fff;
  border:1px solid rgba(229,231,235,.9);
}

.seller-label{
  font-size:.75rem;
  color:#6b7280;
  font-weight:700;
}

.seller-value{
  font-size:.95rem;
  font-weight:700;
  color:#111827;
  line-height:1.3;
}

.seller-link{
  color:#2563eb;
  text-decoration:none;
}
.seller-link:hover{ text-decoration:underline; }

/* =====================
   GRID PRODUK
   ===================== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:12px;
}

@media (max-width:992px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:576px){
  .product-grid{ grid-template-columns:1fr; }
}

/* =====================
   CARD PRODUK
   ===================== */
.card-product{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
  box-shadow:0 4px 12px rgba(15,23,42,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.15s;
}

.card-product:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(15,23,42,.18);
}

/* FOTO PRODUK – FIX TINGGI (GAK GEDE) */
.card-product img{
  width:100%;
  height:200px;
  object-fit:cover;
  background:#e5e7eb;
}
@media (max-width:576px){
  .card-product img{ height:180px; }
}

.card-product-body{
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.card-product-title{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:4px;
}

.card-product-desc{
  font-size:.8rem;
  color:#6b7280;
  line-height:1.35;
  margin-bottom:8px;
}

.card-product-price{
  font-weight:800;
}

.card-product-stock{
  font-size:.8rem;
  color:#4b5563;
}

.card-product-actions{
  margin-top:auto;
}

.card-product-actions .btn{
  border-radius:12px;
  font-weight:600;
}

/* =====================
   FOOTER
   ===================== */
.app-footer{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid #e5e7eb;
  font-size:.8rem;
  color:#9ca3af;
  text-align:center;
}

/* =====================
   DROPDOWN & ALERT
   ===================== */
.dropdown-menu{
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
  box-shadow:0 12px 28px rgba(15,23,42,.14);
  padding:8px;
}

.dropdown-item{
  border-radius:10px;
  padding:10px 12px;
}

.alert{
  border-radius:14px;
  border:1px solid rgba(229,231,235,.9);
}