.products_list{
  overflow: hidden;
  transition: var(--transition);
  max-height: 100%;
}
.products_list:not(:first-of-type){
  margin-bottom: 32px;
}
.products_list h2{
  margin: 0;
}
.products_list p span{
  line-height: 2em;
  opacity: 0.5
}
.product{
  padding-top: 32px;
}
.products_list .item{
  padding: 32px 0;
  padding-left: 64px;
  display: flex;
  gap:32px;
  flex-wrap: wrap;
  transition: 1s ease all;
}
.products_list .product{
  display: grid;
  grid-template-rows: auto auto 1fr;
  border-bottom: 1px solid currentcolor;
}
.products_list .product.extras .item,
.products_list .product.extras .item:hover{
  padding-left:0;
}
.products_list .product .content{
  display: grid;
  align-items: flex-start;
  align-content: flex-start;
}
.products_list .item:not(:last-of-type){
  border-bottom: 1px solid currentcolor;
}
.products_list .item:hover{
  padding-left: 72px;
}
.products_list .item p{
  flex: 1;
  margin: 0;
}
.products_list .price{
  font-weight: bold;
}

.products_list .innerBlock{
  margin-top: 0;
  position: relative;
  transition: 1s ease all;
}
/* .products_list .expand_btn:has(>input:checked) ~ .innerBlock,
.products_list .expand_top:has(>input:checked) ~ .innerBlock{
  margin-top: -1000%;
} */

.products_list:has(>.expand_btn>input:checked),
.products_list:has(>.expand_top>input:checked){
  max-height: 64px;
}


/*------------------------------------------------------------------------------
button down
------------------------------------------------------------------------------*/
.products_list:has(>.expand_btn){
  padding-bottom: 64px;
  position: relative;
}
.products_list .expand_btn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: var(--bodybkg);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  z-index: 99;
}

.products_list .expand_btn span,
.products_list .expand_btn h2{
  font-size: inherit;
  font-weight: inherit;
  padding: 12px 24px;
  background: var(--primary_500);
  border-radius: 3em;
  display: none;
}

.products_list .expand_btn h2{
  margin:0;
}

.products_list .expand_btn input:not(:checked) ~ span{
  display: inline-block;
}
.products_list .expand_btn input:checked ~ h2{
  display: inline-block;
}
.products_list input{
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 99;
  cursor: pointer;
}

/*------------------------------------------------------------------------------
button down
------------------------------------------------------------------------------*/
.products_list:has(>.expand_top){
  padding-top: 64px;
  position: relative;
}
.products_list .expand_top{
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 64px;
  z-index: 99;
  border-bottom: 1px solid currentcolor;
  display: flex;
  align-items: center;
  align-content: center;
  background-color: var(--bodybkg)
}
.products_list .expand_top h2{
  flex: 1;
}

/*------------------------------------------------------------------------------
Big Image
------------------------------------------------------------------------------*/
.product_big{
  position: relative;
}
.product_big .img{
  display: flex;
  aspect-ratio: 3/5;
}
.product_big img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product_big .content{
  position: absolute;
  bottom: 0;
  left: 0;
  right:0;
  padding: 24px;
  padding-top: 96px;
  background-image: linear-gradient(0deg,rgba(0,0,0,0.8) 25%, transparent 100%);
}

@media (max-width:1024px){
  .products_list .item:hover,
  .products_list .item{
    padding-left: 12px;
  }
}