body { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; }
header { background: #222; color: #fff; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 2rem; font-weight: bold; }
.search-box { flex: 1; margin: 0 2rem; }
.search-box input { width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 4px; border: 1px solid #ccc; }
.container { display: flex; max-width: 1200px; margin: 2rem auto; gap: 2rem; }
.categories { width: 220px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 1rem; }
.categories h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.categories ul { list-style: none; padding: 0; }
.categories li { margin-bottom: 0.7rem; }
.categories a { color: #222; text-decoration: none; transition: color 0.2s; }
.categories a:hover { color: #0078d7; }

.product-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px #0001; padding: 1rem; display: flex; flex-direction: column; align-items: center; }
.product-card img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 1rem; }
.product-card h3 { margin: 0.5rem 0; font-size: 1.1rem; }
.product-card p { color: #555; font-size: 0.95rem; margin: 0.5rem 0; }
.product-card .price { color: #0078d7; font-weight: bold; font-size: 1.1rem; margin-bottom: 0.5rem; }
.product-card button { background: #0078d7; color: #fff; border: none; border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.2s; }
.product-card button:hover { background: #005fa3; }

.products {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

#search_autocomplete.box-search-result { border-radius:8px; box-shadow:0 2px 8px #0002; padding:0.5rem 0; background:#fff; z-index:1000; }

@media (max-width: 900px) {
    .container { flex-direction: column; }
    .categories { width: 100%; margin-bottom: 1.5rem; }
}

@media (min-width: 768px) {
  .products {
    grid-template-columns: repeat(4, 1fr);
  }
}