/* store hero section */
.hero-section-store {max-height: 500px; margin-top: 2vh; margin-bottom: 150px;}
.hero-background {height: 500px;}
.hero-content {align-items: unset;}
.section-header.section-hero {margin-top: 5vh; text-align: unset;}
.section-paragraph.hero-p {text-align: unset;}
.rating-container {justify-content: unset;}
section {margin-top: 0px; margin-bottom: 0px;}

/* catalog section */
.content {column-gap: 5vw;}

/* sidebar and components */
.sidebar-container {background-color: rgb(34, 34, 34); border-radius: 0px; width: 300px; box-shadow: 0px 5px 3px black;}
.sidebar { padding-top: 30px; padding-bottom: 80px; height: 720px;}
.sidebar-item {color: white; height: unset; font-size: 20px; margin-bottom: 30px;}
.sidebar-search {background-color: rgb(34, 34, 34); height: 60px; margin-bottom: 25px; box-shadow: 0px 5px 3px black; width: 300px;}
.search-input {width: 100%; height: 100%; color: white; border: unset; border-bottom: #ffffff 3px solid; background: url(../images/magnifying-glass.png) no-repeat 15px 15px; background-size: 25px; padding-left:50px; }
.category-label {font-size: 16px;}
.category-input-wrapper {margin-bottom: 4px; margin-top: 4px;}
.price-input-wrapper {display: flex; flex-direction: row; width: 85%; justify-content: space-between; margin-top: 12px;}
.price-input {width: 45%; color: white; text-align: center; font-size: 16px; padding: 4px;}
#filter-info {font-size: 16px;}


/* product catalog */
.right-panel {gap: 1.5vw; margin-bottom: 50px;}
.product-card {background-color: rgb(34, 34, 34); border-radius: 0px; margin-bottom: 10px; box-shadow: black; box-shadow: 0px 5px 3px black;}
.product-card {display: flex; flex-direction: column; min-width: 220px; justify-items: center; align-items: center;}
.image-wrapper {height: 170px; width: 100%; display: flex; justify-content: center;}
.product-image {width: 140px; margin-top: 25px; object-fit: contain;}
.text-wrapper {width: 90%;}
.product-title {font-size: 20px; font-weight: 500;}
.product-short-description {text-align: unset; color: #a4a4a4; font-size: 12px; line-height: 18px; margin: auto; margin-bottom: 18px;}
.button-price-wrapper {display: flex; flex-direction: row; justify-content: space-between; width: 90%; align-items: start; margin-bottom: 20px; margin-top: auto;}
.price {font-size: 24px; text-shadow: 2px 2px 4px black;;}
.cta-button.primary {font-size: 16px; width: unset; height: 40px; padding-left: 5px; padding-right: 5px; z-index: 999;}
.product-card:hover {background-color: rgb(40, 40, 40);cursor: pointer;}


/* checkbox stlyes */
.category-checkbox, .manufacturer-checkbox {-webkit-appearance: none; appearance: none; vertical-align: middle; width: 16px; height: 16px; border-radius: 0px; border-width: 2px; border-color: #ffffff; background-color: #ffffff00; transition: 200ms; cursor: pointer; margin-right: 5px;}
.category-checkbox:focus, .manufacturer-checkbox:focus{background-color: transparent; color: unset; outline: none;}
.category-checkbox:checked, .manufacturer-checkbox:checked{background-color: white;}

/* product main section */
.product-main-info {margin-top: 0px;}
.product-main-wrapper.full {background-color: rgb(34, 34, 34); box-shadow: 0px 5px 3px black; min-height: 600px;}
.product-main-wrapper {width: 100%; display: flex;}
.product-image-wrapper {display: flex; width: 50%; justify-content: center; align-items: center;}
.product-medium-description-wrapper{width: 50%; padding-left: 50px; padding-right: 50px;}
.price-stock-wrapper {display: flex; align-items: baseline; gap: 40px;}
h1 {font-size: 48px; font-weight: 600; margin-bottom: 20px;}
h2 {font-size: 32px; font-weight: 500;}
p {font-size: 22px; font-weight: 100; line-height: 30px;}
.carousel-inner {height: 100%; display: flex ;align-items: center;}
.carousel.slide.detail {width: 500px;}
.cta-button.primary.detail {width: unset; margin-top: 60px;}
.quantity-input { font-size: 20px;  text-align: center;  border-width: 2.5px;  border-color: #ffffff;   border-style: solid; background-color: #ffffff; margin-left: 2vw; height: 40px; margin-top: 60px;}

/* product additional info section */
.product-long-description {width: 50%;}
.description-container {background-color: rgb(34, 34, 34); box-shadow: 0px 5px 3px black; padding-left: 60px; padding-right: 60px; padding-top: 40px; padding-bottom: 40px;}

.product-parameters {width: 50%; padding-left: 50px;}
.parameter-wrapper {display: flex; width: 100%; justify-content: space-between; margin-bottom: 20px;}
.key-value-container {background-color: rgb(34, 34, 34); box-shadow: 0px 5px 3px black; width: 48%; height: 70px; padding-left: 30px; padding-top: 22px;}
.key-value-container:hover {background-color: rgb(40, 40, 40);}
.recomended-product {text-align: center;}


/* cart  */

.cart-table {background-color: rgb(34, 34, 34); box-shadow: 0px 5px 3px black; width: 100%; margin-bottom: 40px; padding-left: 20px; min-height: 10vw;}
thead { height: 50px;}
.h5 {padding-left: 40px; font-size: 22px; color: white} /* first table head for some readon */
td:first-child {padding-left: 40px; width: 52vw; padding-right: 70px;}

.card-body {display: flex; justify-content: space-between; background-color: rgb(34, 34, 34); box-shadow: 0px 5px 3px black; padding-left: 40px; padding-right: 40px;}
.cart-input-wrapper {display: flex; flex-direction: row; align-items: center; gap: 20px; margin-bottom: 20px; }
.shipping-option {height: 60px; align-content: center; padding-left: 20px;  width: 25vw; border: solid 2px white;}
.mobile-visible {display: none;}

/* mediaqueries */
@media (max-width: 500px) {
  .right-panel {grid-template-columns: 1fr}
  .sidebar {display: grid; grid-template-columns: 1fr 1fr; height: unset; padding-bottom: 20px;}
  .sidebar-container {width: unset;}
  .sidebar-item{margin-bottom: 20px;}
  .sidebar-item:nth-child(3){grid-column: 1 / 3;}
  .stars-container {margin-left: 0px;}
  .rating-container {margin: unset;}

}


@media (max-width: 600px) {
  .product-medium-description-wrapper {padding-left: 15px; padding-right: 15px;}
  .description-container {padding-left: 15px;padding-right: 15px;}
  .shipping-option-content { font-size: 18px;}
  .card-body {flex-direction: column; padding-bottom: 60px; padding-top: 40px; padding-left: 20px; padding-right: 20px;}
  .shipping-option {width: 100%;}
  .form-container {margin-bottom: 40px;}
  .mobile-visible {display: block; font-size: 24px;}
  .mobile-invisible {display: none;}
  tr {height: 80px;}
  td:first-child {padding-left: 20px; padding-right: 10px;}
  .h5 {padding-left: 20px;}
}


@media (min-width: 501px) and (max-width: 770px) {.right-panel {grid-template-columns: 1fr 1fr}}
@media (min-width: 771px) and (max-width: 900px) {.right-panel {grid-template-columns: 1fr 1fr 1fr;}}

/* setting mobile version */
@media (max-width: 900px) {
  .content {display: flex;}
  .sidebar-item:last-child {display: none;}
  .product-main-wrapper.full {flex-direction: column-reverse; justify-content: space-between;}
  .product-medium-description-wrapper {width: 100%;}
  .product-image-wrapper {width: 100%; height: 400px;}
  h1 {margin-top: 40px;}
  .cta-button.primary.detail {margin-top: 20px;}
  .quantity-input {margin-top: 20px; width: 30%;}
  .sidebar-search {width: unset;}
}

@media (min-width: 501px) and (max-width: 900px) {
  .sidebar-container {width: unset;}
  .sidebar {display: flex; height: unset; padding-bottom: 20px;}
  .sidebar-item{width: 33%; margin-bottom: unset;}
  .carousel.slide.detail {width: 150px;}
  .shipping-option-content { font-size: 16px;}
}

@media (max-width: 1200px) {
  .carousel.slide.detail {width: 350px;} 
  .cta-button.primary.detail {max-width: unset;} 
  .product-main-wrapper.secondary {flex-direction: column;}
  .product-long-description {width: unset;}
  .product-parameters {padding-left: 0px; width: unset;}
  h1 {font-size: 30px;}
  h2 {font-size: 26px;}
  .product-p {font-size: 16px; line-height: 24px}
}

@media (max-width: 400px){
  .carousel.slide.detail {width: 250px;} 
} 

@media (min-width: 901px) and (max-width: 1200px) {
  .right-panel {grid-template-columns: 1fr 1fr;}  
  h1 {margin-top: 60px;}
  .shipping-option-content { font-size: 18px;}
}
@media (min-width: 1201px) and (max-width: 1500px) {
  .right-panel {grid-template-columns: 1fr 1fr 1fr;} 
  .product-p {font-size: 18px; line-height: 24px;} 
  .carousel.slide.detail {width: 400px;}
  h1 {font-size: 34px;}
  h2 {font-size: 30px;}
}
@media (min-width: 1600px) {.content {width: 85vw;}}