/* 
*
*	processart.jp
*	page-products.css for page-products.php specific styles. 
*
*/

/* product papge padding left is only longer than the others. */
main { padding-left:6rem; padding-right:6rem; }
main > h2 { text-align:left; padding-bottom:1rem; }
header #main-menu li[data-title='Works'] a { opacity:1.0; }

#filters { padding-bottom: 6rem; }
#filter-type { margin-top:1rem; font-size:var(--large); content:""; }

/* -------------------------------- */
/* thumbnails menu */
/* -------------------------------- */
#thumbnails { width:100%; }
/* #thumbnails ul { width:100%; display:grid; grid-template-columns: repeat(3, 1fr); gap:40px; } */
#thumbnails ul { width:100%; }
#thumbnails li { opacity:1.0; cursor:pointer; padding-bottom:2rem; }
#thumbnails li:hover { opacity:0.5; }
#thumbnails li figure { width:100%; }
#thumbnails li figure img { width:100%; aspect-ratio:333/221; object-fit:cover; object-position:center bottom; }
#thumbnails li figure figcaption { font-size:var(--mini); line-height:1.5em; }

/* -------------------------------- */
/* MUMenu (categories) */
/* -------------------------------- */
[data-mu-menu] li { cursor: pointer; color:gray; }
[data-mu-menu] li:hover, [data-mu-menuitem-focus=true] { color:black; background-color:#ebebeb; }
.submenu { min-width:188px; padding: 10px; background-color:#ebebeb; text-align:center; line-height:2em; z-index:100; }
.submenu li { color:gray; cursor: pointer; width:100%; background-color:#ebebeb; }
.submenu li:hover { color:black; }

@media screen and (max-width:850px)  
{
	main { width:100%; min-width:inherit; padding:0rem 1rem; }
	main h2 { width:100%; }
	/* #thumbnails ul { width:100%; display:grid; grid-template-columns: repeat(2, 1fr); align-items:start; gap:1rem; } */
	#thumbnails li figure img { aspect-ratio:inherit; }
}