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

/* Playful rounded font stack — SF Rounded on Apple, fallback to system-ui */
body {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}

@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: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;
  }
}

/* Product description HTML renderer */
.product-description h2 {
  font-size: 1.05rem;
  font-weight: 900;
  color: #111;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.product-description h2:first-child { margin-top: 0; }
.product-description h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
.product-description p {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.product-description ul, .product-description ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.product-description li {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.product-description li::before {
  content: "✓";
  font-size: 0.7rem;
  font-weight: 900;
  color: #7B4A2A;
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.product-description strong { font-weight: 700; color: #111; }
.product-description em { font-style: italic; color: #6b7280; }
.product-description span { color: inherit; font-weight: inherit; font-style: inherit; }
.product-description img { display: none; }

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

  .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;
  }
}