/*
Theme Name: Supermarket
Theme URI: http://example.com
Author: Necmetdin
Description: Custom shop theme met AJAX product filter
Version: 1.0
*/

/* ---- hier begint je layout CSS ---- */

/* Reset */
body, h1, h2, h3, p, ul { margin:0; padding:0; }
body { font-family: Arial, sans-serif; background:#f9f9f9; color:#333; }

/* Top menu */
.topmenu { background:#222; padding:10px; }
.topmenu ul { list-style:none; display:flex; justify-content:center; }
.topmenu li { margin:0 15px; }
.topmenu a { color:#fff; text-decoration:none; font-weight:bold; }
.topmenu a:hover { color:#ff6600; }

/* Layout */
.container { display:flex; margin:20px; }

/* Sidebar menu horizontaal */
.sidebar ul {
  list-style: none;
  display: block;   /* zet de lijst weer verticaal */
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 10px;   /* ruimte tussen de items */
}

.sidebar a {
  display: block;
  padding: 8px 12px;
  background: #eee;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.sidebar a:hover {
  background: #ff6600;
  color: #fff;
}


/* Product grid */
#product-list {
  flex:1; padding:15px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:15px;
}
.product { background:#fff; border:1px solid #ddd; padding:10px; text-align:center; transition:box-shadow .2s; }
.product:hover { box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.product img { max-width:100%; height:auto; }
.product h3 { font-size:16px; margin:10px 0; }
.product p { font-size:14px; color:#666; }


.brand-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.brand-list li {
  margin-bottom: 8px;
}

.brand-list a {
  display: block;
  padding: 6px 10px;
  background: #eee;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}

.brand-list a:hover {
  background: #ff6600;
  color: #fff;
}