html,
body {
  overflow-x: clip;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

html::-webkit-scrollbar-corner {
  background: transparent;
}

html.is-modal-open,
body.is-modal-open,
html.is-menu-open,
body.is-menu-open {
  overflow: hidden;
}

body.is-modal-open,
body.is-menu-open {
  position: fixed;
  width: 100%;
}

body {

  font-family: var(--font-family);

  font-size: var(--font-body-size);

  font-weight: var(--font-body-weight);

  line-height: var(--font-body-line-height);

  letter-spacing: var(--font-body-letter-spacing);

  color: var(--color-gray);

  background-color: var(--color-white);

}



.page {
  width: 100%;
  max-width: var(--breakpoint-tablet);
  margin-inline: auto;
}

@media (min-width: 1280px) {
  .page:has(.hero-section),
  .page:has(.products-page),
  .page:has(.profile-page),
  .page:has(.policy-page) {
    max-width: none;
  }
}



.page__content {

  width: 100%;

  padding-inline: var(--page-padding-x);

}



/* Typography utilities — match Figma Mobile/* styles */



.text-h1 {

  font-size: var(--font-h1-size);

  font-weight: var(--font-h1-weight);

  line-height: var(--font-h1-line-height);

  letter-spacing: var(--font-h1-letter-spacing);

  color: var(--color-gray);

}



.text-h2 {

  font-size: var(--font-h2-size);

  font-weight: var(--font-h2-weight);

  line-height: var(--font-h2-line-height);

  letter-spacing: var(--font-h2-letter-spacing);

  color: var(--color-gray);

}



.text-h3 {

  font-size: var(--font-h3-size);

  font-weight: var(--font-h3-weight);

  line-height: var(--font-h3-line-height);

  letter-spacing: var(--font-h3-letter-spacing);

  color: var(--color-gray);

}



.text-body {

  font-size: var(--font-body-size);

  font-weight: var(--font-body-weight);

  line-height: var(--font-body-line-height);

  letter-spacing: var(--font-body-letter-spacing);

  color: var(--color-gray);

}



.text-body-thin {

  font-size: var(--font-body-thin-size);

  font-weight: var(--font-body-thin-weight);

  line-height: var(--font-body-thin-line-height);

  letter-spacing: var(--font-body-thin-letter-spacing);

  color: var(--color-gray-2);

}



.text-small {

  font-size: var(--font-small-size);

  font-weight: var(--font-small-weight);

  line-height: var(--font-small-line-height);

  letter-spacing: var(--font-small-letter-spacing);

  color: var(--color-gray-3);

}



.text-button {

  font-size: var(--font-button-size);

  font-weight: var(--font-button-weight);

  line-height: var(--font-button-line-height);

  letter-spacing: var(--font-button-letter-spacing);

}



.text-badge {

  font-size: var(--font-badge-size);

  font-weight: var(--font-badge-weight);

  line-height: var(--font-badge-line-height);

  letter-spacing: var(--font-badge-letter-spacing);

  text-transform: uppercase;

}



.text-badge-desktop {

  font-size: var(--font-badge-desktop-size);

  font-weight: var(--font-badge-desktop-weight);

  line-height: var(--font-badge-desktop-line-height);

  letter-spacing: var(--font-badge-desktop-letter-spacing);

}



.text-gradient {

  background: var(--gradient-text);

  background-clip: text;

  -webkit-background-clip: text;

  color: transparent;

}



[data-scroll-reveal-sequence] [data-scroll-reveal-sequence-item] {

  opacity: 0;

  transform: translateY(var(--scroll-reveal-offset));

  transition:
    opacity var(--scroll-reveal-duration) var(--scroll-reveal-easing),
    transform var(--scroll-reveal-duration) var(--scroll-reveal-easing);

  transition-delay: calc(var(--scroll-reveal-entry-delay) + var(--scroll-reveal-sequence-delay, 0ms));

}

[data-scroll-reveal-sequence].is-active [data-scroll-reveal-sequence-item] {

  opacity: 1;

  transform: none;

}

@media (prefers-reduced-motion: reduce) {

  [data-scroll-reveal-sequence] [data-scroll-reveal-sequence-item] {

    opacity: 1;

    transform: none;

    transition: none;

  }

}



.scroll-reveal {

  opacity: 0;

  transform: translateY(var(--scroll-reveal-offset));

  transition:
    opacity var(--scroll-reveal-duration) var(--scroll-reveal-easing),
    transform var(--scroll-reveal-duration) var(--scroll-reveal-easing);

  transition-delay: calc(var(--scroll-reveal-entry-delay, 0ms) + var(--scroll-reveal-delay, 0ms));

}

.scroll-reveal.is-revealed {

  opacity: 1;

  transform: none;

}

@media (prefers-reduced-motion: reduce) {

  .scroll-reveal {

    opacity: 1;

    transform: none;

    transition: none;

  }

}