.marketplace {

  a,
  label,
  .filter>h3,
  .main-head>h3,
  .trending-label,
  .tagline>span {
    text-decoration: none;
    font-family    : 'Geist', 'Inter', -apple-system, Segoe UI, sans-serif;
  }

  &.homepage-hero {
    position           : relative;
    margin             : 1.5rem 1.5rem 3.75rem;
    border-radius      : 1.25rem;
    min-height         : min-content;
    overflow           : hidden;
    color              : #ffffff;
    display            : grid;
    place-items        : stretch;
    background-image   : url('https://dev-partners-wordpress-backup.s3.us-west-2.amazonaws.com/wp-content/uploads/2025/08/14140943/marketplace-hero-bg.webp');
    background-size    : cover;
    background-position: center;

    .container {
      display        : flex;
      align-items    : center;
      justify-content: center;

      .inner-container {
        display        : flex;
        flex-direction : column;
        align-items    : center;
        justify-content: center;
        gap            : 1.5rem;
        min-height     : inherit;
        padding-block  : 4.5rem;
        width          : 100%;
        margin-inline  : 0;

        .tagline {
          display        : inline-flex;
          border-radius  : 6.25rem;
          border         : 0.0625rem solid #ffffff26;
          background     : #ffffff1a;
          font-weight    : 500;
          letter-spacing : 0.2px;
          backdrop-filter: blur(1px);
          padding        : 0.5rem 0.875rem;
          font-size      : 0.875rem;
        }

        .homepage-hero-title {
          font-family: 'Paralucent', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
          font-size  : 2rem;
          line-height: 2.625rem;
          margin     : 0 0 0.375rem 0;
          width      : 100%;
          text-align : center;
          color      : #FFF;
        }

        .search-trending-container {
          width      : 100%;
          max-width  : 570px;
          padding-top: 0.375rem;

          form.search {
            width                : 100%;
            display              : grid;
            grid-template-columns: 1fr auto;
            overflow             : hidden;
            background           : rgba(0, 0, 0, 0.05);
            border               : 0.0625rem solid rgba(255, 255, 255, 0.25);
            border-radius        : 6.25rem;

            input {
              border     : 0;
              outline    : none;
              padding    : 0.875rem 0.625rem 0.875rem 1rem;
              font-size  : 1rem;
              line-height: 1.3;
              background : #00459f;
              color      : #ffffff;
              width      : inherit;

              &::placeholder {
                color  : #ffffff;
                opacity: 0.6;
              }
            }

            .btn-primary {
              border       : 0;
              cursor       : pointer;
              font-weight  : 500;
              line-height  : 2rem;
              color        : #fff;
              background   : #175CFF;
              transition   : filter 0.15s ease, transform 0.02s ease;
              padding      : 12px 1.25rem 16px;
              font-size    : 1rem;
              border-radius: 0 2rem 2rem 0;

              &:hover {
                filter: brightness(1.05);
              }
            }
          }

          .trending {
            display    : flex;
            align-items: center;
            gap        : 0.75rem;
            flex-wrap  : wrap;
            padding-top: 1.875rem;

            .trending-label {
              opacity    : 0.9;
              font-weight: 600;
            }

            .trending-chips {
              display  : flex;
              gap      : 0.625rem;
              flex-wrap: wrap;
            }

            .chip {
              display      : inline-flex;
              align-items  : center;
              padding      : 0rem 1.25rem;
              border-radius: 6.25rem;
              border       : 0.0625rem solid #ffffff;
              color        : #ffffff;
              background   : rgba(255, 255, 255, 0.12);
              font-weight  : 600;
              font-size    : 0.875rem;
              transition   : background 0.15s ease, transform 0.02s ease;
            }
          }
        }
      }
    }
  }

  &.homepage-catalog {
    .container {
      .inner-container {
        display    : grid;
        gap        : 1.5rem;
        align-items: start;
      }
    }

    .filters-container {
      .filter {
        h3 {
          margin     : 0 0 0.75rem 0;
          color      : #161D26;
          font-size  : 1rem;
          font-weight: 600;
          line-height: 1.5625rem;
        }

        ul {
          padding: 0;

          li {
            list-style    : none;
            margin        : 0;
            padding       : 0;
            display       : flex;
            flex-direction: column;

            label {
              display              : grid;
              grid-template-columns: 1.125rem 1fr auto;
              align-items          : center;
              gap                  : 0.75rem;
              padding              : 0 0.5rem;
              border-radius        : 0.5rem;
              cursor               : pointer;

              &:hover {
                background: #F7F9FC;
              }

              input {
                position: absolute;
                opacity : 0;
                width   : 0;
                height  : 0;
              }

              input:checked+span:nth-child(2) {
                background  : #175CFF;
                border-color: #175CFF;

                &::after {
                  content     : '';
                  position    : absolute;
                  inset       : 0;
                  width       : 0.5rem;
                  height      : 0.3125rem;
                  border      : 0.125rem solid #ffffff;
                  border-top  : 0;
                  border-right: 0;
                  transform   : rotate(-45deg);
                  margin      : 2px auto;
                }
              }

              span {
                &:nth-child(2) {
                  width        : 0.875rem;
                  height       : 0.875rem;
                  border-radius: 0.25rem;
                  border       : 0.125rem solid #CECFDE;
                  background   : #ffffff;
                  display      : inline-block;
                  position     : relative;
                }

                &:nth-child(3) {
                  color      : #161D26;
                  font-size  : 0.875rem;
                  font-weight: 500;
                  line-height: 2.5rem;
                }

                &:last-child {
                  color      : #9296B5;
                  font-size  : 0.875rem;
                  font-weight: 600;
                  line-height: 2.5rem;
                }
              }


            }
          }
        }
      }

    }

    .main {
      .main-head h3 {
        margin     : 0 0 0.9375rem;
        color      : #252D44;
        font-size  : 1rem;
        font-weight: 600;
        line-height: 1.5625rem;
      }

      .featured {
        height       : 20rem;
        border-radius: 0.75rem;
        background   : #2E2B32;
        box-shadow   : inset 0 0.0625rem 0 rgba(255, 255, 255, 0.03);
      }

      .chips {
        display   : flex;
        gap       : 0.875rem;
        flex-wrap : wrap;
        margin-top: 1.5rem;

        .suggetion-chip {
          display      : inline-flex;
          align-items  : center;
          padding      : 0 0.875rem;
          font-size    : 0.875rem;
          font-weight  : 600;
          color        : #2B313B;
          background   : #ffffff;
          border       : 0.0625rem solid #C2BEBC;
          border-radius: 0.5rem;
          transition   : background .15s ease, transform .02s ease, box-shadow .15s ease;

        }
      }

      .products-section {
        display       : flex;
        flex-direction: column;
        gap           : 1.75rem;
        margin-block  : 2.5rem 3.125rem;
        padding       : 0;
        color         : #161D26;
        font-family   : 'Inter', system-ui;

        .products-section-heading {
          display        : flex;
          justify-content: space-between;
          align-items    : center;

          h2 {
            margin     : 0;
            color      : #161D26;
            font-family: 'Paralucent', 'Inter', system-ui;
            font-size  : 1.375rem;
            font-weight: 600;
            line-height: 2.5rem;
          }

          .view-all-btn {
            display      : inline-flex;
            align-items  : center;
            padding      : 0rem 1.25rem;
            border-radius: 6.25rem;
            border       : 0.0625rem solid #175CFF;
            background   : #ffffff;
            color        : #175CFF;
            font-size    : 0.875rem;
            font-weight  : 600;
          }
        }
      }
    }
  }

  @media (width>=480px) {
    &.homepage-catalog .main .featured {
      height: 340px;
    }
  }

  @media (width>=768px) {
    &.homepage-hero {
      .container {
        .inner-container {
          .homepage-hero-title {
            font-size  : 36px;
            line-height: 50px;
          }
        }
      }

      form.search .btn-primary {
        line-height   : 56px;
        padding-inline: 32px;
        min-width     : 140px;
      }
    }
  }

  @media (width>=1024px) {
    &.homepage-hero .container .inner-container {
      .homepage-hero-title {
        font-size  : 42px;
        line-height: 56px;
      }
    }

    &.homepage-catalog {
      .container .inner-container {
        grid-template-columns: 300px 1fr;
        gap                  : 40px;

        .main .featured {
          height: 360px;
        }
      }
    }


  }

  @media (width>=1280px) {
    &.homepage-hero {
      margin: 40px 40px 60px;

      .container {
        .inner-container {
          align-items: flex-start;

          .homepage-hero-title {
            text-align: left;
          }

        }
      }
    }

    &.homepage-catalog {
      .products-section-heading h2 {
        font-size: 1.5rem;
      }

      .container {
        .inner-container {
          max-width: 1080px;
        }
      }
    }
  }

  @media (width>=1366px) {
    &.homepage-hero {
      min-height: 800px;

      .container .inner-container {
        .homepage-hero-title {
          font-size  : 60px;
          line-height: 72px;
        }

        .search-trending-container {
          padding-inline: 0;
          max-width     : 790px;
        }
      }
    }

    &.homepage-catalog {
      .container {
        .inner-container {
          max-width: 1140px;

          .main .featured {
            height: 380px;
          }
        }
      }

    }
  }

  @media (width>=1920px) {
    &.homepage-hero {
      form.search {

        input,
        .btn-primary {
          font-size: 22px;
        }
      }
    }

    &.homepage-catalog .main .featured {
      height: 420px;
    }
  }
}