/* Theme author: Publi */

:root {
  --primary-color: #173f35;
  --primary-light: #a9d969;
  --white-color: #fff;
  --primary-text: #1a2b49;
  --darkblue: #1a2b49;
  --transition: all 0.3s ease;
  --light-gray: #f5f5f5;
  --border-color: #e3e6ec;
  --gray500: #e0e0e7;
  --text-color: #4b4b5d;
  --vertical-spacing: 160px;
  --navigation-width: 410px;

  @media screen and (max-width: 768px) {
    --navigation-width: 100%;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  display: inline-block;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* overflow: hidden; */
}

body {
  font-family: 'Playpen Sans', sans-serif;
  width: 100%;
  height: 100%;
  /* scroll-behavior: smooth; */
  overflow-x: hidden;
}

ul {
  list-style: none;
}

ol {
  padding-left: 1.5rem;
}

button,
input {
  outline: none;
  border: none;
}
button {
  cursor: pointer;
}

.center-content {
  width: 100%;
  margin: 0 auto;
  display: block;

  @media screen and (max-width: 768px) {
    max-width: 768px;
    padding: 0 1rem;
  }

  @media screen and (min-width: 1024px) {
    max-width: 990px;
    padding: 0 1rem;
  }
  @media screen and (min-width: 1366px) {
    max-width: 1200px;
    padding: 0 1rem;
  }
  @media screen and (min-width: 1440px) {
    max-width: 1300px;
  }
  @media screen and (min-width: 1600px) {
    max-width: 1500px;
  }
  @media screen and (min-width: 1920px) {
    max-width: 1800px;
  }
}

.app-container {
  /* margin-top: 60px; */
  @media screen and (max-width: 1280px) {
    /* margin-top: 1rem; */
  }
}

.top-strip {
  width: 100%;
  /* height: 40px; */
  max-height: 45px;
  background-color: var(--light-gray);

  font-size: 12px;
  color: var(--primary-color);
  font-weight: 400;
  padding: 0.5rem 0;
  text-align-last: left;

  @media screen and (max-width: 768px) {
    padding: 1rem;
    max-height: unset;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 12px;
    font-weight: 400;
    display: inline;
  }

  &.white {
    background-color: var(--white-color);
  }

  .center-content {
    text-align: center;
  }
}

.app-container {
  .category__container {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    align-items: flex-start;

    @media screen and (max-width: 768px) {
      flex-direction: column-reverse;
      gap: 6rem;
    }
    .sidebar {
      /* width: 260px; */
      flex: 0 0 350px;
      background-color: #f6f6f7;
      padding: 1rem;

      @media screen and (max-width: 768px) {
        flex: 0 0 auto;
        width: 100%;
      }
      .sidebar__content-box {
        margin-bottom: 24px;
        &.sidebar__content-box--white {
          padding: 1rem;
          background-color: var(--white-color);
        }
      }
      .sidebar__title {
        font-size: 10px;
        font-weight: 300;
        font-family: 'Roboto';
        text-transform: uppercase;
        margin-bottom: 24px;
      }
      .sidebar__list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        .sidebar__list-item {
          &.sidebar__list-item--active {
            background-color: #b3e3c9;
            a {
              padding: 0.5rem 0.8rem;
              display: block;
            }
          }

          &.has-submenu {
            a {
              display: flex;
              align-items: center;
              justify-content: space-between;
              text-decoration: none;
              text-decoration: none;

              .plus {
                width: 22px;
                height: 22px;
                border-radius: 3px;
                border: solid 0.08rem var(--text-color);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: var(--transition);
                &:hover {
                  background-color: #eee;
                  text-decoration: none;
                }
              }
              &:hover {
                opacity: 0.8;
              }
            }
            ul {
              display: flex;
              gap: 1rem;
              flex-direction: column;
              height: 0;
              opacity: 0;
              overflow: hidden;
              background-color: #f9f9f9;
              transition: var(--transition);

              &.visible {
                opacity: 1;
                padding: 1rem;
                overflow: visible;
                margin-top: 1rem;
                height: auto;
              }
            }
          }

          display: block;
          a {
            font-family: 'Roboto';
            color: var(--primary-color);
            transition: var(--transition);
            padding: 0.5rem 1rem;
            padding-left: 0;
            display: block;
            &:hover {
              background-color: #a3d3b9;
              padding-left: 0.8rem;
            }
          }
        }
      }
    }
    .main-content {
      flex: 1;

      @media screen and (max-width: 768px) {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 0;
      }

      .content-title {
        @media screen and (max-width: 768px) {
          padding: 0;
        }
      }
      .content-text {
        margin-top: 48px;
        font-family: 'Roboto';
        font-weight: 400;
        line-height: 1.5;
        font-size: 1rem;
        color: var(--primary-color);
      }
      .products-grid {
        margin-top: 48px;
      }
      .products-grid .center-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0;
        @media screen and (max-width: 768px) {
          grid-template-columns: repeat(1, 1fr);
        }
      }
    }
  }
}

.page__divider {
  background-color: #f6f6f7;
  height: 12px;
  width: 100%;
  margin-top: 90px;
}

.page-content {
  margin-top: 60px;
  .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin-top: 48px;

    @media screen and (max-width: 768px) {
      padding: 0 1rem;
    }
  }
  .page-content__title {
    font-size: 24px;
    font-weight: 400;

    @media screen and (max-width: 768px) {
      text-align: center;
    }
  }
  .page-content__text {
    font-family: 'Roboto';
    font-weight: 400;
    line-height: 1.7;
    font-size: 1rem;
    color: var(--primary-color);
  }
}

.related-products {
  margin-top: 48px;
  .related-products__title {
    text-align: center;
    display: block;
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-color);
    padding: 0 1rem;
  }
  .center-content {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  .related-products__item {
    display: block;
    aspect-ratio: 4/3;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    transition: var(--transition);
    &:hover {
      opacity: 0.9;
      transform: translateY(-5px);
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.categories__tags {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  .categories__tags-item {
    display: block;
    padding: 1rem;
    color: var(--primary-color);
    border-radius: 60px;
    background-color: #f6f6f7;
    text-align: center;
    transition: var(--transition);
    &:hover {
      background-color: var(--primary-color);
      color: var(--white-color);
    }
  }
}

.category-banner {
  height: 250px;
  text-align: center;
  img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    /* border: solid 1px red; */
  }

  @media screen and (max-width: 768px) {
    display: none;
  }
}

.product__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 48px;

  @media screen and (max-width: 768px) {
    display: flex;
    flex-direction: column;
  }

  .product__container-image {
    /* border: solid 1px red; */
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
      @media screen and (max-width: 768px) {
        width: 100%;
        height: auto;
      }
    }
  }

  .product__container-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    justify-content: flex-start;

    .product__container-content__sku,
    .product__container-content__qty {
      color: var(--primary-color);
      font-weight: 400;
      font-size: 1rem;
      font-family: 'Roboto';
      line-height: 1.8;
    }
    .product__container-content__title {
      font-size: 48px;
      color: var(--primary-color);
      font-weight: 400;
    }
    .product__container-content__description {
      background-color: #f6f6f7;
      text-align: center;
      color: var(--primary-color);
      padding: 1rem;
      font-size: 1rem;
      font-family: 'Roboto';
      font-weight: 300;
      width: 100%;
    }
    .product__container-content__thumbs {
      display: flex;
      gap: 1.5rem;
      @media screen and (max-width: 600px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }
      img {
        width: 117px;
        height: 117px;
        object-fit: cover;
        cursor: pointer;
        transition: var(--transition);
        border: solid 1px var(--light-gray);
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .btn {
      padding: 1.3rem 4rem;
      display: block;
      background-color: #5bd094;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 40px;
      text-align: center;
      font-weight: 400;
      font-family: 'Passion One';
      color: #fff;
      font-size: 36px;
      transition: var(--transition);
      &:hover {
        background-color: var(--primary-color);
        color: var(--white-color);
      }
    }
  }
}

.breadcrumbs {
  background-color: #f6f6f7;
  padding: 1rem;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Roboto';
  font-weight: 400;
  color: var(--primary-color);
  font-size: 10px;
  letter-spacing: 2px;
  a {
    font-weight: 400;
    color: var(--primary-color);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

/* header */
.header {
  .center-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;
    @media screen and (max-width: 768px) {
      padding: 1rem;
      img {
        max-width: 120px;
      }
    }
  }
  .menu-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('./img/menu-bg.svg');
    background-size: cover;
    width: 90px;
    height: 90px;
    color: var(--white-color);
    font-size: 26px;
    cursor: pointer;
    transition: var(--transition);

    @media screen and (max-width: 768px) {
      width: 60px;
      height: 60px;
    }

    &:hover {
      opacity: 0.95;
    }
  }
  .header-actions {
    display: flex;
    gap: 2rem;
    align-items: center;
    @media screen and (max-width: 768px) {
      gap: 1rem;
      img {
        max-width: 20px;
      }
    }
  }
  .header-actions__action {
    cursor: pointer;
    transition: var(--transition);
    &:hover {
      opacity: 0.95;
    }
  }
}

/* hero */
.hero-section {
  height: 600px;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* background-image: url('./img/herobg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .center-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .hero-section__title {
    max-width: 100%;
    img {
      max-width: 100%;
      object-fit: cover;
    }
  }

  .hero-section__text {
    text-align: center;
    font-size: 30px;
    color: var(--primary-color);
    font-weight: 400;
  }*/

  @media screen and (max-width: 768px) {
    height: 400px;
    display: none;
    /* object-fit: contain; */
  }
}

/* Products Grid */
.products-grid {
  margin-top: var(--vertical-spacing);
  /* margin-top: 80px; */

  @media screen and (max-width: 768px) {
    /* padding: 0 1rem; */
    margin-top: 3rem;
  }
  .center-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    justify-content: center;

    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }
  .products-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    .products-grid__item-img {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      img {
        max-width: 100%;
        object-fit: cover;
      }
    }
    .products-grid__item-title {
      display: block;
      color: var(--primary-color);
    }
  }
}

/* Section Header */
.section-header {
  /* text-align: left; */
  width: 100%;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media screen and (max-width: 768px) {
    margin-bottom: 1rem;
    text-align: center;
  }
  .section-header__title {
    font-size: 48px;
    color: var(--primary-color);
    font-weight: 400;

    @media screen and (max-width: 768px) {
      font-size: 30px;
      padding: 0 1rem;
    }
    &.uppercase {
      text-transform: uppercase;
    }
  }
}

.content-title {
  font-size: 50px;
  color: var(--primary-color);
  font-weight: 400;

  @media screen and (max-width: 768px) {
    font-size: 30px;
    padding: 0 1rem;
  }
}

/* container/viewport */
.marquee-section {
  position: relative;
  height: 56px;
  overflow: hidden;
  background: var(--primary-light);
}

/* trilho rolante */
.marquee-section__track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  /* white-space: nowrap; */
  will-change: transform;
  animation: marquee-scroll 28s linear infinite;
  padding-left: 2.25rem;
  width: max-content;
  height: 56px;
  align-items: center;
}

/* itens */
.marquee-section__track > span {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--white-color);
  font-weight: 500;
  letter-spacing: 0.2px;
  opacity: 0.95;
  font-family: 'Roboto', sans-serif;
  overflow: clip;
}

/* pausa no hover (opcional) */
.marquee-section:hover .marquee-section__track {
  /* animation-play-state: paused; */
}

/* respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .marquee-section__track {
    animation: none;
    transform: none;
  }
}

/* animação: anda metade do conteúdo, pois duplicamos os spans */
@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* mobile: altura um pouco menor se quiser */
@media (max-width: 480px) {
  :root {
    --marquee-height: 48px;
  }
}

/* Categories section */
.categories-section {
  margin-top: var(--vertical-spacing);

  position: relative;

  @media screen and (max-width: 768px) {
    margin-top: 3rem;
  }

  .center-content {
    background-color: #faf7e6;
    position: relative;
    padding: 52px 3rem;
  }

  .categories-section__art {
    position: absolute;
    top: -190px;
    left: -190px;
    width: 417px;
    height: auto;
    z-index: -1;
    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    @media screen and (max-width: 600px) {
      display: none;
    }
  }
}
.categories-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* max-width: 1380px; */
  margin: 0 0;
  z-index: 2;
}

.categories-slider__viewport {
  overflow: hidden;

  --slide-height: 19rem;
  --slide-spacing: 2rem;
  --slide-size: 100%;
  --slide-spacing-sm: 1.6rem;
  --slide-size-sm: 50%;
  --slide-spacing-lg: 2rem;
  --slide-size-lg: calc(100% / 5);
}

.categories-slider__track {
  backface-visibility: hidden;
  display: flex;
  touch-action: pan-y pinch-zoom;
  margin-left: calc(var(--slide-spacing) * -1);
}

.categories-slider__item {
  min-width: 0;
  flex: 0 0 var(--slide-size);
  padding-left: var(--slide-spacing);

  @media (min-width: 750px) {
    flex: 0 0 var(--slide-size-sm);
    padding-left: var(--slide-spacing-sm);
  }
  @media (min-width: 1200px) {
    flex: 0 0 var(--slide-size-lg);
    padding-left: var(--slide-spacing-lg);
  }

  /* other: */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-direction: column;
}

.categories-slider__item:hover {
  /* transform: translateY(-6px); */
  opacity: 0.9;
}
.categories-slider__item img {
  width: 100%;
  border-radius: 50%;
  background: #eee;
  object-fit: cover;
}
.categories-slider__item-title {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--primary-color, #333);
}

.prev-category,
.next-category {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 2;
}
.prev-category {
  left: 8px;
}
.next-category {
  right: 8px;
}

/* Recent Products */
.recent-products {
  margin-top: var(--vertical-spacing);
  position: relative;
  overflow: hidden;

  @media screen and (max-width: 768px) {
    /* padding: 0 1rem; */
    margin-top: 60px;
  }

  .center-content {
    position: relative;
  }
  .recent-products__items {
    display: grid;
    gap: 24px;
    position: relative;
    z-index: 2;

    @media screen and (max-width: 600px) {
      grid-template-columns: repeat(1, 1fr);
    }

    @media screen and (min-width: 601px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (min-width: 1400px) {
      grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    }

    @media screen and (min-width: 1700px) {
      grid-template-columns: repeat(auto-fit, minmax(530px, 1fr));
    }

    .recent-products__items-item {
      aspect-ratio: 1 / 1;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* background-color: black; */
    }
  }
  .recent-products__art {
    position: absolute;
    top: -150px;
    right: -100px;
    width: 417px;
    height: auto;
    z-index: -1;

    @media screen and (max-width: 768px) {
      display: none;
    }
  }
}

/* Banner CTA Section */
.banner-cta {
  margin-top: var(--vertical-spacing);
  position: relative;
  width: 100%;

  @media screen and (max-width: 768px) {
    margin-top: 60px;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /* object-fit: contain; */
  }

  .banner-cta__container {
    /* height: 576px; */
    overflow: hidden;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    gap: 24px;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      padding: 0 2rem;
    }
    .banner-cta__item {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .banner-cta__item-title {
        justify-self: center;
        font-size: 60px;
        color: #a8cb6a;
        text-transform: uppercase;
        padding-right: 2rem;
        /* height: 100%; */

        @media screen and (max-width: 768px) {
          font-size: 1.5rem;
          padding: 1rem;
          width: 100%;
          flex: auto;
        }

        .banner-cta__highlight {
          font-weight: 700;
          display: inline-block;
        }
      }

      @media screen and (max-width: 768px) {
        &:nth-child(1) {
          display: none;
        }
      }

      img {
        object-fit: contain;
        margin-top: 1.5rem;
        margin-left: 1.5rem;
      }
    }
  }

  .banner-cta__art {
    position: absolute;
    top: -150px;
    left: -50px;
    width: 417px;
    height: auto;
    z-index: -1;
    img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    @media screen and (max-width: 768px) {
      display: none;
    }
  }
}

.testimonials-section {
  margin-top: var(--vertical-spacing);
  --slide-height: 576px;
  --slide-spacing: 24px;
  --slide-size: 100%;
  --slide-spacing-sm: 1.6rem;
  --slide-size-sm: 100%;
  --slide-spacing-lg: 2rem;
  --slide-size-lg: calc(100% / 2);
  .testimonials-section__viewport {
    overflow: hidden;
  }
  .testimonials-section__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * -1);
  }
  .testimonials-section__container-item {
    transform: translate3d(0, 0, 0);
    flex: 0 0 var(--slide-size);
    min-width: 0;
    padding-left: var(--slide-spacing);
    height: var(--slide-height);

    @media (min-width: 750px) {
      flex: 0 0 var(--slide-size-sm);
      padding-left: var(--slide-spacing-sm);
    }
    @media (min-width: 1200px) {
      flex: 0 0 var(--slide-size-lg);
      padding-left: var(--slide-spacing-lg);
    }

    .testimonials-section__container-item__content {
      background-color: var(--primary-color);
      display: flex;
      flex-direction: column;
      gap: 24px;

      justify-content: space-between;

      padding: 2rem;
      height: auto;

      @media screen and (min-width: 750px) {
        padding: 65px 125px;
        height: var(--slide-height);
      }
    }

    .testimonials-section__container-item__text {
      color: var(--white-color);
      font-size: 24px;
      line-height: 1.7;
      font-style: italic;
    }
    .testimonials-section__container-item__name {
      color: var(--primary-light);
      font-size: 24px;
    }
  }
}

.categories-tags-cloud {
  width: 100%;
  margin-top: var(--vertical-spacing);

  @media screen and (max-width: 768px) {
    margin-top: 3rem;
  }

  .categories-tags-cloud__container {
    /* overflow: hidden; */
    background-color: #d0df90;
    padding: 52px 3rem 100px 3rem;
    position: relative;
    /* overflow: ; */
    @media screen and (max-width: 768px) {
      padding: 2rem 0;
    }
    .categories-tags-cloud__lists-container {
      display: flex;
      gap: 148px;
      justify-content: space-between;
      align-items: center;

      @media screen and (max-width: 768px) {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        justify-content: flex-start;
        align-items: flex-start;
      }
    }
  }

  .categories-tags-cloud__art {
    position: absolute;
    top: -95%;
    right: -30%;
    height: auto;
    z-index: -1;
    img {
      max-width: 100%;
    }
    @media screen and (max-width: 768px) {
      display: none;
    }
  }
  .categories-tags-cloud__art-2 {
    position: absolute;
    bottom: -70%;
    left: -28%;
    height: auto;
    z-index: -1;
    img {
      max-width: 100%;
    }
    @media screen and (max-width: 768px) {
      display: none;
    }
  }

  .categories-tags-cloud__list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    justify-content: center;
    align-items: center;
    flex: 1;
    @media screen and (max-width: 768px) {
      width: 100%;
      flex: auto;
    }
    li {
      width: 100%;
      a {
        font-family: 'Roboto', sans-serif;
        text-align: center;
        display: block;
        padding: 1.5625rem 1.5rem;
        background-color: var(--white-color);
        color: #9aa85d;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        border-radius: 60px;
        transition: var(--transition);
        &:hover {
          background-color: var(--primary-color);
          color: var(--white-color);
        }
      }
    }
  }
}

.categories-tags-cloud__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: var(--vertical-spacing);

  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 1rem;
    margin-top: 3rem;
  }
}

.brands-marquee {
  width: 100%;
  overflow: hidden;
  padding-inline: 2.25rem;
  margin-top: 60px;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 5rem,
    #000 calc(100% - 5rem),
    transparent
  );

  @media screen and (max-width: 768px) {
    margin-top: 3rem;
  }

  .brands-marquee__container {
    display: inline-flex;
    align-items: center;
    will-change: transform;
    animation: marquee 20s linear infinite;
    width: max-content;

    @media screen and (max-width: 768px) {
      animation: marquee 12s linear infinite;
    }
    img {
      /* border: solid 1px red; */
      flex: 0 0 auto; /* evita encolher/expandir */
      height: var(--brand-h);
      /* width: auto; */
      display: block;
      overflow: clip;
    }
  }
}

/* navigation */
.navigation__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  opacity: 0;
  transition: var(--transition);

  &.active {
    z-index: 99;
    opacity: 1;
  }
}

.navigation {
  z-index: 100;
  width: var(--navigation-width);
  height: 100%;
  left: 0;
  bottom: 0;
  background-color: var(--white-color);
  position: fixed;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  transition: var(--transition);
  /* overflow-x: hidden;

  overflow-y: auto; */
  transform: translateX(-100%);

  &.active {
    transform: translateX(0);
  }

  @media screen and (max-width: 768px) {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .show-categories-navigation {
    a {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
    }

    &:hover {
      .categories-navigation {
        display: flex;
      }
    }
  }

  .navigation__close,
  .categories-navigation__close {
    margin-bottom: 1.5rem;
    cursor: pointer;
    gap: 0.5rem;
    align-items: center;
    display: flex;
    transition: var(--transition);
    padding: 1rem 0 0 1rem;

    &:hover {
      color: var(--primary-light);
    }
  }

  .categories-navigation__close {
    display: none;

    @media screen and (max-width: 768px) {
      display: flex;
    }
  }

  .navigation__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    li {
      hr {
        border: solid 0.03rem var(--primary-color);
      }
      a {
        transition: var(--transition);
        text-decoration: none;
        color: var(--primary-color);
        padding: 1rem;
        display: flex;
        gap: 1rem;
        font-family: 'Roboto';
        font-weight: 700;
        font-size: 20px;
        &:hover {
          color: var(--white-color);
          span {
            color: var(--white-color);
          }
          padding-left: 1.3rem;
          background-color: var(--primary-light);
        }
      }
    }
  }
}

.categories-navigation {
  z-index: 100;
  width: var(--navigation-width);
  height: 100%;
  left: var(--navigation-width);
  bottom: 0;
  background-color: var(--white-color);
  position: absolute;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 4rem 1rem;
  transition: var(--transition);
  /* transform: translateX(-200%); */
  display: none;

  @media screen and (max-width: 768px) {
    display: block;
    transform: translateX(-200%);
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;

    padding-top: 2rem;

    &.active {
      transform: translateX(0);
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    li {
      hr {
        border: solid 0.03rem var(--primary-color);
      }
      a {
        font-size: 20px;
        font-family: 'Roboto';
        font-weight: 700;
        transition: var(--transition);
        text-decoration: none;
        color: var(--primary-color);
        padding: 1rem;
        display: flex;
        gap: 1rem;
        &:hover {
          color: var(--white-color);
          span {
            color: var(--white-color);
          }
          padding-left: 1.3rem;
          background-color: var(--primary-light);
        }
      }
    }
  }
}

/* cart */
.cart-container {
  display: flex;
  gap: 24px;
  margin-top: 48px;
  @media screen and (max-width: 768px) {
    flex-direction: column;
  }
  .cart-user-info,
  .cart-items {
    flex: 1;
  }
  .cart-container__title {
    font-size: 48px;
    /* font-family: 'Roboto'; */
    font-weight: 400;
    color: var(--primary-color);
  }
  .cart-items {
    .cart-items__container {
      margin-top: 48px;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      .cart-items__container-item {
        border: solid 1px #eee;
        padding: 1.5rem;
        border-radius: 12px;
        .cart-items__container-item__info {
          padding: 0;
          display: flex;
          flex-direction: column;
          gap: 2rem;
          a {
            display: flex;
            gap: 1rem;
            color: var(--primary-color);
            > div {
              display: flex;
              flex-direction: column;
              gap: 10px;
            }
            font-family: 'Roboto';
            .cart-items__container-item__name {
              font-weight: 700;
            }
            .cart-items__container-item__code {
              font-weight: 400;
            }
            img {
              width: 97px;
              height: 97px;
              border-radius: 4px;
              object-fit: cover;
            }
            &:hover {
            }
          }
          .cart-items__container-item__actions {
            padding: 1rem 0 0;
            border-top: solid 1px #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;

            @media screen and (max-width: 768px) {
              gap: 1rem;
              align-items: center;
            }
            .cart-items__container-item__qtys {
              display: flex;
              align-items: center;
              gap: 4rem;
              font-family: 'Roboto';
              .cart-items__container-item__qtys__label {
                display: block;
                display: flex;
                flex-direction: column;
                gap: 0.3rem;
              }
              input {
                font-family: 'Roboto';
                color: var(--primary-color);
                font-size: 1rem;
                font-weight: 400;
                border: solid 1px #4b4b5d;
                border-radius: 8px;
                height: 45px;
                padding-left: 8px;
                max-width: 100px;
              }
            }
            .cart-items__container-item__actions__remove {
              border: none;
              background: none;
              cursor: pointer;
              transform: translateY(-5px);

              @media screen and (max-width: 768px) {
                transform: translateY(0);
              }

              img {
              }
            }
          }
        }
      }
    }
  }

  .cart-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-family: 'Roboto';
    margin-top: 48px;
    padding: 1.5rem;
    border: solid 1px #eee;
    border-radius: 8px;
    .form-group {
      display: flex;
      align-items: center;
      gap: 2rem;
      @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: flex-start;
      }
      label {
        font-size: 1rem;
        color: var(--primary-color);
        font-weight: 400;
        min-width: 140px;
      }
      .form-control {
        flex: 1;
        max-width: 100%;
        height: 50px;
        padding-left: 0.5rem;
        border: solid 1px var(--primary-color);
        border-radius: 4px;
        font-size: 1rem;
        color: var(--primary-color);
        font-weight: 400;
        font-family: 'Roboto', sans-serif;

        @media screen and (max-width: 768px) {
          flex: auto;
          width: 100%;
        }

        &:focus {
          border-width: 0.0938rem;
        }

        &.select {
          max-width: 50%;
          /* font-size: 18px; */
        }
      }
    }

    .email-found-container {
      padding: 1rem;
      background-color: #f6f6f7;
      color: var(--primary-color);
      border-radius: 8px;
      .email-found-container__title {
        display: block;
        font-weight: 600;
      }
      .email-found-container__list {
        li {
          display: block;
          label {
            display: block;
            display: flex;
            gap: 8px;
            margin-top: 1rem;
            input {
              appearance: none;
              width: 1rem;
              height: 1rem;
              border-radius: 4px;
              border: solid 1px var(--primary-color);

              transform: translateY(1px);
              display: flex;
              align-items: center;
              justify-content: center;

              &:checked {
                /* background-color: var(--white-color); */
                &::after {
                  content: '';
                  width: 10px;
                  height: 10px;
                  border-radius: 2px;
                  display: inline-block;
                  background-color: var(--primary-color);
                }
              }
            }
          }
        }
      }
    }

    .person-types-container {
      .person-types-container__list {
        display: flex;
        gap: 2rem;
        .person-types-container__list__item {
          display: flex;
          gap: 0.5rem;
        }
      }
    }

    .cart-user-info__obs {
      align-items: flex-start;
      .form-control {
        width: 100%;
        height: 160px;
        resize: none;
        padding-top: 0.5rem;
        outline: none;
        &:focus {
          border-color: var(--primary-color);
        }
      }
    }
    .btn {
      padding: 1.3rem 4rem;
      display: block;
      background-color: #5bd094;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 40px;
      text-align: center;
      font-weight: 400;
      font-family: 'Passion One';
      color: #fff;
      font-size: 36px;
      transition: var(--transition);

      @media screen and (max-width: 1024px) {
        font-size: 28px;
        padding: 1rem 2rem;
      }
      @media screen and (max-width: 768px) {
        font-size: 24px;
        padding: 1rem 2rem;
      }

      &:hover {
        background-color: var(--primary-color);
        color: var(--white-color);
      }
    }
  }
}

.cart-success {
  /* width: 100%; */
  display: flex;
  gap: 1.5rem;
  margin-top: 48px;
  .cart-success__left,
  .cart-success__right {
    flex: 1;
    img {
      display: block;
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .main-container__content-text {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    display: flex;
    background-color: rebeccapurpled;
    align-items: flex-start;
  }

  @media screen and (max-width: 600px) {
    flex-direction: column;
    .logos-grid {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
  }
}

.main-container__content__header {
  margin: 0 0 48px 0;
  .main-container__content__header-title {
    font-size: 48px;
    font-weight: 400;
    color: var(--primary-color);
    line-height: 1.3;
  }
  @media screen and (max-width: 600px) {
    margin-top: 20px;
  }
}

.company-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  li {
    /* display: flex; */
    /* align-items: flex-start; */
    padding-left: 1rem;
    position: relative;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 20px;
      background-color: var(--primary-color);
      margin-right: 1rem;
      transform: translateY(10px);
    }
  }
}
.company-contact {
  padding: 1rem;
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 60px;
  span {
    &.company-contact__whats {
      color: var(--primary-light);
      font-size: 1rem;
    }
    &.company-contact__tel {
      color: var(--primary-light);
      font-size: 1.5rem;
    }
  }
  p.company-contact__address {
    font-size: 14px;
    color: var(--white-color);
    line-height: 1;
    font-family: 'Roboto';
  }
}
.main-content {
  margin-top: 48px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2rem;
  width: 100%;

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  .blog-grid__item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-decoration: none;
    transition: var(--transition);

    &:hover {
      transform: translateY(-5px);
      opacity: 0.95;
    }
    .blog-grid__item__img {
      width: 100%;
      height: 280px;
      border-radius: 8px;
      object-fit: cover;
    }
    .blog-grid__item__content {
      font-size: 1.125rem;
      color: var(--primary-color);
      font-weight: 500;
      line-height: 1.5;
      font-family: 'Roboto';
    }
  }
}
.main-container__content__description {
  font-size: 1rem;
  color: var(--primary-color);
  font-weight: 400;
  line-height: 1.7;
  font-family: 'Roboto';

  img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
  }

  &.blog-content {
    img {
      margin: 0;
    }
  }

  ul {
    list-style-type: none;
    padding-left: 1rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
    display: inline;
    font-size: 1rem;
  }
}

.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  /* gap: 1rem; */
  width: 100%;
}

.explore-more-link {
  font-family: 'Roboto';
  font-size: 1rem;
  font-weight: 400;
  color: var(--primary-color);
  text-decoration: underline;
  transition: var(--transition);
  margin-top: 48px;

  &:hover {
    opacity: 0.9;
  }
}

/* Footer */
.footer {
  width: 100%;
  background-color: var(--primary-color);
  margin-top: 60px;

  @media screen and (max-width: 768px) {
    margin-top: 3rem;
  }
  .footer__marquee {
    background-color: #a9d969;
    height: 35px;
    overflow: hidden;

    .footer__marquee-track {
      display: inline-flex;
      gap: 3rem;
      align-items: center;
      height: 100%;
      will-change: transform;
      animation: marquee 25s linear infinite;

      padding-left: 3rem;
      width: max-content;

      > span {
        flex: 0 0 auto;
        /* height: var(--brand-h); */
        width: auto;
        display: block;
        font-family: 'Roboto', sans-serif !important;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 2px;
      }
    }
  }
  .footer__container {
    .center-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 3rem 0;

      @media screen and (max-width: 768px) {
        flex-direction: column;
        padding: 1rem;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
      }
    }
    .footer__container-content {
      display: flex;

      flex-direction: column;
      gap: 1rem;
      flex: 0 0 auto;
      max-width: 30%;
      height: 100%;
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      line-height: 1.5;

      @media screen and (max-width: 768px) {
        /* flex: 0 0 100%; */
        width: 100%;
        height: auto;
        max-width: 100%;
        gap: 3rem;
      }

      &:nth-child(2) {
        text-align: right;

        @media screen and (max-width: 768px) {
          text-align: left;
        }
      }

      .footer__container-phone {
        display: flex;
        flex-direction: column;

        @media screen and (max-width: 768px) {
          margin-top: 3rem;
        }
      }

      .footer__container-phone__text {
        font-size: 1rem;
        font-weight: 500;
        color: var(--primary-light);
        font-family: 'Playpen Sans', sans-serif;
      }
      .footer__container-phone {
        color: var(--primary-light);
        font-size: 24px;
        font-family: 'Playpen Sans', sans-serif;
      }
      .footer__container-company__info {
        color: var(--white-color);
        font-size: 14px;
        a {
          font-size: 14px;
          color: var(--white-color);
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

/* Seaarch modal */

/* Modal (fundo escurecido) */

/* estado base: escondida mas clicável está desativado */
.modal {
  position: fixed;
  inset: 0;
  display: grid; /* fácil de centralizar */
  place-items: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* não recebe clique fechada */
  transition: opacity 0.2s ease, visibility 0.2s ease;

  form {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;

    @media screen and (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* recebe clique aberta */
}

/* conteúdo continua igual */
.modal-content {
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 700px;
  position: relative;
  @media screen and (max-width: 768px) {
    max-width: 100%;
    .btn {
      width: 100%;
    }
  }
}

/* Botão fechar */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #888;
}

/* Campo de busca */
.search-input {
  flex: 1;
  max-width: 100%;
  height: 50px;
  padding-left: 0.5rem;
  border: solid 1px var(--primary-color);
  border-radius: 4px;
  font-size: 1rem;
  color: var(--primary-color);
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: 1.5rem;

  @media screen and (max-width: 768px) {
    flex: auto;
    width: 100%;
  }
  &:focus {
    border-color: var(--primary-color);
  }
}

.modal-title {
  font-size: 1.5rem;
  font-family: 'Playpen Sans';
  color: var(--primary-color);
}

/* Helpers */
.text-dark-green {
  color: var(--primary-color);
}

.text-light-green {
  color: var(--primary-light);
}
.text-light-gray {
  color: #b9b9b9;
}

.text-pink {
  color: #d621b2;
}

.text-white {
  color: var(--white-color);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.btn {
  padding: 1.3rem 3rem;
  background-color: #ddd;
  text-align: center;
  border-radius: 40px;
  font-size: 24px;
  transition: var(--transition);
  font-family: 'Playpen Sans', sans-serif;

  &:hover {
    opacity: 0.9;
  }

  &.btn-sm {
    padding: 1rem 1.5rem;
    font-size: 14px;
    font-weight: 400;
  }
  &.btn-md {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 500;
  }

  &.btn-light {
    background-color: #feebe4;
    color: var(--primary-color);
  }
  &.btn-primary {
    color: var(--white-color);
    background-color: var(--primary-color);
  }
}