.container {
  max-width: 1440px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}
body {
  font-family: 'Manrope', sans-serif;
}

.header-list{
  display: flex;
  justify-content: center;
  gap: 70px;
  position: absolute;
  padding: 0px;
  margin-right: 500px;
  margin: 0px;
}

.header-container{
  display: flex;
  margin: 0 auto; 
  max-width: 1200px;
  width: 100%;
  height: 53px;
  
  align-items: center;
  justify-content: center;
}
.main-header-section{
  margin-top: 100px;
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;  
  background: linear-gradient(135deg, rgba(245, 245, 245, 0.5) 0%, rgba(245, 245, 245, 0.5) 100%);
  height: 450px;
  align-items: center;
  justify-content: space-between;
}
.main-head-sec-img-nd{
  margin-top: 345px;
  display: flex;
  position: absolute;
}
.main-header-sec-text h3{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 114%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3d3d3d;
}
.main-header-sec-text h1{
  font-family: var(--font-family);
  font-weight: 900;
  font-size: 70px;
  line-height: 100%;
  text-transform: uppercase;
  color: #3d3d3d;
}
.main-header-sec-text{
  margin-left: 50px ;
}
.planet-word-span{
  color: #46a358;
}
.main-header-sec-text p{
  font-family: var(--font-family);
  font-weight: 400;
  margin-top: 5px;
  font-size: 14px;
  line-height: 171%;
  color: #727272;
}
.main-header-sec-text button{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  margin-top: 55px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-transform: uppercase;
  color: #fff;
  border-radius: 6px;
  width: 140px;
  height: 40px;
  border: 1px solid #46a358;
  background: #46a358;
}
.logo{
  position: absolute;
  margin-right: 1050px;
}
.header-container-list{
  position: absolute;
  gap: 30px;
  margin-right: 20px;
  align-items: center;
  display: flex;
  margin-left: 1000px;
}
.header-container-list img{
  width: 24px;
  height: 24px;
}
.btn-link-a{
  width: 24px;
  height: 24px;
}
.logout{
  width: 20px;
  height: 20px;
}
.login-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background-color: #46a358;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.login-btn{
  border-radius: 6px;
  width: 100px;
  height: 35px;
  border: 1px solid #46a358;
  background: #46a358;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}
.header-list-link-a{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  color: #3d3d3d;
}
.header-list-link-a:hover{
  font-weight: bold;
  text-decoration: underline 3px solid #46a358;
  text-underline-offset: 29px;
}
hr{
  justify-content: center;
  display: flex;
  margin: 10px auto;
  max-width: 1200px;
  width: 100%;
}
.header-list-link-a{
  font-weight: 400;
  transition: font-weight 0.2s ease;
}
.categories-list-item p{
  margin-right: 24px;
  transition: font-weight 0.2s ease;
  display: flex;
}
.categories-list-item a{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  transition: font-weight 0.2s ease;
  line-height: 267%;
  color: #3d3d3d;
}
.categories-list-item:hover p,
.categories-list-item:hover a{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 267%;
  color: #46a358;
}

.categories-list-item{
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.categories-container{
  margin-top: 30px;
  margin-left: 88px;
  max-width: 300px;
  width: 100%;;
  height: 774px;
  background: #fbfbfb;
}

.categories-catalog{
  display: flex;
  justify-content: space-around;
}
.catalog-list-st{
  display: flex;
  gap: 28px;
  
  height: 1190px;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0px;
}

.catalog-list-itam-background-img{
  background: #fbfbfb;
  width: 258px;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 300px;
}
.sale-events-container{
  gap: 40px;
  display: flex;
}
.catalog-header{
  margin-top: 30px;
  margin-bottom: 31px;
  max-width: 828px;
  width: 100%;
  height: 23px;
  justify-content: space-between;
  display: flex;
}
.catalog{
  width: 840px;
  margin-right:  74px;
}
.sort-text{
  position: absolute;
  display: flex;
  margin-left: 645px;
}
select {
  border: none;       
  outline: none;      
  padding: 0;         
  margin: 0;          
  background: none;  
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 107%;
  color: #3d3d3d;
}
.sale-events{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 107%;
  transition: font-weight 0.2s ease;
  color: #3d3d3d;
}
.sale-events:hover{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 107%;
  color: #46a358;
  text-decoration: underline 2px solid;
  text-underline-offset: 7px;
}
.categories-container h2{
  margin-left: 18px;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 89%;
  color: #3d3d3d;
}
.price-range-text{
  margin-left: 18px;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 89%;
  color: #3d3d3d;
}

.price-redakt {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 107%;
  color: #3d3d3d;
  margin-top: 16px;
  margin-left: 30px;
}
.price-range button{
  margin-left: 30px;
  border-radius: 6px;
  width: 90px;
  height: 35px;
  background: #46a358;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: #fff;
  border: 0px;
  margin-top: 16px;
}
.st-num,
.nd-num{
 font-family: var(--second-family);
  font-weight: 700;
  color: #46a358;
}
.size-picker-list-item{
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  margin-right: 24px;
 
}
.size-picker-list-item a,
.size-picker-list-item p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  transition: font-weight 0.2s ease;
  line-height: 267%;
  text-align: right;
  color: #3d3d3d;
}
.size-picker h4{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 89%;
  margin-left: 18px;
  color: #3d3d3d;
}
.size-picker-list-item:hover a,
.size-picker-list-item:hover p{
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 267%;
  color: #46a358
}
.main-header-btn:hover{
  transform: translateY(-10px) scale(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.button:hover.shake {
  animation: shake 0.5s ease-in-out infinite;
}
.super-sale{
  margin-top: 19px;
  position: absolute;
  display: flex;
  justify-content: center;
}
.catalog-list-item-p-price{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 89%;
  color: #46a358;
  line-height: 35px;
}
.catalog-list-item-p-st{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #3d3d3d;
}
.catalog-list-itam-background-img:hover{
  text-decoration: underline;
}
.catalog-list-item {
  position: relative;
  height: 350px;
  transition: all 0.3s ease;
}

.catalog-list-item:hover::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #46a358;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-icons.hidden {
  display: none;
  
}
.card-icons {
  margin-top: 10px;
  position: absolute;
  bottom: 60px;
  align-items: center;
  right: 86px;
  transition: font-weight 1s ease;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.catalog-list-item-vector {
    width: 24px;
    height: 24px;
    color: #3d3d3d;
    transition: color 0.3s ease;
    cursor: pointer;
  }

.catalog-list-item-vector:hover {
    fill: green;
}

.svg-icons:hover path{
  fill: #46a358;
  text-align: center;
}
.cart-svg:hover path{
  fill: #46a358;
}
.header-vector:hover path{
  fill: #46a358;
}
.svg-icons path{
  width: 20px;
  height: 20px;
}

.heart{
  margin-top: 4px;
}
.range {
  appearance: none;
  width: 200px;
  height: 8px;
  background: #e6f2ea;
  border-radius: 4px;
  outline: none;
  margin: 20px 0 0 30px;
}

.range::-webkit-slider-runnable-track {
  height: 8px;
  background: #46a358;
  border-radius: 4px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #46a358;
  border: 4px solid #fff;
  border-radius: 50%;
  margin-top: -8px; 
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}
.header-vector{
  margin-top: 2px;
}
.pages-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: 1065px;
  margin-top: 40px;
  margin-bottom: 94px;
}
.pages-list-item-btn{
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  width: 35px;
  height: 35px;
  background-color: white;
  font-family: var(--second-family);
  font-weight: 300;
  font-size: 18px;
  line-height: 89%;
  color: #3d3d3d;
  transition: background-color ease-in 0.2s;
}
.pages-list-item-btn:hover{
  transition-property:background-color;
  background: #46a358;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 89%;
  color: #fff;
}
.pages-list-item-btn:hover path {
  stroke: #fff; /* белый цвет стрелки */
  transition: stroke 0.3s ease;
}
.more-stuf-list {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.more-stuf-list-item {
  display: flex;
  background: #fbfbfb;
  border-radius: 10px;
  padding: 20px;
  width: 550px;
  height: 250px;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.more-stuf-img {
  width: 180px;
  height: auto;
  object-fit: contain;
  margin-right: 20px;
}

.more-stuf-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.more-stuf-title {
  font-family: var(--second-family);
  font-weight: 900;
  font-size: 18px;
  line-height: 133%;
  text-transform: uppercase;
  text-align: left;
  color: #3d3d3d;
  margin: 0 0 10px;
}

.more-stuf-desc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  text-align: left;
  color: #727272;
  margin-bottom: 20px;
}

.more-stuf-btn {
  border-radius: 6px;
  border: none;
  width: 140px;
  height: 40px;
  background: #46a358;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.catalog-list {
  display: flex;
  margin-left: 100px;
  width: 700px;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
}


/* Основной контейнер карточки */
.catalog-list .card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #4CAF50;
  border-radius: 12px;
  background-color: #e8f5e9;
  padding: 1.5rem;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 10px rgba(0, 128, 0, 0.1);
}

/* Удаление лишнего */
.catalog-list .row {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Левая колонка: изображение */
.catalog-list .col-md-4 {
  max-width: 100px;
}

.catalog-list .col-md-4 img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Правая часть */
.catalog-list .col-md-8 {
  flex: 1;
  display: flex;
  width: 100px;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5rem;
}

/* Название товара */
.catalog-list .card-title {
  font-size: 18px;
  font-weight: 600;
  color: #2e7d32;
  max-width: 300px;
  margin: 0;
}

/* Цена слева */
.catalog-list .card-text small {
  font-size: 18px;
  font-weight: 500;
  color: #4CAF50;
}

/* Итоговая цена справа */
.catalog-list .final-price {
  font-size: 20px;
  font-weight: 700;
  color: #1b5e20;
  margin-left: 2rem;
}


.pre-footer-title{
  margin-top: 136px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.pre-footer-list{
  display: flex;
  flex-wrap: wrap;
  gap: 47px;
  justify-content: center;
}
.pre-ft-title{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 30px;
  line-height: 53%;
  text-align: center;
  color: #3d3d3d;
  margin-bottom: 15px;
}

.pre-ft-p{
  font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 171%;
text-align: center;
color: #727272;
}

.pre-footer-list-item-time{
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 114%;
  color: #46a358;
}

.pre-footer-list-item-title{
font-family: var(--second-family);
font-weight: 700;
font-size: 20px;
line-height: 130%;
color: #3d3d3d;
}

.pre-footer-list-item-desc{
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 157%;
color: #727272;
}

.pre-footer-list-item-a{
font-family: var(--second-family);
font-weight: 500;
font-size: 14px;
line-height: 114%;
color: #3d3d3d;
}

.pre-footer-list-item{
  background: #fbfbfb;
}
.footer{
  background: #fbfbfb;
}
.st-floor-class{
  display: flex;
  justify-content: center;
  gap: 100px;
  align-items: center;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 30px;
}
.st-floor-class-item-p-bold{
  font-family: var(--second-family);
font-weight: 700;
font-size: 18px;
line-height: 89%;
color: #3d3d3d;
  line-height: 40px;
}
.st-floor-class-item-p{
  font-family: var(--font-family);
font-weight: 400;
font-size: 13px;
line-height: 169%;
color: #727272;
}
.footer-nd-container{
  display: flex;
  justify-content: center;
  gap: 100px;
  background: rgba(70, 163, 88, 0.1);
  height: 88px;
  margin: 0px auto;
}

.themmememem{
background: #fbfbfb;
}
.footer-cont{
  display: flex;
  margin: 0 auto;
  width: 1213px;
  justify-content: center;
}
.pre-footer {
  margin-bottom: 100px;
  justify-content: center;
  display: flex;
}
.newsletter-form {
  display: flex;
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.email-input {
  flex: 1;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
  border-radius: 12px 0 0 12px;
  background-color: #f9f9f9;
  color: #333;
}

.email-input::placeholder {
  color: #bbb;
}

.join-button {
  background-color: #46a358;
  color: white;
  font-weight: 700;
  font-size: 16px;
  padding: 0 32px;
  border: none;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.join-button:hover {
  background-color: #389a48;
}
.footer-nd-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.cart-container {
  position: relative;
  display: inline-block;
}

.counter-bg {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter {
  position: absolute;
  margin: 0;
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 10px;
  color: #fff;
  z-index: 1;
}
.final-list{
  display: flex;
  max-width: 500px;
  max-width: 100%;
  justify-content: center;
  gap: 20px;
}
.fin-product{
  display: flex;
  position: absolute;
  margin-right: 700px;
}
.catalog-list{
  display: flex;
  flex-direction: column;
}
.btn-outline-secondary{
  border-radius: 29px;
  border: 0px;
  align-items: center;
  width: 21px;
  height: 25px;
  background: linear-gradient(180deg, #46a358 0%, rgba(70, 163, 88, 0.8) 100%);
  color: white;
}
.form-control{
  border: 0px;
  background-color: white;;
  width: 35px;
}
.card-body {
  position: relative;
}

.garbage-wrapper {
  position: absolute;
  top: 60%;
  left: 500px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: stroke 0.3s ease;
}

.garbage path {
  transition: stroke 0.3s ease;
}

.garbage-wrapper:hover path {
  stroke: red;
}
.final-prc-cart-cont{
  display: flex;
  margin-left: 100px;
  flex-direction: column;
}
.spc-between{
  display: flex;
  justify-content: space-between;
}
.final-prc-cart-cont button{
  border-radius: 3px;
  width: 332px;
  margin-bottom: 20px;
  height: 40px;
  background: #46a358;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 107%;
  color: #fff;
  border: 0px;
}
.final-prc-cart-cont a{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 107%;
  color: #46a358;
}
.final-prc-cart-cont{
  width: 400px;
  margin-right: 78px;
  text-align: center;
  align-items: center;
  height: 120px;
  line-height: 40px;
  border: 1px solid #46a358;;
  border-radius: 6px;
}
.more-stuf-list{
  margin-top: 50px;
}
html {
  scroll-behavior: smooth;
}
.vector-input{
  width: 100px;
  margin-top: 5px;
  margin-left: 650px;
  border-radius: 6px;
  border: 1px solid green;
}
.plant-info-cont{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.plant-info-img img{
  width: 404px;
  height: 404px;
}
.plant-info-img{
  border-radius: 6px;
  width: 444px;
  margin-left: 40px;
  height: 444px;
  background: #fbfbfb;
}
.plant-info-list h5{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  color: #727272;
}
.plant-info-list h4{
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 15px;
  line-height: 107%;
  color: #3d3d3d;
}
.plant-info-price{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 22px;
  line-height: 73%;
  color: #46a358;
}
.plant-info-nd-cont{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.star5{
  display: flex;
  position: absolute;
  margin-left: 350px;
}
.star2{
  display: flex;
  position: absolute;
  margin-left: 330px;
}
.star3{
  display: flex;
  position: absolute;
  margin-left: 310px;
}
.star4{
  display: flex;
  position: absolute;
  margin-left: 290px;
}
.star1{
  display: flex;
  position: absolute;
  margin-left: 270px;
}
.plant-info-list h1{
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 28px;
  line-height: 57%;
  margin-top: 100px;
  color: #3d3d3d;
  margin-bottom: 25px;
}
.plant-info-list h6{
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 15px;
  line-height: 107%;
  color: #3d3d3d;
}
.size-btn{
  font-family: var(--second-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 114%;
  text-align: center;
  color: #727272;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  stroke-width: 1px;
  stroke: #eaeaea;
  border: 2px solid #727272;
  background-color: white;
}
.footer-btn{
  border: 1px solid #46a358;
  border-radius: 6px;
  width: 130px;
  height: 40px;
  font-family: var(--second-family);
  font-weight: 700;
  font-size: 14px;
  line-height: 143%;
  text-transform: uppercase;
  color: #46a358;
  background-color: white;
}
.footer-btn:hover{
  background: #46a358;
  color: white;
}
.footer-heart{
  border: 1px solid #46a358;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  background-color: white;
  align-items: center;
  text-align: center;
}
.btns{
  display: flex;
  gap: 10px;
  align-items: center;
}
.all-btns{
  margin-top: 40px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.some-info{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 30px;
  margin-top: 40px;
  color: #a5a5a5;
}
.bold-p{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 15px;
  line-height: 107%;
  color: #727272;
}
.size-btn:hover{
  color: #46a358;
  border: 2px solid #46a358;;
}
.p-desc-text{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 171%;
  color: #727272;
}
.desc{
  margin-top: 90px;
  margin-left: 80px;
}
.desc-foot-bold{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 17px;
  line-height: 94%;
  color: #3d3d3d;
}
.desc h1{
  margin-bottom: 20px;
}