#block_accessories {
	display:flex;
	flex-direction: column;
}

/*.accessory-filter {

}

.accessory-filter ul {
	display:flex;
	list-style:none;
	padding:0;margin:0;
	gap:5px;
}

.accessory-filter ul > li {
	background:var(--color-theme-blue);
	color:var(--color-text-white);
	padding:8px 10px;
	font-size:0.9em;
}

.accessory-filter ul > li:hover {
	cursor:pointer;
	background:var(--color-blue);
}*/

.accessory-list {
	display:flex;
	padding:25px 0;
}

.accessory-list ul {
	width:100%;
	display:grid;
	list-style:none;
	padding:0;margin:0;
	gap:10px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.accessory-list ul > li.acc_item {
	display:flex;
	flex-direction: column;
	align-items: center;
	margin-bottom:15px;
	padding:0 10px;
}

.accessory-list ul > li.acc_item > img {
	width:100%;
	max-width:200px;
	max-height: 160px;
	object-fit: cover;
}

.accessory-list ul > li.acc_item > div.acc_desc {
	margin:2px 0;
	font-weight:normal;
	font-size:0.9em;
	text-align:center;
}

.accessory-list ul > li.acc_item > div.acc_pn {
	font-size:1em;
	font-weight:bold;
}

@media only screen and (min-width: 576px) {
	.accessory-list ul {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}


/* Base styles */
.filter-menu { 
	display:block;
	position:relative; 
}
.menu__toggle { 
  position:absolute; 
  width:1px; height:1px; 
  overflow:hidden; clip:rect(0 0 0 0); 
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

.menu__summary {
  cursor:pointer;
  padding:0.75em 1em;
  background:#444; color:#fff;
  display:inline-block;
  width:100%;
}

.filter__list {
	display:block;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	z-index:10;
	list-style:none;
	margin:0;
	padding:0;
	background:var(--color-theme-blue);

	max-height:0;
	overflow:hidden;
	opacity:0;
	transform: translateY(-6px);
	pointer-events:none;

	transition:
    	max-height .25s ease,
    	opacity .2s ease,
    	transform .2s ease;
}

.filter__list li {
	color:var(--color-text-white);
	padding:0.75em 1em;
}

.filter__list li.acc_filter_btn.active {
	background:var(--color-blue);
	color:var(--color-text-white);
}

.filter__list a:hover { background:#ddd; }

/* Mobile default: closed until toggled */
/*.filter__list { display:none; }*/
.menu__toggle:checked + .menu__summary + .filter__list {
	max-height:60vh;               /* big enough to fit your items */
  	opacity:1;
  	transform: translateY(0);
  	pointer-events:auto;
	/*display:block;*/
}

.menu__toggle:checked + .menu__summary i.fas {
  transform: rotate(180deg);
}

/* Desktop: always visible row of "buttons" */
@media (min-width:576px) {
	.menu__summary { display:none; }
	.filter__list,
	.menu__toggle:checked + .menu__summary + .filter__list {
		position:static;
		max-height:none;     /* remove height clamp */
		opacity:1;
		transform:none;
		pointer-events:auto;
		overflow:visible;
		transition:none; 
	}
	.filter__list { 
		position:static;
		display:flex !important; 
		padding:0;margin:0;
		gap:5px;
		background:none;
	}
	.filter__list li {
			background:var(--color-gray);
			color:var(--color-text-black);
			padding:8px 10px;
			font-size:0.9em;
			cursor:pointer;
		}

	.filter__list a:hover { background:#666; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .filter__list { transition: none; }
}