/* ======================================================
   Micapoeder.nl – Light, modern, premium accents
====================================================== */
:root{
  /* Basis: licht & strak */
  --bg-color-white:#FFFFFF;
  --bg-color-light:#F6F7F9;
  --border-color-light:#ECEEF2;

  --text-color-primary:#121417;
  --text-color-secondary:#3B4048;
  --text-color-light:#6B7280;

  /* Accent: ‘mica’ vibe (subtiel, premium) */
  --custom-accent-color:#2F6F7D;        /* petrol */
  --custom-accent-darker:#245A64;
  --custom-accent-rgb:47,111,125;

  /* Extra: zachte metallic highlight */
  --mica-highlight: rgba(213, 176, 107, .22); /* goud-ish glow, subtiel */

  --radius-lg:16px;
  --radius-sm:10px;
}

/* ======================================================
   Topbar – NIET zwart, wel contrast & clean
====================================================== */
.topbar{
  font-size:.92rem;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(246,247,249,1) 100%);
  color: var(--text-color-secondary);
  border-bottom: 1px solid var(--border-color-light);
}
.topbar a{
  color: var(--text-color-primary);
  font-weight:600;
}
.topbar a:hover{ color: var(--custom-accent-color); }

/* ======================================================
   Navbar grid (logo midden)
====================================================== */
.nav-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: .75rem;
}
.nav-left{ justify-self:start; }
.nav-center{ justify-self:center; }
.nav-right{ justify-self:end; }

.site-logo{
  height:56px;
  width:auto;
  display:block;
}
@media (max-width:991.98px){
  .site-logo{ height:48px; }
}

/* Categorie-knop links */
.btn-cats{
  border:1px solid var(--border-color-light);
  background:#fff;
  border-radius:999px;
  padding:.45rem .8rem;
  font-weight:600;
  color:var(--text-color-secondary);
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.btn-cats:hover{
  color:var(--text-color-primary);
  border-color: rgba(var(--custom-accent-rgb), .35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

/* Collapse onder de grid laten lopen (full width) */
.nav-collapse{
  grid-column: 1 / -1;
}

/* Menu spacing (jouw existing regels blijven werken) */
.main-menu .nav-link{
  margin:0 .9rem;
}

/* Offcanvas categorie-list: netter */
#catsCanvas .list-group .dropdown-item,
#catsCanvas .list-group a{
  display:block;
  padding:.65rem 0;
  color:var(--text-color-secondary);
  border-bottom:1px solid var(--border-color-light);
}
#catsCanvas .list-group a:hover{
  color:var(--custom-accent-color);
}

/* Cart chip: iets premium */
.cart-chip{
  border:1px solid var(--border-color-light);
  background:#fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.cart-badge{
  background: linear-gradient(180deg, var(--custom-accent-color), var(--custom-accent-darker));
}

/* ======================================================
   Slider (homepage)
====================================================== */
.home-slider{
  background: radial-gradient(circle at 20% 10%, var(--mica-highlight), transparent 45%),
              radial-gradient(circle at 80% 30%, rgba(var(--custom-accent-rgb), .14), transparent 48%),
              linear-gradient(180deg, #fff 0%, var(--bg-color-light) 100%);
  border-bottom: 1px solid var(--border-color-light);
}
.home-slider .carousel-inner{
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.home-slider .slide-img{
  width:100%;
  height:520px;
  object-fit:cover;
}
@media (max-width:991.98px){
  .home-slider .slide-img{ height:360px; }
}
@media (max-width:575.98px){
  .home-slider .slide-img{ height:300px; }
}
.home-slider .carousel-caption{
  text-align:left;
  left:7%;
  right:7%;
  bottom:12%;
}
.home-slider .caption-box{
  max-width: 560px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 18px 18px;
}
.home-slider .caption-box h1,
.home-slider .caption-box h2{
  margin:0 0 8px 0;
}