body {
  background-color: #f2f4ff;
}


.shop-controls {
  padding: 1.5rem 2rem;
  padding-top: 150px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  background: #f2f4ff;
  opacity: 0;
  transition: all 1s ease 1.1s;
  transform: translateX(0px) translateY(0px);
}



.shop-controls._active {
  opacity: 100%;
  transform: translate(0px, 0px);

}




.shop-controls select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 0.7rem 2.2rem 0.7rem 1.2rem;
  font-size: 1.1rem;
  border: 1.5px solid #3a1ac7;
   border: 2px solid #E0D9FF;
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(58, 26, 199, 0.1);
  font-family: "firago-mediumitalic";

  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%233A1AC7' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 14px) center;
  background-size: 12px;
}





.shop {
  background-color: #f2f4ff;
  padding-bottom: 7rem;
  padding-top: 0;
  
}


.shop-div {
padding: 2rem;
max-width: 1400px;
}



.category1-div .product-item {
  background-color: #ffffff;
  margin-left: auto;
  margin-right: auto;
}


/* ------------- */


.product-grid-shop {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}



.product-grid-shop .product-item {
   opacity: 0;
  transition: all 1.8s ease 0.3s;
  transform: translateX(0px) translateY(shop-controls);
}



.product-grid-shop .product-item._active {
  opacity: 100%;
  transform: translate(0px, 0px);

}

















.shop-div .product-actions button:first-child {
  background-color: #e3e7f9;
}

.shop-div .product-actions button:first-child:hover {
   background-color: #c9cee7;
}



.shop-products {
  padding: 2rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}





.shop-controls input,
.shop-controls select {
  padding: 0.7rem 1.2rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.2rem;
   border: 2px solid #c9c0f3;
  background-color: #ffffff;
   box-shadow: rgba(100, 100, 111, 0.05) 0px 7px 29px 0px;
  border-radius: 15px;
  font-family: "firago-bookitalic";
  font-feature-settings: "case" on;
  transition: all 0.2s ease;
  height: 40px;
 min-width: 230px;
   outline: none;
  width: 30%;
}


.shop-controls input::placeholder {
  color: #aaa;
  font-size: 1.2rem;
  font-family: "firago-bookitalic";
}

.shop-controls input:focus,
.shop-controls select:focus {
  border-color: #3a1ac7;
  box-shadow: 0 0 0 3px rgba(58, 26, 199, 0.1);
}

.shop-controls {
  padding: 2rem;
  padding-top: 150px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  background: #f2f4ff;
}




.custom-dropdown .dropdown-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #444654; /* dark background */
  color: white;
  border-radius: 14px;
  padding: 0.3rem 0;
  margin-top: 6px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 1000;
}

.custom-dropdown .dropdown-options div {
  padding: 0.7rem 1.2rem;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.2s ease;
  font-family: "firago-mediumitalic";
}

/* Hover effect */
.custom-dropdown .dropdown-options div:hover {
  background: #3a1ac7;
}

/* Selected item checkmark */
.custom-dropdown .dropdown-options .selected-option::before {
  content: '✓';
  font-size: 1rem;
  color: white;
}








@media screen and (max-width: 480px) {



  .shop-controls {
  padding: 0;
  padding-top: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  justify-content: center;
  background: #f2f4ff;
}




.product-grid-shop {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}





.shop-controls input,
.shop-controls select {
  padding: 0.7rem 1.2rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.1rem;
  border: 1px solid #b2a2f6;
  background-color: #ffffff;
   box-shadow: rgba(100, 100, 111, 0.05) 0px 7px 29px 0px;
  border-radius: 15px;
  font-family: "firago-bookitalic";
  font-feature-settings: "case" on;
  transition: all 0.2s ease;
  height: 40px;

   outline: none;
  width: 80%;
}


.shop-controls input::placeholder {
  color: #aaa;
  font-size: 1.1rem;
  font-family: "firago-bookitalic";
}


.shop {
  background-color: #f2f4ff;
  padding-bottom: 80px;
  padding-top: 10px;
  padding-left: 0;
  padding-right: 0;
}


.product-grid-shop .product-item {
  width: 80vw;
  height: 460px;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: #ffffff;
  padding: 1.2rem;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s ease;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 20px;

}



.product-grid-shop .product-item {
   opacity: 0;
  transition: all 1.6s ease 0.8s;
  transform: translateX(0px) translateY(100px);
}



.product-grid-shop .product-item._active {
  opacity: 100%;
  transform: translate(0px, 0px);

}














}