.section.product-details {
 width: 100%;
 height: auto;
 min-height: 100dvh;
 padding-top: 150px;
 display: flex;
 justify-content: center;
 align-items: flex-start;
 background-image: url('/assets/images/shape-5.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
}

.product-details-main-width-container{
 width: 1240px;
 height: auto;
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 flex-direction: column;
 gap: 40px;
 margin-top: 48px;
}

.go-back-button{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 12px;
 font-family: var(--fontFamily-forum);
 font-size: 20px;
 line-height: 24px;
 text-transform: uppercase;
 color: var(--grey-90);
}


.go-back-arrow-icon{
 width: 24px;
 height: 24px;
}

.go-back-button:is(:hover, :focus-visible, :focus-within){
 color: var(--accent-01);
 cursor: pointer;
}
.product-details-images-container{
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 flex-direction: column; 
 gap: 24px;
}

.product-details-main-image{
 width: 600px;
 height: 600px;
 position: relative;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.product-details-additional-images-container{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 24px;
}

.product-details-additional-image{
 width: 182px;
 height: 182px;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

.product-details-badges-container{
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 gap: 12px;
 flex-direction: column; 
 top: 24px;
 left: 24px;
 position: absolute;
}

.product-details-new-badge{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 48px;
 font-size: 24px;
 line-height: 24px;
 font-weight: var(--regular);
 font-family: var(--fontFamily-forum);
 background-color: var(--accent-03);
 color: var(--grey-05);
 text-transform: uppercase;
}

.product-details-discount-badge{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100px;
 height: 48px;
 font-size: 24px;
 line-height: 24px;
 font-weight: var(--regular);
 font-family: var(--fontFamily-forum);
 background-color: var(--accent-red);
 color: var(--white);
 text-transform: uppercase;
 
}


.product-details-main-container{
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 80px;
}

.product-details-info-container{
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 flex-direction: column;
 gap: 24px;
 width: 560px;
}


.path{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 4px;
 font-size: 20px;
 line-height: 24px;
 font-weight: var(--regular);
 text-transform: uppercase;
 color: #999999;
 font-family: var(--fontFamily-forum);
}

.current-page{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 4px;
 color: var(--accent-01);
}

.category-illustration-path{
 height: 24px;
 width: auto;
 filter: var(--filter-accent-01);
}

.product-details-name{
 font-size: 32px;
 line-height: 40px;
 font-weight: var(--regular);
 font-family: var(--fontFamily-forum);
 color: var(--accent-03);
 text-transform: uppercase;
 margin-top: 24px;
}

.product-details-description{
 font-size: 16px;
 line-height: 24px;
 font-weight: var(--regular);
 color: var(--grey-90);
}

.product-more-info-container{
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 20px;
 height: 76px;
 width: 100%;
 margin-top: 16px;
}

.product-quantity {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 8px 30px;
 font-size: 18px;
 line-height: 18px;
 color: var(--grey-90);
 background-color: #1A1A1AF2;
 border: 1px solid var(--accent-01);
}

.product-price-container{
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
 flex-direction: column;
 gap: 16px;
}

.product-price{
 font-size: 32px;
 line-height: 32px;
 color: var(--white);
 font-family: var(--fontFamily-forum);
 font-weight: var(--regular);
}

.original-price{
 font-size: 28px;
 line-height: 28px;
 color: var(--grey-75);
 font-family: var(--fontFamily-forum);
 font-weight: var(--regular);
 text-decoration: line-through;
}

.product-details-lines-separator{
 width: 100%;
 height: 6px;
 border-top: 1px solid var(--grey-20);
 border-bottom: 1px solid var(--grey-20);
 
}


.alregies-container{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 8px;
 margin-top: 16px;
}

.alergies-text{
 font-size: 24px;
 line-height: 24px;
 font-weight: var(--regular);
 font-family: var(--fontFamily-forum);
 color: var(--accent-01);
}

.alegies-numbers-container{
 font-size: 18px;
 line-height: 18px;
 font-weight: var(--regular);
 color: var(--grey-95);
 margin-left: 16px;
}

.alergies-info-icon{
 width: 24px; 
 height: 24px;
}

.product-details-buttons-container{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 40px;
 margin-top: 16px;
 width: 100%;
}

.product-details-counter-container{
 display: flex;
 justify-content: flex-start;
 align-items: center;
 background-color: var(--grey-10);
 width: 168px;
 height: 48px;
 border: solid 1px #565656;
 flex-shrink: 0;
}

.counter-small-container{
 display: flex;
 justify-content: center;
 align-items: center;
 width: 48px;
 height: 100%;
 background-color: var(--grey-20);
 flex-shrink: 0;
}

.counter-small-container.left{
 border-right: solid 1px #565656;

}

.counter-small-container.right{
 border-left: solid 1px #565656;

}

.product-details-quantity-cart{
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 16px;
 line-height: 16px;
 color: var(--grey-90);
}

.counter-sign-icon{
 width: 32px;
 height: 32px;
 filter: var(--filter-white);
}

.counter-sign-icon.add{
 filter: var(--filter-accent-01);

}

.product-details-add-button{
 width: 100%;
 height: 48px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 14px;
 line-height: 14px;
 letter-spacing: 1px;
 text-transform: uppercase;
 background-color: var(--accent-01);
 border: solid 1px var(--grey-20);
 transition: 0.5s;
 gap: 4px;
}

.product-details-add-button:is(:hover, :focus-visible, :focus-within){
color: var(--grey-95);
 background-color: var(--grey-10);
 border: solid 1px var(--accent-01);
 scale: 1.05;
}

.add-button-icon{
 width: 20px;
 height: 20px;
 transition: 0.5s;
 
}
.product-details-add-button:is(:hover, :focus-visible, :focus-within) .add-button-icon{ 
 filter: var(--filter-white);
}


.counter-small-container.right:is(:hover, :focus-visible, :focus-within){
 background-color: var(--accent-01);
}

.counter-small-container.right:is(:hover, :focus-visible, :focus-within) .counter-sign-icon{
 filter: var(--filter-black);
}

.counter-small-container.left:is(:hover, :focus-visible, :focus-within){
 background-color: var(--grey-10);
}



@media (max-width: 1320px) {
 .product-details-main-width-container{
  width: 1000px;

 }

 .product-details-main-image{
  width: 460px;
  height: 460px;
  flex-shrink: 0;

 }

 .product-details-additional-image{
  width: 140px;
  height: 140px;
  flex-shrink: 0;

 }

 .product-details-info-container{
  width: 100%;
 }
}



@media (max-width: 1080px) {
 .container.product-details{
  padding: 0 32px;
 }
 
 .product-details-main-width-container{
  width: 100%;

 }

 .product-details-main-container {
  gap: 32px;
 }

 .product-details-main-image{
  width: 360px;
  height: 360px;
  flex-shrink: 0;

 }

 .product-details-additional-image{
  width: 100px;
  height: 100px;
  flex-shrink: 0;

 }

 .product-details-info-container{
  width: 100%;
 }
 

}

@media (max-width: 920px) {
 .container.product-details{
  padding: 0 24px;
 }

 .product-details-buttons-container {
  gap: 20px;
 }

 .product-details-counter-container {
  width: 114px;
 }

 .counter-small-container {
  width: 36px;
 }
 .add-button-icon {
  display: none;
 }
}

@media (max-width: 780px) {
 .product-details-main-container {
  gap: 48px;
  flex-direction: column;
 }

 .product-details-main-image{
  width: 100%;
  height: auto;
  flex-shrink: 0;

 }

 .product-details-additional-image{
  width: 100px;
  height: 100px;
  flex-shrink: 0;

 }

 .product-details-counter-container {
  width: 168px;
 }

 .counter-small-container {
  width: 48px;
 }
 .add-button-icon {
  display: flex;
 }

}

@media (max-width: 700px) {
 .container.product-details{
  padding: 0 20px;
 }
}





@media (max-width: 500px) {
 .product-details-main-width-container {
  margin-top: 0;
 }
 .container.product-details{
  padding: 0 16px;
 }

 .product-details-additional-image{
  width: 80px;
  height: 80px;
  flex-shrink: 0;

 }

 .product-details-name {
  font-size: 24px;
  line-height: 32px;
 
 }

 .product-details-description {
  font-size: 14px;
  line-height: 22px;

 }
 .original-price{
  font-size: 20px;
  line-height: 20px;
 }
 .product-price {
  font-size: 24px;
  line-height: 24px;

 }

 .product-quantity {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 14px;

 }

 .product-details-buttons-container {
  gap: 20px;
 }

 .product-details-counter-container {
  width: 114px;
 }

 .counter-small-container {
  width: 36px;
 }
 .add-button-icon {
 display: none;
 }
 
}

@media (max-width: 400px) {
 .product-details-add-button {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0;
  gap: 4px;
 }
}

@media (max-width: 360px) {
 .product-details-buttons-container {
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;

 }

 .product-details-counter-container {
  width: 168px;
 }

 .counter-small-container {
  width: 48px;
 }
 .add-button-icon {
  display: flex;
 }
}