@import url("../css/global.css");

@import url("../css/variables.css");

.mainpart,
.ProductHeader {
  background-color: var(--background-color);
  padding: 20px;
  font-size: var(--mainfontsize);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 40px;
  justify-content: start;
}

/* Removing Grid for mobile view centering it*/
@media (max-width: 779px) {
  .mainpart {
    grid-template-columns: none;
  }
}

.mainpart a,
.ProductHeader {
  text-decoration: none;
  color: var(--color-primary);
}

.ProductHeader {
  font-family: "Nunito Sans Bold", Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  justify-content: center;
}

.ProductHeader h1 {
  background-color: white;
  border-radius: 20px;
  padding: 20px;
  padding-left: 40px;
  padding-right: 40px;
  max-width: 100%;
}

.jacket1,
.jacket2,
.jacket3,
.jacket4,
.jacket5,
.jacket6,
.jacket7 {
  background: white;
  border-radius: 20px;
  padding: 20px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jacket1:hover,
.jacket2:hover,
.jacket3:hover,
.jacket4:hover,
.jacket5:hover,
.jacket6:hover,
.jacket7:hover {
  border-style: solid;
  border-color: var(--color-secondary);
}

.productimage img {
  width: 100%;
  height: auto;
  object-fit: cover; 
}

.genderclass {
  font-family: "Nunito Sans Light Italic", Verdana, Geneva, Tahoma, sans-serif;
  font-size: var(--mainfontsize);
}

.productname {
  font-family: "Nunito Sans Bold", Verdana, Geneva, Tahoma, sans-serif;
  font-size: var(--mainfontsize);
}
.productprice {
  font-family: "Nunito Sans Medium", Verdana, Geneva, Tahoma, sans-serif;
  font-size: var(--mainfontsize);
}

.productimage {
  display: flex;
  height: auto;
  margin-bottom: 20px;
  display: flex;
}

.colors-product {
  font-family: "Nunito Sans Medium", Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mainfontsize);
  height: 1px;
}

.dotproduct1,
.dotproduct2,
.dotproduct3,
.dotproduct4,
.dotproduct5,
.dotproduct6,
.dotproduct7,
.dotinstock {
  height: 30px;
  width: 30px;
  border-radius: 20px;
  display: inline-block;
  margin-right: 10px;
}

.dotproduct1,
.dotproduct2,
.dotproduct3,
.dotproduct4 {
  height: 30px;
  width: 30px;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
}

/* Jacket 1 */

.dotproduct1 {
  background: #676767;
}

.dotproduct2 {
  background: #12A1BB;
}

.dotproduct3 {
  background: #25363C;
}

.dotproduct4 {
  background: #95B0B7;
}

/* Jacket1 Ending */

.instockdotdiv,
.instockdotdiv2 {
  display: flex;
  align-items: center;
}

.dotinstock {
  background: limegreen;
}

/* Jacket 2 */

.jacket2 .dotproduct1 {
  background: #676767;
}

.jacket2 .dotproduct2 {
  background: #12A1BB;
}

.jacket2 .dotproduct3 {
  background: #FFFF00;
}

.jacket2 .dotproduct4 {
  background: #FF3C00;
}

.jacket2 .dotinstock {
  background: limegreen;
}

/* Jacket 2 End */

/* Jacket 3 */

.jacket3 .dotproduct1 {
  background: #676767;
}

.jacket3 .dotproduct2 {
  background: #12A1BB;
}

.jacket3 .dotproduct3 {
  background: #A8A9A6;
}

.jacket3 .dotproduct4 {
  background: #000000;
}

.jacket3 .dotinstock {
  background: #E49C00;
}

/* Jacket 3 End */

/* Jacket 4 */

.jacket4 .dotproduct1 {
  background: #676767;
}

.jacket4 .dotproduct2 {
  background: #12A1BB;
}

.jacket4 .dotproduct3 {
  background: #57884C;
}

.jacket4 .dotproduct4 {
  background: #E0E0E0;
}

.jacket4 .dotinstock {
  background: limegreen;
}

/* Jacket 4 End */

/* Jacket 5 */

.jacket5 .dotproduct1 {
  background: #676767;
}

.jacket5 .dotproduct2 {
  background: #12A1BB;
}

.jacket5 .dotproduct3 {
  background: #DE3C25;
}

.jacket5 .dotproduct4 {
  background: #9F9289;
}

.jacket5 .dotinstock {
  background: limegreen;
}

/* Jacket 5 End */

/* Jacket 6 */

.jacket6 .dotproduct1 {
  background: #676767;
}

.jacket6 .dotproduct2 {
  background: #12A1BB;
}

.jacket6 .dotproduct3 {
  background: #25363C;
}

.jacket6 .dotproduct4 {
  background: #D50100;
}

.jacket6 .dotinstock {
  background: limegreen;
}

/* Jacket6 End */

/* Jacket 7 */

.jacket7 .dotproduct1 {
  background: #676767;
}

.jacket7 .dotproduct2 {
  background: #12A1BB;
}

.jacket7 .dotproduct3 {
  background: #25363C;
}

.jacket7 .dotproduct4 {
  background: #7B7054;
}

.jacket7 .dotinstock {
  background: limegreen;
}

/* Jacket7 End */

.instock {
  font-family: "Nunito Sans Medium", Verdana, Geneva, Tahoma, sans-serif;
  display: inline-block;
}

.addtocart {
  font-family: "Nunito Sans Medium", Verdana, Geneva, Tahoma, sans-serif;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: none;
  padding: 10px 20px;
  font-size: var(--buttonfontsize);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
}

@media (max-width: 768px) {
  .mainpart {
    background-size: cover;
  }

  .jacket1,
  .jacket2,
  .jacket3,
  .jacket4,
  .jacket5,
  .jacket6,
  .jacket7 {
    gap: 10px;
  }

  .ProductHeader {
    font-size: var(--phonemainfontsize);
  }
}