/* =====================================
   SHOP
===================================== */

.shop{

  padding:120px 0;

}

.featured-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:32px;

  margin-top:48px;

}
.shop-toolbar{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:24px;

  margin-bottom:48px;

  flex-wrap:wrap;

}

#productCount{

  color:var(--text-secondary);

  font-size:14px;

}
.shop-layout{

  display:grid;

  grid-template-columns:280px 1fr;

  gap:48px;

  align-items:start;

}

.shop-sidebar{

  position:sticky;

  top:120px;

  display:flex;

  flex-direction:column;

  gap:24px;

}

.shop-filter{

  display:flex;

  flex-direction:column;

  gap:14px;

  padding:24px;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius-lg);

}

.shop-filter h3{

  font-size:15px;

  font-weight:700;

  letter-spacing:.3px;

}

.filter-btn{

  display:inline-flex;

  align-items:center;

  width:fit-content;

  border:1px solid transparent;

  background:none;

  text-align:right;

  cursor:pointer;

  font:inherit;

  font-size:14px;

  padding:8px 16px;

  border-radius:var(--radius-full);

  color:var(--text-secondary);

  transition:var(--transition-normal);

}

.filter-btn:hover{

  background:rgba(28,69,55,.06);

  color:var(--primary);

}

.filter-btn.active{

  background:var(--primary);

  color:#fff;

  font-weight:600;

}

.shop-content{

  display:flex;

  flex-direction:column;

  gap:32px;

}
/* =====================================
   EMPTY STATE
===================================== */

.shop-empty {

  grid-column: 1 / -1;

  padding: 80px 40px;

  text-align: center;

  border: 2px dashed var(--border);

  border-radius: var(--radius-lg);

  color: var(--text-secondary);

}

.shop-empty p {

  font-size: 18px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 8px;

}