#head
{
  z-index:500;
}

header
{
	background-image: url('<?=userimg($article->photo)?>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-bottom:100px;
	h1
	{
		color:#fff;
		font-size: 32px;
		font-weight: 400;
		line-height: 48px; /* 150% */
		letter-spacing: 1.6px;
	}
	ul
	{
		display: flex;
		flex-wrap:wrap;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 26px; /* 162.5% */
		letter-spacing: 0.8px;
		color:#fff;
		li
		{
			a
			{
				
				color:#fff;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
			&::after
			{
				content:'/';
				padding:0 8px;
			}
			&:last-child
			{
				a
				{
					color:$main-color;
					&:hover
					{
						color:#fff;
					}
				}
				&::after
				{
					display: none;
				}
			}
		}
	}
	@media(min-width:1200px)
	{
		padding-top:270px;
		padding-bottom:130px;
	}
	@media(max-width:1199px)
	{
		padding-top:130px;
		padding-bottom:100px;
	}
}

#product-menu
{
	color:#fff;
	background-color: $main-color;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: 0.8px;
  padding:32px 56px;
  margin-bottom:100px;
	label
	{
		border-bottom:1px solid #fff;
    display: block;
		select
		{
      display: block;
			width:100%;
			color:#fff;
			border:0px;
			background-color: $main-color;
			font-size: 16px;
			font-weight: 500;
			line-height: 26px;
			letter-spacing: 0.8px;
		}
	}
	
	@media(min-width:768px)
	{
		display: flex;
		>*
		{
			width: calc(25% - 20px);
			margin:0 10px;
		}
    h2
    {
      svg
      {
        display: none;
      }
      label
      {
        display: none;
      }
    }
	}
  @media(max-width:767px)
  {
    padding:16px 32px;
    >*
    {
      padding:16px 0;
    }
    h2
    {
      display: flex;
      align-items:center;
      position: relative;
      span
      {
        flex:1;
      }
      label
      {
        z-index:1;
        position: absolute;
        border-bottom: 0px;
        top:0px;
        left:0px;
        width: 100%;
        height:100%;
        cursor: pointer;

        input
        {
          opacity: 0;
          border:0px;
          padding:0px;
          margin:0px;
          cursor: pointer;
        }
      }
      svg
      {
        transition-duration:.5s;
        width: 30px;
      }
    }
    >label
    {
      display: none;
    }
    &:has(input[type=checkbox]:checked){
      h2
      {
        svg
        {
          transform:rotate(180deg);
        }
      }
      label
      {
        display: block;
      }
    }
  }
}

#product-list
{
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
  article
  {
    margin-bottom:50px;
    picture
    {
      display: block;
      margin-bottom:16px;
      img
      {
        display: block;
        width: 100%;
      }
    }
    h2
    {
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 26px; /* 162.5% */
      letter-spacing: 0.8px;
      a
      {
        color:#444;
      }
    }
    .price
    {
      font-size: 18px;
      font-style: normal;
      font-weight: 900;
      line-height: 26px; /* 162.5% */
      letter-spacing: 0.8px;
      color:#EA4949;
      span
      {
        &::before
        {
          content:'$';
        }
      }
    }
  }
  @media(min-width:768px)
  {
    article
    {
      width:calc(94% / 4);
    }
  }
  @media(max-width:767px)
  {
    article
    {
      margin:0 10px 24px 10px;
      width: calc(50% - 10px);
      &:nth-child(2n)
      {
        margin-right: 0px;
      }
      &:nth-child(2n + 1)
      {
        margin-left: 0px;
      }
    }
  }
}

.pagination
{
  display: flex;
  justify-content:center;
  li
  {
    margin:10px 5px;
    a
    {
      display: block;
      text-align: center;
      line-height:32px;
      width:32px;
      border:1px solid #666;
      color:#666;
      border-radius: 5px;
      transition-duration:.5s;
      &:hover
      {
        border-color:$main-color;
        background-color: $main-color;
        color:#fff;
      }
    }
    &.active
    {
      a
      {
        border-color:$main-color;
        background-color: $main-color;
        color:#fff;
      }
      
    }
  }
}