@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";


@layer utilities {

  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  input {
    touch-action: manipulation;
  }

  input:focus~label,
  input:not(:placeholder-shown)~label {
    @apply -translate-y-2 text-xsmall-regular;
  }

  input:focus~label {
    @apply left-0;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    border: 1px solid #212121;
    -webkit-text-fill-color: #212121;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
}

@layer components {
  .content-container {
    @apply max-w-[1440px] w-full mx-auto px-6;
    padding: 0 16px;
  }

  .contrast-btn {
    @apply px-4 py-2 border border-black rounded-full hover:bg-black hover:text-white transition-colors duration-200 ease-in;
  }

  .text-xsmall-regular {
    @apply text-[10px] leading-4 font-normal;
  }

  .text-small-regular {
    @apply text-xs leading-5 font-normal;
  }

  .text-small-semi {
    @apply text-xs leading-5 font-semibold;
  }

  .text-base-regular {
    @apply text-sm leading-6 font-normal;
  }

  .text-base-semi {
    @apply text-sm leading-6 font-semibold;
  }

  .text-large-regular {
    @apply text-base leading-6 font-normal;
  }

  .text-large-semi {
    @apply text-base leading-6 font-semibold;
  }

  .text-xl-regular {
    @apply text-2xl leading-[36px] font-normal;
  }

  .text-xl-semi {
    @apply text-2xl leading-[36px] font-semibold;
  }

  .text-2xl-regular {
    @apply text-[30px] leading-[48px] font-normal;
  }

  .text-2xl-semi {
    @apply text-[30px] leading-[48px] font-semibold;
  }

  .text-3xl-regular {
    @apply text-[32px] leading-[44px] font-normal;
  }

  .text-3xl-semi {
    @apply text-[32px] leading-[44px] font-semibold;
  }
}

footer {
  background-image: linear-gradient(#26283b, #26283b);
  color: white;
  padding-top: 50px;
  font-size: 14px;
  padding-bottom: 100px;
}

footer p {
  text-align: left;
  color: #fffc;
  text-align: justify;
  font-weight: 400;
  line-height: 24px;
}

footer .contact {
  margin-top: 20px;
}

footer .logo {
  width: 50%;
  margin-bottom: 20px;
}

footer .copyright {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  p {
    margin-top: 5px;
    color: #ffffff80;
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    line-height: 30px;
  }
}

nav {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
    0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border: none;
}

nav a img {
  /* margin-left: 10px !important; */
}

ul[data-testid="products-list"] {
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  margin-top: 20px;
}

ul[data-testid="products-list"] li img {
  height: auto !important;

}

ul[data-testid="products-list"] li {
  /* margin-bottom: 20px; */
}


div[data-testid="category-container"] {
  padding-top: 30px;
  padding-bottom: 40px;
}


div[data-testid="product-description"] {
  line-height: 2rem;
}

div[data-testid="product-wrapper"] p[data-testid="price"] {
  font-size: 14px;
  /* font-weight: bold; */
  text-align: center;
  margin: 0 auto;
  display: block;
  color: black;
}

.product-images {
  /* background: red; */
  display: block;

}

.product-images {
  overflow: auto;
}

.product-images .list {
  display: inline-flex;
}

.product-images .list .item {
  width: calc(100vw - 3rem);
}

.my-link {
  display: flex;
  align-items: center;
  color: gray;
  margin-bottom: 20px;
}

.my-link img {
  margin: 0;
  margin-right: 5px;
  margin-bottom: 0 !important;

}

#product-info ul {
  list-style: disc;
  padding-left: 24px;
}

#product-info ol {
  list-style: auto;
  padding-left: 16px;
}

/* @media (max-width: 768px) { */
input:focus,
textarea:focus,
select:focus {
  /* transform: scale(1);
    outline: none; */
  font-size: 16px;
}

/* } */

* {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}