@charset "utf-8";

.vegetables,
.vegetables * {
  box-sizing: border-box;
}
.vegetables {
/*  background: var(--background, #f6f5f5);*/
  /*height: 896px;*/
 /* padding: 30px 0 0 0;*/
  position: relative;
  overflow: hidden;
}

.bg-img {
  width: 100%;
  height: 214px;
}

.item-row-view {
/*  width: 414px;*/
  width: 100%;
/*  height: 160px;*/
/*  height: 140px;*/  
/*  height: 120px;*/  
  height: 110px;  
/*  position: absolute;*/
  position: relative;

  left: 0px;
/*  top: 709px;*/
}
.container {
  width: 100%;
  height: 90%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 5%;
  top: 5%;
}
.media {
  background: linear-gradient(to left, #c8c7c7, #c8c7c7);
  border-radius: 6.22px;
  /*width: 42.75%;*/
/*  width: 35%;*/
  width: 30%;  
/*  height: 80%;*/
  height: 90%;  
  position: absolute;
/*  right: 52.42%;*/
/*  left: 4.83%;*/
  left: 2%;  
  bottom: 5%;
  top: 5%;
  object-fit: cover;
}
.savoy-cabbage {
  color: var(--text-primary, #2d0c57);
  text-align: left;
  font-family: "SfProText-Semibold", sans-serif;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 600;
  position: absolute;
  right: 4.83%;
  left: 52.42%;
  width: 42.75%;
  bottom: 75%;
  top: 10%;
  height: 15%;
}
/*.price {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: flex-end;
  justify-content: flex-start;
  position: absolute;
  left: 218px;
  top: 52px;
  overflow: hidden;
}*/

.title-1{
/*  color: var(--text-primary, #2d0c57);*/
  text-align: left;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: bold;
/*  position: absolute;*/
  padding-left: 3%;	
  padding-top: 3%;
  padding-bottom: 3%;  
}


.price {
	
  /*color: var(--text-secondary, #2d0c57);*/  
  
  text-align: left;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  	
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: flex-end;
  justify-content: flex-start;
  position: absolute;
  left: 35%;
/*  top: 52px;*/
  top: 40px;  
  width: 60%;
  overflow: hidden;
}

.vdate {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: flex-end;
  justify-content: flex-start;
  position: absolute;
  left: 35%;
/*  top: 55%;*/
  top: 70%;
  width: 55%;
  overflow: hidden;
}

._1-45 {
  color: var(--text-primary, #2d0c57);
  text-align: left;
  font-family: "SfProText-Bold", sans-serif;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.kg {
  color: var(--text-secondary, #9586a8);
  text-align: center;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.button-secondary {
  background: var(--primary-button, #0bce83);
  border-radius: 8px;
  padding: 10px 29px 10px 29px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 316px;
  top: 104px;
  overflow: hidden;
}
.icon-shopping-cart {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.frame-27 {
  background: var(--white, #ffffff);
  border-radius: 8px;
  border-style: solid;
  border-color: var(--border, #d9d0e3);
  border-width: 1px;
  padding: 10px 29px 10px 29px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 218px;
  top: 104px;
  overflow: hidden;
}
.icon-heart {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.vegetables2 {
  width: 234px;
  height: 234px;
  position: absolute;
  left: 232px;
  top: -40px;
  overflow: visible;
}
.item-row-view2 {
  width: 414px;
  height: 160px;
  position: absolute;
  left: 0px;
  top: 541px;
}
.media2 {
  background: linear-gradient(to left, #dbd8dd, #dbd8dd);
  border-radius: 6.22px;
  width: 42.75%;
  height: 80%;
  position: absolute;
  right: 52.42%;
  left: 4.83%;
  bottom: 10%;
  top: 10%;
  object-fit: cover;
}
.purple-cauliflower {
  color: var(--text-primary, #2d0c57);
  text-align: left;
  font-family: "SfProText-Semibold", sans-serif;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 600;
  position: absolute;
  right: 4.83%;
  left: 52.42%;
  width: 42.75%;
  bottom: 75%;
  top: 10%;
  height: 15%;
}
._1-85 {
  color: var(--text-primary, #2d0c57);
  text-align: left;
  font-family: "SfProText-Bold", sans-serif;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.icon-shopping-cart2 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.icon-heart2 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.item-row-view3 {
/*  width: 414px;*/
  width: 100%;
  height: 160px;
  position: absolute;
  left: 0px;
  top: 373px;
}
.media3 {
  background: linear-gradient(to left, #dbd8dd, #dbd8dd);
  border-radius: 8px;
  width: 42.75%;
  height: 80%;
  position: absolute;
  right: 52.42%;
  left: 4.83%;
  bottom: 10%;
  top: 10%;
  object-fit: cover;
}
.boston-lettuce {
/*  color: var(--text-primary, #2d0c57);*/
  text-align: left;
  font-family: "SfProText-Semibold", sans-serif;
/*  font-size: 18px;*/
  
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 600;
  position: absolute;
  right: 4.83%;
/*  left: 52.42%;*/
/*  width: 42.75%;*/
  width: 60%;  
  bottom: 75%;
  top: 10%;
  height: 15%;
}
._1-10 {
  color: var(--text-primary, #2d0c57);
  text-align: left;
  font-family: "SfProText-Bold", sans-serif;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.piece {
/*  color: var(--text-secondary, #9586a8);*/
  color: var(--text-secondary, #2d0c57);  
  
  text-align: left;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: flex-end;
/*  justify-content: center;*/
  width:60%;
}
.icon-shopping-cart3 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
.icon-heart3 {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  overflow: visible;
}
/*.title {*/
.date_info {	
/*  color: var(--text-primary, #ffffff);*/
  /*color: #4caf50;*/
  /*color: #2d0c57;*/
  color: #7a777f;
  text-align: left;
  font-family: "SfProDisplay-Bold", sans-serif;
  font-size: 18px;
  line-height: 41px;
  letter-spacing: 0.41px;
  font-weight: 700;
  position: absolute;
  left: 26px;
/*  bottom: 758px;*/
  top: 105px;
/*  display: flex;*/
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 80px;
  width: 80%;
}
.search {
/*  height: 48px;*/
  height: 40px;  
  position: absolute;
  right: 20px;
  left: 20px;
/*  top: 165px;*/
  top: 145px;  
}
.searchfield {
  background: #ffffff;
  border-radius: 27px;
  border-style: solid;
  border-color: var(--border, #d9d0e3);
  border-width: 1px;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
}
.text {
  color: var(--text-secondary, #9586a8);
  text-align: left;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: absolute;
  right: 5.88%;
  left: 16.58%;
  width: 77.54%;
  bottom: 25%;
  top: 25%;
  height: 50%;
}
.icon-search {
  width: 6.42%;
  height: 50%;
  position: absolute;
  right: 87.7%;
  left: 5.88%;
  bottom: 25%;
  top: 25%;
  overflow: visible;
}
.chips-selecetd {
  background: var(--selected-bg-violet, #e2cbff);
  border-radius: 24px;
  padding: 4px 15px 4px 15px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
  position: absolute;
  left: 20px;
  top: 253px;
}
.icon-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.abbage-and-lettuce-14 {
  color: #6c0ee4;
  text-align: left;
  font-family: "SfProText-Medium", sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 500;
  position: relative;
}
.chips-unselecetd {
  background: #ffffff;
  border-radius: 24px;
  padding: 4px 15px 4px 15px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
  position: absolute;
  left: 253px;
  top: 253px;
}
.ucumbers-and-tomatoes-10 {
  color: var(--text-secondary, #9586a8);
  text-align: center;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: relative;
}
.chips-unselecetd2 {
  background: #ffffff;
  border-radius: 24px;
  padding: 4px 15px 4px 15px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
  position: absolute;
  left: 300px;
  top: 307px;
}
.potatoes-and-carrots-4 {
  color: var(--text-secondary, #9586a8);
  text-align: center;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: relative;
}
.chips-unselecetd3 {
  background: #ffffff;
  border-radius: 24px;
  padding: 4px 15px 4px 15px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
  position: absolute;
  left: 20px;
  top: 307px;
}
.oinons-and-garlic-8 {
  color: var(--text-secondary, #9586a8);
  text-align: center;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: relative;
}
.chips-unselecetd4 {
  background: #ffffff;
  border-radius: 24px;
  padding: 4px 15px 4px 15px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  height: 34px;
  position: absolute;
  left: 189px;
  top: 307px;
}
.peppers-7 {
  color: var(--text-secondary, #9586a8);
  text-align: center;
  font-family: "SfProText-Regular", sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 400;
  position: relative;
}
.tab-bar {
  height: 80px;
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: -80px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, -1);
  overflow: hidden;
}
.background {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.tab-selected {
  height: 80px;
  position: absolute;
  right: 276px;
  left: 0px;
  top: 0px;
}
.tab {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: -100%;
  top: 100%;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, -1);
}
.block {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: -100%;
  top: 100%;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, -1);
}
.icon-grid {
  width: 24px;
  height: 24px;
  position: absolute;
  left: calc(50% - 12px);
  top: calc(50% - -12px);
  transform: translate(0px, -24px);
  overflow: visible;
}
.tab2 {
  height: 80px;
  position: absolute;
  right: 138px;
  left: 138px;
  top: 0px;
}
.icon-shopping-cart4 {
  width: 24px;
  height: 24px;
  position: absolute;
  left: calc(50% - 12px);
  top: calc(50% - -12px);
  transform: translate(0px, 0px);
  overflow: visible;
}
.tab3 {
  height: 80px;
  position: absolute;
  right: 0px;
  left: 276px;
  top: 0px;
}
.icon-user {
  width: 24px;
  height: 24px;
  position: absolute;
  left: calc(50% - 12px);
  top: calc(50% - -12px);
  transform: translate(0px, 0px);
  overflow: visible;
}
.divider {
  background: var(--border, #d9d0e3);
  height: 1px;
  position: absolute;
  right: 0px;
  left: 0px;
  top: 80px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, -1);
}
.navigation-bar {
  width: 414px;
  height: 96px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}