#head
{
	position: relative;
	margin-bottom:80px;
}

.breadcrumb
{
	margin-bottom:80px;
	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:#000;
		li
		{
			a
			{
				color:#000;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
			&::after
			{
				content:'/';
				padding:0 8px;
			}
			&:last-child
			{
				a
				{
					color:$main-color;
					&:hover
					{
						color:#fff;
					}
				}
				&::after
				{
					display: none;
				}
			}
		}
	}

}



#product-head
{
  margin-bottom:100px;
  #product-photo
  {
    .slider
    {
      overflow: hidden;
      #main-photo
      {
        display: flex;
        
        margin-bottom:20px;
        li
        {
          min-width:100%;
          picture
          {
            padding:20px;
            background-color: #fff;
            display: block;
            img
            {
              display: block;
              width: 100%;;
            }
          }
        }
      }
      #thumbs-photo
      {
        display: flex;
        flex-wrap:wrap;
        li
        {
          picture
          {
            display: block;
            width: 100%;
            padding:10px;
            cursor: pointer;
            background-color: #fff;
            img
            {
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }
  #product-info
  {
    h1
    {
      margin-bottom:24px;
      display: flex;
      justify-content:space-between;
      span
      {
        font-size: 32px;
        font-weight: 400;
        line-height: 48px;
        letter-spacing: 1.6px;
        color:#444;
      }
      button
      {
        border:0px;
        margin:0px;
        padding:0px;
        background-color: rgba(255,255,255,0);
        color:#444;
        font-size:26px;
        cursor: pointer;
      }
    }
    *[data-dh-shopcart=price]
    {
      margin-bottom:24px;
      color:#EA4949;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0.9px;
      font-family: 'Roboto';
      font-weight: 500 !important;
    }
    *[data-dh-shopcart=more]
    {
      border:1px solid #ccc;
      h4
      {
        padding:15px;
        border-bottom:1px solid #ccc;
      }
      .more-list
      {
        padding:15px;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items:center;
        &[inert=inert]
        {
          opacity: .5;
        }
        picture
        {
          width: 80px;
          height: 80px;
          margin-right:15px;
          img
          {
            object-fit: contain;
            object-position: center;
            width: 100%;
            display: block;
          }
        }
        dl
        {
          flex:1;
        }
        >div
        {
          width: 150px;
          display: flex;
          border:1px solid #f1f1f1;
          button
          {
            width: 30px;
            height: 30px;
            border:0;
            padding:0;
            background-color: rgba(0,0,0,0);
            margin:0;
            cursor: pointer;
          }
          >div
          {
            flex:1;
            line-height:30px;
            text-align: center;
            input
            {
              display: none;
            }
          }
        }
      }
    }
    .description
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 0.8px;
      color:#444;
      margin-bottom:24px;
    }
    .product-info
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: 0.8px;
      color:#444;
      margin-bottom:24px;
      dl
      {
        margin-bottom:20px;
        dd
        {
          ul
          {
            list-style: inside;
          }
        }
      }
    }
    [data-dh-shopcart=options]
    {
      padding:24px 0;
      .form-group
      {
        padding:16px 0;
        >label
        {
          margin-bottom:8px;
          display: block;
          font-size: 16px;
          font-weight: 400;
          line-height: 26px; 
          letter-spacing: 0.8px;
          color:#444;
        }
        >.input-radio-group
        {
          display: flex;
          flex-wrap:wrap;
          label
          {
            
            width: calc(50% - 10px);
            &:nth-child(2n)
            {
              margin-left:10px;
            }
            &:nth-child(2n + 1)
            {
              margin-right:10px;
            }
            border:1px solid #444;
            margin-bottom: 12px;
            padding:2px;
            display: flex;
            align-items:center;
            cursor: pointer;
            picture
            {
              width: 50px;
              height:50px;
              padding:2px;
              background-color: #fff;
              img
              {
                width: 46px;
                height:46px;
                object-fit: contain;
                object-position: center;
              }
  
            }
            span
            {
              padding-left: 10px;
            }
            input
            {
              display: none;
            }
            &:has(input:checked)
            {
              border-color:$main-color;
              background-color: $main-color;
              color:#fff;
            }
            &[inert=inert]{
              opacity: .5;
            }
          }
        }
        select
        {
          display: block;
          width:100%;
          border:1px solid #444;
          padding:10px 24px;
          font-size: 16px;
          font-weight: 400;
          line-height: 26px; 
          letter-spacing: 0.8px;
          color:#444;
          &:disabled
          {
            border-color:#ccc;
            color:#ccc;
            background-color: #f1f1f1;
          }
        }
      }
    }
    [data-dh-shopcart=num]
    {
      display: flex;
      border:1px solid #444;
      margin-bottom:24px;
      font-size: 16px;
      font-weight: 400;
      line-height: 26px; /* 162.5% */
      letter-spacing: 0.8px;
      transition-duration:.5s;
      button
      {
        transition-duration:.5s;
        width: 45px;
        height:45px;
        border:0px;
        margin:0px;
        padding:0px;
        background-color: rgba(255,255,255,0);
        font-size:18px;
        cursor: pointer;
        &:disabled
        {
          color:#ccc;
          cursor: no-drop; 
        }
      }
      div
      {
        transition-duration:.5s;
        display: flex;
        justify-content:center;
        align-items:center;
        flex:1;
        color:#444;
        span
        {
          transition-duration:.5s;
        }
        input
        {
          display: none;
        }
      }
      &.disabled,&[inert=inert]
      {

        background-color: #f1f1f1;
        border-color:#ccc;
        button
        {
          color:#ccc;
        }
        div
        {
          span
          {
            color:#ccc;
          }
        }
      }
      
    }
    [data-dh-shopcart=info]
    {
      span
      {
        &.danger
        {
          color:#a00;
        }
        line-height: 45px;
      }
    }
    .shop-cart-button
    {
      display: flex;
      flex-wrap: wrap;
      >div
      {
        width: 100%;
        margin-bottom:10px;
        button
        {
          
          cursor: pointer;
          color:#fff;
          background-color: $main-color;
          border:1px solid $main-color;
          width: 100%;
          height: 45px;
          font-size: 16px;
          font-weight: 400;
          transition-duration:.5s;
          &:hover
          {
            background-color: #fff;
            color:$main-color;
          }
          &:disabled
          {
            opacity: .5;
            cursor: not-allowed;
            &:hover
            {
              color:#fff;
              background-color: $main-color;
              border:1px solid $main-color;
            }
          }
        }
      }
      >a
      {
        border:0px;
        background-color: rgba(255,255,255,0);
        height:45px;
        font-size: 16px;
        font-weight: 400;
        line-height: 45px;
        letter-spacing: 0.8px;
        width:100%;
        color:#fff;
        cursor: pointer;
        background-color: $main-color;
        width: calc(50% - 10px);
        text-align: center;
        &:disabled
        {
          opacity: .5;
          cursor: not-allowed;
        }
        
        &:nth-child(2n + 1)
        {
          margin-left:10px;
        }
        &:nth-child(2n)
        {
          margin-right: 10px;
        }

      }
    }
    .sale-more
    {
      border:1px solid #A3A3A3;
      border-bottom:0;
      margin-bottom:32px;
      h4
      {
        font-size: 14px;
        font-weight: 500;
        line-height: 18px; /* 128.571% */
        letter-spacing: 0.56px;
        padding:16px 24px;
        border-bottom:1px solid #A3A3A3;
      }
      
    }
    *[data-shopcart=more]
    {
      >div
      {
        padding:24px;
        border-bottom:1px solid #A3A3A3;
        display: flex;
        flex-wrap:wrap;
        align-items:center;
        picture
        {
          width: 80px;
          height: 80px;
          cursor: pointer;
          img
          {
            width: 80px;
            height: 80px;
            object-fit: contain;
            object-position: center;
          }
        }
        h5
        {
          flex:1;
          padding-left:24px;
          width:calc(100% - 80px);
        }
        div.more-num
        {
          margin-top:12px;
          display: flex;
          border:1px solid #A3A3A3;
          width: 100%;
          button
          {
            width: 50px;
            height: 50px;
            background-color: rgba(255,255,255,0);
            border:0px;
            cursor: pointer;
          }
          >div
          {
            width: calc(100% - 100px);
            display: flex;
            align-items:center;
            justify-content:center;
          }

        }
      }
    }
  }

  @media(min-width:768px)
  {
    display: flex;
    #product-photo
    {
      width: 47%;
      margin-right:3%;
      .slider
      {
        #thumbs-photo
        {
          li
          {
            width: calc(96% / 5);
            margin:0 0.5% 1% 0.5%;
            &:nth-child(5n)
            {
              margin-right:0px;
            }
            &:nth-child(5n + 1)
            {
              margin-left: 0px;
            }
          }
        }
      }
    }
    #product-info
    {
      width:47%;
      margin-left:3%;
    }
  }
}



#product-body
{
	max-width:1200px;
  padding:0 10px;
	margin:0 auto 200px auto;
	#content
	{
    margin-bottom:10px;
		font-size: 16px;
		font-weight: 700;
		line-height: 26px; /* 162.5% */
		letter-spacing: 0.8px;
		h2,h3,h4,h5
		{
			font-weight: 700;
		}
		img,iframe
		{
			display: block;
			max-width:100%;
			margin:auto;
		}
	}
	#content-photo-list,#data-list
	{
		max-width: 600px;
		margin:0 auto;
		div
		{
//			text-align: center;
      margin-bottom:5px;
			background-color: #fff;
			picture
			{
				display: block;
				img
				{
					display: block;
					width: 100%;
				}
			}
      .content
      {
        padding:20px 0;
        p,ol,ul
        {
          padding:10px 0;
        }
        ul,li
        {
          list-style-position: inside;
        }
        ul
        {
          list-style:disc;
          ul
          {
            list-style: circle;
          }
        }
        ol
        {
          list-style: decimal;
        }
      
      }

      /*
			h3
			{
				padding:20px 0;
				font-size:26px;
				font-weight:600;
				letter-spacing: 4px;
				line-height:36px;
			}
			p
			{
				padding:20px;
				font-size:15px;
				letter-spacing: 4px;
				line-height:24px;
			}
        */
		}
	}
}

#product-body
{
	figure
	{
		display: block;
		img
		{
			display: block;
			margin:0 auto;
			max-width:100%;
		}
	}

	#data-list
	{
		>div
		{
			margin-bottom:20px;
			position: relative;
			>div
			{
				background-color: rgba(0,0,0,0);
				position: absolute;
				top:0px;
				left:0px;
				width:100%;
			}
		}
	}
}

#like-item
{
  padding-bottom:150px;
  padding-top:50px;
  h2
  {
    color:$main-color;
    font-size:24px;
    letter-spacing: 0.9px;
    margin-bottom:20px;
  }
  .article-list
  {
    display: flex;
    flex-wrap:wrap;
    article
    {
      picture
      {
        display: block;
        width: 100%;
        img
        {
          width: 100%;
          display: block;
          object-fit:cover;
          object-position: center;
        }
      }
      h3
      {
        margin-bottom:20px;
        a
        {
          color:#333;
        }
      }
      .price
      {
        color:#EA4949;
      }


      @media(min-width:768px)
      {
        width:calc(94% / 4);
        margin:1%;
        &:nth-child(4n)
        {
          margin-right:0;
        }
        &:nth-child(4n + 1)
        {
          margin-left:0;
        }
      }
      @media(max-width:767px)
      {
        width:calc(50% - 10px);
        margin:10px;
        &:nth-child(2n)
        {
          margin-right:0;
        }
        &:nth-child(2n + 1)
        {
          margin-left:0;
        }
      }
    }
    
  }
}