/* ================================================================
  DEFAULTS
================================================================ */
body {
  font-family: var(--font-secondary);
  font-size: var(--font-base-size);
  color: var(--color-secondary);
  line-height: var(--font-base-line-height);
  background: var(--color-background);
  overflow-x: hidden;
}

img,
picture {
  display: block;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  transition: var(--js-transition);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--color-main);
  margin: 0;
}

.trsn {
  transition: var(--js-transition);
}

.no-bullet {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Container classes */
.js-container,
.js-container__content {
  margin: 0 auto;
}

.js-container,
.js-container__content,
.js-container__column {
  padding-right: var(--js-padding);
  padding-left: var(--js-padding);
}

.js-container {
  width: 100vw;
}

.js-container__content {
  max-width: 1320px !important;
}

.js-container__content--full {
  max-width: 100% !important;
}

.js-container__row {
  margin-right: var(--js-margin);
  margin-left: var(--js-margin);
  row-gap: calc(var(--js-padding) * 2);
}

/* Main Container */
.main-container,
.main-container__content {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Margins */
.js-mt-1 {
  margin-top: var(--js-padding);
}

.js-mt-2 {
  margin-top: calc(var(--js-padding) * 2);
}

.js-mt-3 {
  margin-top: calc(var(--js-padding) * 3);
}

.js-mt-4 {
  margin-top: calc(var(--js-padding) * 4);
}

.js-mt-5 {
  margin-top: calc(var(--js-padding) * 5);
}

.js-mt-6 {
  margin-top: calc(var(--js-padding) * 6);
}

.js-mb-1 {
  margin-bottom: var(--js-padding);
}

.js-mb-2 {
  margin-bottom: calc(var(--js-padding) * 2);
}

.js-mb-3 {
  margin-bottom: calc(var(--js-padding) * 3);
}

.js-mb-4 {
  margin-bottom: calc(var(--js-padding) * 4);
}

.js-mb-5 {
  margin-bottom: calc(var(--js-padding) * 5);
}

.js-mb-6 {
  margin-bottom: calc(var(--js-padding) * 6);
}

/* Paddings */
.js-pt-1 {
  padding-top: var(--js-padding);
}

.js-pt-2 {
  padding-top: calc(var(--js-padding) * 2);
}

.js-pt-3 {
  padding-top: calc(var(--js-padding) * 3);
}

.js-pt-4 {
  padding-top: calc(var(--js-padding) * 4);
}

.js-pt-5 {
  padding-top: calc(var(--js-padding) * 5);
}

.js-pt-6 {
  padding-top: calc(var(--js-padding) * 6);
}

.js-pb-1 {
  padding-bottom: var(--js-padding);
}

.js-pb-2 {
  padding-bottom: calc(var(--js-padding) * 2);
}

.js-pb-3 {
  padding-bottom: calc(var(--js-padding) * 3);
}

.js-pb-4 {
  padding-bottom: calc(var(--js-padding) * 4);
}

.js-pb-5 {
  padding-bottom: calc(var(--js-padding) * 5);
}

.js-pb-6 {
  padding-bottom: calc(var(--js-padding) * 6);
}

/* JS Form
================================================================ */
.js-form,
.js-form__field {
  display: flex;
  flex-direction: column;
}

.js-form {
  gap: calc(var(--js-padding) * 1.75);
}

.js-form__field {
  line-height: 1;
  gap: calc(var(--js-padding));
}

.js-form__label {
  font-size: calc(var(--font-base-size) * 0.875);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--font-base-size) * 0.5);
}

.js-form__icon {
  font-size: 100%;
  position: relative;
  top: 1px;
}

.js-form__tooltip {
  --bs-tooltip-bg: var(--color-background);
  --bs-tooltip-color: var(--color-main);
}

.js-form__tooltip .tooltip-inner {
  font-size: calc(var(--font-base-size) * 0.875);
}

.js-form__input,
.js-form__select,
.js-form__textarea {
  width: 100%;
  font-family: var(--font-secondary);
  font-size: calc(var(--font-base-size) * 0.9375);
  background: var(--color-background);
  border-radius: var(--js-radius-sm);
  color: var(--color-main);
  border: 1px solid var(--color-main-op3);
  padding: calc(var(--js-padding) * 0.875);
  transition: var(--js-transition);
  outline: none !important;
  box-shadow: none !important;
  margin: 0;
}

.js-form__input:focus,
.js-form__select:focus,
.js-form__textarea:focus,
.js-form__label:hover + :is(.js-form__input, .js-form__select, .js-form__textarea) {
  border-color: var(--color-main-op7);
}

.js-form__input::placeholder,
.js-form__select::placeholder,
.js-form__textarea::placeholder {
  color: var(--color-main-op7);
  transition: var(--js-transition);
}

.js-form__input:focus::placeholder,
.js-form__select:focus::placeholder,
.js-form__textarea:focus::placeholder {
  color: var(--color-main);
}

.js-form .country-select {
  width: 100%;
}

.js-form__actions {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(var(--js-padding) * 0.75);
}

.js-form__text, .js-form__link {
  font-size: calc(var(--font-base-size) * 0.875);
  color: var(--color-secondary) !important;
  line-height: 1;
}

.js-form__link {
  text-decoration: underline !important;
}
/* Buttons 
================================================================ */
.button,
.button > span {
  font-family: var(--font-button);
  text-decoration: none !important;
  line-height: 1;
}

.button {
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--js-radius-md);
  cursor: pointer !important;
  position: relative;
  padding: var(--button-padding-v) var(--button-padding-h);
  width: fit-content;
  height: auto;
}

.button,
.button:is(:hover, :focus) {
  transition: var(--js-transition);
}

.button > span {
  font-size: 100%;
  position: relative;
  z-index: 2;
}

/* Button > Main */
.button--main {
  color: var(--color-button-main-text);
  border-color: var(--color-button-main-bg);
  background: var(--color-button-main-bg);
}

.button--main:is(:hover, :focus) {
  color: var(--color-button-main-text-hover);
  border-color: var(--color-button-main-bg-hover);
  background: var(--color-button-main-bg-hover);
}

/* Button > Secondary */
.button--secondary {
  color: var(--color-button-secondary-text);
  border-color: var(--color-button-secondary-bg);
  background: var(--color-button-secondary-bg);
}

.button--secondary:is(:hover, :focus) {
  color: var(--color-button-secondary-text-hover);
  border-color: var(--color-button-secondary-bg-hover);
  background: var(--color-button-secondary-bg-hover);
}

.button--secondary.button--outline {
  color: var(--color-button-secondary-bg);
  border-color: var(--color-button-secondary-bg);
  background: transparent !important;
}

.button--secondary.button--outline:is(:hover, :focus) {
  color: var(--color-button-secondary-text);
  border-color: var(--color-button-secondary-bg);
  background: var(--color-button-secondary-bg) !important;
}

/* Button > Special classes */
.button--full {
  width: 100% !important;
}

.button--no-border {
  border: none !important;
}

.button--small {
  padding: calc(var(--button-padding-v) * 0.75) calc(var(--button-padding-h) * 0.75);
}

.button--trsn > .ph-arrow-right {
  font-size: 90%;
  position: relative;
  top: 1px;
}

/* Button > in Header */
.button--login {
  font-weight: 400;
  padding: calc(var(--button-padding-v) * 0.625) calc(var(--button-padding-h) * 0.625);
}

.button--header {
  padding: calc(var(--button-padding-v) * 0.75) calc(var(--button-padding-h) * 0.75);
}

/* Buttons Media Queries */
@media (max-width: 575px) {
  .button {
    font-size: var(--button-font-size-mobile);
    gap: calc(var(--button-font-size-mobile) * 0.25);
  }

  .button--small {
    font-size: calc(var(--button-font-size-mobile) * 0.75);
  }

  .button--large {
    font-size: calc(var(--button-font-size-mobile) * 1.125);
    padding: calc(var(--button-padding-v) * 1.125) calc(var(--button-padding-h) * 1.125);
  }

  .button--trsn:is(:hover, :focus) {
    gap: calc(var(--button-font-size-mobile) * 0.5);
  }
}

@media (min-width: 576px) {
  .button {
    font-size: var(--button-font-size-desktop);
    gap: calc(var(--button-font-size-desktop) * 0.25);
  }

  .button--small {
    font-size: calc(var(--button-font-size-desktop) * 0.75);
  }

  .button--large {
    font-size: calc(var(--button-font-size-desktop) * 1.125);
    padding: calc(var(--button-padding-v) * 1.125) calc(var(--button-padding-h) * 1.125);
  }

  .button--trsn:is(:hover, :focus) {
    gap: calc(var(--button-font-size-desktop) * 0.5);
  }

  .button--login {
    font-size: calc(var(--button-font-size-desktop) * 0.725);
  }

  .button--header {
    font-size: calc(var(--button-font-size-desktop) * 0.875);
  }
}

/* ================================================================
  HEADER
================================================================ */
.header {
  background: transparent !important;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  transition: var(--js-transition)
}

.header:has(.header-menu__item:hover),
.header.is-scrolling {
  backdrop-filter: blur(8px);
  background: var(--color-background-op4) !important;
}

.header__container,
.header__content {
  height: 100%;
}

.header__content {
  align-items: center;
}

.header__wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* gap: calc(var(--js-padding) * 1.5); */
}

/* Header Button transition */
.header .button--header {
  overflow: hidden;
}

.header:not(.is-scrolling) .button--header {
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  transform: translateX(calc(var(--button-padding-v) * 1.5));
  padding-right: 0;
  padding-left: 0;
  margin-left: 0;
}

.header.is-scrolling .button--header {
  max-width: 1000px;
  margin-left: calc(var(--js-padding) * 1.5);
}

/* Header Brand
================================================================ */
.header__brand {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.header__logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Header Menu
================================================================ */
.header-menu {
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-menu__item,
.header-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-menu__item {
  padding: 0 calc(var(--js-padding) * 1.5);
  position: inherit;
}

.header-menu__link {
  font-family: var(--font-main);
  height: 100%;
  line-height: 1;
  font-size: calc(var(--font-base-size) * 0.9375);
  gap: calc(var(--font-base-size) * 0.25);
  color: var(--color-main);
  padding: 2px 0;
  position: relative;
}

.header-menu__link::after,
.header-menu__link:hover::after {
  transition: var(--js-transition);
}

.header-menu__link::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0px;
  opacity: 0;
  background: var(--color-accent);
}

.header-menu__link:hover:after,
.header-menu__item:hover > .header-menu__link::after {
  width: 100%;
  opacity: 1;
}

.header-menu__link > .ph-caret-down {
  transition: var(--js-transition);
  transform: rotate(0deg);
}

.header-menu__link:hover > .ph-caret-down {
  transform: rotate(180deg);
}

/* Header Menu > Dropdown */
.header-dropdown {
  background: var(--color-background);
}

.header .header-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: var(--header-height-desktop);
  padding-top: calc(var(--js-padding) * 3);
  padding-bottom: calc(var(--js-padding) * 3);
}

.header-menu__item:hover .header-dropdown,
.header-menu__link:hover + .header-dropdown {
  display: block;
}

.header-dropdown__row {
  row-gap: calc(var(--js-padding) * 3);
}

.header-dropdown__title {
  color: var(--color-main);
  opacity: 0.75;
  font-family: var(--font-main);
  text-transform: uppercase;
  font-weight: 600;
  font-size: calc(var(--font-base-size) * 0.75);
  letter-spacing: 1px;
  line-height: 1;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: calc(var(--js-padding) * 0.75);
  margin-bottom: calc(var(--js-padding) * 1.875);
}

.header-dropdown__gallery {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding));
}

.header-dropdown__anchor, 
.header-dropdown__picture, 
.header-dropdown__image {
  width: 100%;
  display: block;
}

.header-dropdown__anchor {
  overflow: hidden;
  border-radius: var(--js-radius-xl);
}

.header-dropdown__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1;
  row-gap: calc(var(--js-padding) * 0.75);
}

.header-dropdown__item {
  width: 100%;
  display: block;
}

.header-dropdown__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: calc(var(--font-base-size) * 0.9375);
  color: var(--color-secondary);
  min-height: var(--js-min-height);
  min-width: fit-content;
  padding-left: 0;
}

.header-dropdown__link:not(.header-dropdown__link--gallery):hover {
  padding-left: calc(var(--js-padding) * 0.5);
}

.header-dropdown__link--small {
  font-size: calc(var(--font-base-size) * 0.875);
  gap: calc(var(--js-padding) * 0.35);
  font-style: italic;
}

.header-dropdown__link--small > .ph-arrow-right {
  font-size: 90%;
  position: relative;
  top: 1px;
}

.header-dropdown__link--gallery {
  gap: calc(var(--js-padding) * 0.25);
  font-weight: 600;
}

.header-dropdown__link--gallery:is(:hover, :focus),
.header-dropdown__anchor:hover + .header-dropdown__link--gallery {
  gap: calc(var(--js-padding) * 0.5);
}

.header-dropdown__label {
  font-size: calc(var(--font-base-size) * 0.625);
  font-weight: 500;
  padding: calc(var(--js-padding) * 0.35) calc(var(--js-padding) * 0.5);
  border-radius: var(--js-radius-sm);
  margin-left: calc(var(--js-padding) * 0.75);
}

.header-dropdown__label--new {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* Header Toggle 
================================================================ */
.header-toggle {
  padding: calc(var(--js-padding) * 1);
  background: transparent !important;
  font-size: calc(var(--font-base-size) * 1);
  gap: calc(var(--js-padding) * 1);
}

.header-toggle__text {
  color: var(--color-main);
  text-transform: uppercase;
  font-weight: 400;
}

.header-toggle__icon > div {
  height: 2px;
  background: var(--color-main);
  position: absolute;
  transition: var(--js-transition);
  opacity: 1;
}

/* Header Toogle > Sidebar opened */
body:has(#mobile-menu.show) .header-toggle__icon > div:nth-child(2) {
  opacity: 0;
}

/* Header Media Queries 
================================================================ */
@media (max-width: 575px) {
  .header__brand {
    height: 30px;
  }

  .header-dropdown__gallery {
    max-width: 100%;
  }

  .header-toggle {
    padding-top: calc(var(--js-padding) * 0.5);
    padding-bottom: calc(var(--js-padding) * 0.5);
  }

  .header-toggle__icon,
  .header-toggle__icon > div {
    width: var(--header-toogle-icon-width-mobile);
  }

  .header-toggle__icon {
    height: var(--header-toogle-icon-height-mobile);
  }

  .header-toggle__icon > div:nth-child(1) {
    top: 0;
  }
  
  .header-toggle__icon > div:nth-child(2) {
    top: 8px;
  }

  .header-toggle__icon > div:nth-child(3) {
    bottom: 0;
  }

  body:has(#mobile-menu.show) .header-toggle__icon > div:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
  }
  
  body:has(#mobile-menu.show) .header-toggle__icon > div:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 8px;
  }
}

@media (min-width: 576px) {
  .header__brand {
    height: 34px;
  }

  .header-dropdown__gallery {
    max-width: 280px;
  }

  .header-toggle__icon,
  .header-toggle__icon > div {
    width: var(--header-toogle-icon-width-desktop);
  }

  .header-toggle__icon {
    height: var(--header-toogle-icon-height-desktop);
  }

  .header-toggle__icon > div:nth-child(1) {
    top: 0;
  }

  .header-toggle__icon > div:nth-child(2) {
    top: 10px;
  }

  .header-toggle__icon > div:nth-child(3) {
    bottom: 0;
  }

  .header-toggle:hover .header-toggle__icon > div:nth-child(1) {
    top: -2px;
  }

  .header-toggle:hover .header-toggle__icon > div:nth-child(3) {
    bottom: -2px;
  }

  body:has(#mobile-menu.show) .header-toggle__icon > div:nth-child(1) {
    top: 10px;
    transform: rotate(45deg);
  }

  body:has(#mobile-menu.show) .header-toggle__icon > div:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
  }
}

@media (max-width: 767px) {
  .header,
  .header-menu__item {
    height: var(--header-height-mobile);
  }
}

@media (min-width: 768px) {
  .header,
  .header-menu__item {
    height: var(--header-height-desktop);
  }
}

@media (max-width: 991px) {
  .header__content {
    justify-content: space-around;
  }
}

@media (min-width: 992px) {
  .header__content {
    justify-content: space-between;
  }
}

/* ================================================================
  SIDEBAR MENU
================================================================ */
.sidebar-menu {
  background: var(--color-background);
}
.sidebar-menu__header,
.sidebar-menu__body {
  width: 100%;
  padding: calc(var(--js-padding) * 1.25);
}

.sidebar-menu__header {
  justify-content: space-between;
}

.sidebar-menu__logo {
  width: auto;
  display: block;
}

.sidebar-menu__close {
  background: var(--color-background) !important;
  padding: calc(var(--js-padding) * 0.25);
  opacity: 0.5;
  color: var(--color-secondary);
}

.sidebar-menu__close:hover {
  opacity: 1;
}

.sidebar-menu__body {
  display: flex;
  flex-direction: column;
}

.sidebar-menu__actions {
  width: 100%;
  display: flex;
  padding: calc(var(--js-padding) * 2) 0;
  gap: calc(var(--js-padding) * 2);
}

/* Menu Accordion */
.menu-accordion, 
.menu-accordion__item, 
.menu-accordion__button {
  background: transparent !important;
}

.menu-accordion__item {
  border-width: 1px 0 0 !important;
  margin: 0 !important;
  border-color: var(--color-border) !important;
  border-style: solid !important;
  border-radius: 0 !important;
}

.menu-accordion__item:last-child {
  border-width: 1px 0 !important;
}

.menu-accordion__button {
  font-family: var(--font-main) !important;
  color: var(--color-main) !important;
  padding: calc(var(--js-padding) * 1.5) 0;
  line-height: 1;
  font-size: calc(var(--font-base-size) * 1) !important;
  box-shadow: none !important;
  justify-content: space-between;
}

.menu-accordion__button::after {
  display: none !important;
}

.menu-accordion__button > .ph-caret-down {
  font-size: 110%;
  transition: var(--js-transition);
  transform: rotate(0deg);
}

.menu-accordion__button[aria-expanded="true"] > .ph-caret-down {
  transform: rotate(180deg);
}

.menu-accordion__body {
  padding: 0;
}

.menu-accordion__body .header-dropdown {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  background: var(--color-main-op05);
  padding-top: calc(var(--js-padding) * 1.5);
  padding-bottom: calc(var(--js-padding) * 1.5);
}

/* Mobile menu
================================================================ */
#mobile-menu {
  width: 100vw;
}

/* Sidebar Menu Media Queries 
================================================================ */
@media (max-width: 575px) {
  .sidebar-menu__logo {
    height: 30px;
  }

  .sidebar-menu__close {
    font-size: calc(var(--font-base-size) * 1.25);
  }

  .sidebar-menu__actions {
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media (min-width: 576px) {
  .sidebar-menu__logo {
    height: 34px;
  }

  .sidebar-menu__close {
    font-size: calc(var(--font-base-size) * 1.5);
  }

  .sidebar-menu__actions {
    flex-direction: row;
    align-items: stretch;
  }
}

/* ================================================================
  FOOTER
================================================================ */
.footer {
  background: var(--color-background);
  padding-top: calc(var(--js-padding) * 3) !important;
  padding-bottom: calc(var(--js-padding) * 3) !important;
  border-top: 1px solid var(--color-border);
}

.footer__divider {
  border-top-color: var(--color-border);
  opacity: 1;
  margin: calc(var(--js-padding) * 3) auto;
  width: 100%;
}

.footer__logo {
  width: auto;
  object-fit: contain;
  display: block;
}

.footer__title {
  margin-bottom: calc(var(--js-padding) * 1.5);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
  font-size: calc(var(--font-base-size) * 0.875);
  letter-spacing: 1px;
}

.footer__copyright {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--font-base-size) * 0.25);
  font-size: calc(var(--font-base-size) * 0.75);
  color: var(--color-secondary-op7);
}

.footer__pt-2023 {
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Footer > Apps
================================================================ */
.footer-apps {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--js-padding) * 2);
}

.footer-apps__link {
  width: auto;
  display: block;
}

.footer-apps__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Footer > Social
================================================================ */
.footer-social {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(var(--js-padding) * 1.5);
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-main);
  background: var(--color-main-op2);
  border-radius: 100px;
}

.footer-social__link:hover {
  color: var(--color-background);
  background: var(--color-main);
}

/* Footer > Menu
================================================================ */
.footer-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: calc(var(--js-padding) * 0.25);
  flex-wrap: wrap;
}

.footer-menu--horizontal {
  flex-direction: row;
  gap: calc(var(--js-padding) * 1.5);
}

.footer-menu__item {
  display: block;
  width: fit-content;
}

.footer-menu__link {
  line-height: 1;
  width: fit-content;
  font-size: calc(var(--font-base-size) * 0.875);
  min-height: var(--js-min-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--color-secondary-op7);
}

.footer-menu__link:hover,
.footer-menu__link:not([target="_blank"]):focus {
  color: var(--color-secondary);
}

.footer-menu__link--small {
  font-size: calc(var(--font-base-size) * 0.75);
}

/* Footer Media Queries
================================================================ */
@media (max-width: 414px) {
  .footer__column {
    width: 100% !important;
  }
}

@media (max-width: 575px) {
  .footer__logo {
    height: 30px;
  }

  .footer-apps__link {
    height: 34px;
  }

  .footer-social__link {
    font-size: calc(var(--font-base-size) * 1);
    width: calc(var(--font-base-size) * 2);
    height: calc(var(--font-base-size) * 2);
  }

  .footer__pt-2023 {
    height: calc(var(--js-padding) * 2);
  }
}

@media (min-width: 576px) {
  .footer__logo {
    height: 34px;
  }

  .footer-apps__link {
    height: 40px;
  }

  .footer-social__link {
    font-size: calc(var(--font-base-size) * 1.25);
    width: calc(var(--font-base-size) * 2.25);
    height: calc(var(--font-base-size) * 2.25);
  }

  .footer__pt-2023 {
    height: calc(var(--js-padding) * 2.25);
  }
}

@media (max-width: 767px) {
  .footer__logo {
    margin: 0 auto;
  }
}

/* ================================================================
  SECTIONS
================================================================ */
.js-section {
  padding-top: calc(var(--js-padding) * 6);
  padding-bottom: calc(var(--js-padding) * 6);
}

.js-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--js-padding) * 2);
}

.js-section__title {
  font-weight: 500;
  line-height: 1;
}

.js-section__text {
  font-weight: 400;
}

.js-section__subtitle {
  text-transform: uppercase;
  letter-spacing: 4px;
  opacity: 0.7;
}

.js-section__actions {
  padding-top: calc(var(--js-padding) * 4);
}

/* JS Stats */
.js-stats {
  background: var(--color-main-op1);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-main-op1);
  border-radius: var(--js-radius-md);
  padding: calc(var(--js-padding) * 1) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--js-padding) * 2);
}

.js-stats__block {
  display: flex;
  flex-direction: column;
  padding: calc(var(--js-padding) * 1) calc(var(--js-padding) * 2);
  gap: calc(var(--js-padding) * 0.5);
}

.js-stats__block:not(:first-child) {
  border-left: 1px solid var(--color-main-op3);
}

.js-stats__text {
  display: block;
  line-height: 1;
}

.js-stats__text:not(.js-stats__text--featured) {
  font-size: calc(var(--font-base-size) * 0.75);
  font-weight: 400;
}

.js-stats__text--featured {
  font-size: calc(var(--font-base-size) * 1);
  font-weight: 600;
}

/* JS Section Colors & Gradients */
.js-section[data-background="gradient-purple"] {
  background: var(--js-gradient-purple-fallback);
  background: var(--js-gradient-purple);
}

.js-section[data-background="gradient-purple-reversed"] {
  background: var(--js-gradient-purple-fallback);
  background: var(--js-gradient-purple-reversed);
}

.js-section[data-background="gradient-blue"] {
  background: var(--js-gradient-blue-fallback);
  background: var(--js-gradient-blue);
}

.js-section[data-background="gradient-blue-reversed"] {
  background: var(--js-gradient-blue-fallback);
  background: var(--js-gradient-blue-reversed);
}

.js-section[data-background="gradient-teal"] {
  background: var(--js-gradient-teal-fallback);
  background: var(--js-gradient-teal);
}

.js-section[data-background="gradient-teal-reversed"] {
  background: var(--js-gradient-teal-fallback);
  background: var(--js-gradient-teal-reversed);
}

/* Sections Media Queries
================================================================ */
@media (max-width: 575px) {
  .js-section__title,
  .js-section__title > span {
    font-size: calc(var(--font-base-size) * 3);
  }

  .js-section__title--large,
  .js-section__title--large > span {
    font-size: calc(var(--font-base-size) * 4);
  }

  .js-section__title br {
    display: none !important;
  }

  .js-section__text {
    font-size: calc(var(--font-base-size) * 1);
  }

  .js-section__text--small {
    font-size: calc(var(--font-base-size) * 0.75);
    line-height: calc(var(--font-base-line-height) * 0.75);
  }

  .js-section__subtitle {
    font-size: calc(var(--font-base-size) * 0.875);
  }
}

@media (min-width: 576px) {
  .js-section__title,
  .js-section__title > span {
    font-size: calc(var(--font-base-size) * 3.5);
  }

  .js-section__title--large,
  .js-section__title--large > span {
    font-size: calc(var(--font-base-size) * 4.5);
  }

  .js-section__text {
    font-size: calc(var(--font-base-size) * 1.25);
  }

  .js-section__text--small {
    font-size: calc(var(--font-base-size) * 0.875);
    line-height: calc(var(--font-base-line-height) * 0.875);
  }

  .js-section__subtitle {
    font-size: calc(var(--font-base-size) * 1);
  }
}

/* ================================================================
  HERO
================================================================ */
.js-hero,
.js-hero__content,
.js-hero__row {
  position: relative;
  min-height: 100vh;
}

.js-hero {
  padding-top: 0;
  padding-bottom: 0;
}

.js-hero__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--js-padding) * 1.25);
  opacity: 0;
  will-change: transform;
}

.js-hero__wrapper * {
  will-change: transform;
}

.js-hero__content {
  z-index: 3;
}

.js-hero__row {
  padding-top: calc(var(--js-padding) * 6);
  padding-bottom: calc(var(--js-padding) * 6);
  align-items: center;
  justify-content: center;
}

.js-hero__overlay,
.js-hero__video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.js-hero__overlay {
  z-index: 2;
  background: var(--color-background);
  background: linear-gradient(0deg, var(--color-background-op4) 70%, var(--color-background-op9) 100%);
  /* opacity: 0.4; */
}

.js-hero__video {
  z-index: 1;
  object-fit: cover;
  object-position: center center;
}

/* Styles for GSAP line elements */
.js-hero .js-section__title, 
.js-hero .js-section__text {
  margin-bottom: calc(var(--js-padding) * 1.5);
}

.js-hero .line:has(.js-section__title + .js-section__title) .js-section__title:not(:last-child),
.js-hero .line:has(.js-section__text + .js-section__text) .js-section__text:not(:last-child) {
  margin-bottom: 0 !important;
}

.js-hero .button--main {
  margin: 0 auto;
}


/* ================================================================
  PARTNERS
================================================================ */
.js-partners {
  --js-partners-gap: calc(var(--js-padding) * 4);
  --js-partners-duration: 15s;
  /* --js-partners-direction: reverse; */
  --js-partners-direction: normal;
  --js-partners-scroll-start: 0;
  --js-partners-scroll-end: calc(-100% - var(--js-partners-gap));

  padding-top: calc(var(--js-padding) * 4.5);
  padding-bottom: calc(var(--js-padding) * 3);
}

.js-partners__container {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  margin: auto;
}

.js-partners__wrapper {
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
  user-select: none;
}

.js-partners[data-show-mask="true"] .js-partners__wrapper {
  mask-image: linear-gradient(to right, hsl(0deg 0% 0% / 0%), hsl(0deg 0% 0% / 100%) 20%, hsl(0deg 0% 0% / 100%) 80%, hsl(0deg 0% 0% / 0%));
}

.js-partners__wrapper.is-ready .js-partners__group {
  animation-play-state: running;
}

.js-partners[data-pause-hover="true"] .js-partners__wrapper.is-ready:hover .js-partners__group {
  animation-play-state: paused;
}

.js-partners__wrapper,
.js-partners__group,
.js-partners__item {
  gap: var(--js-partners-gap);
}

.js-partners__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  animation: jsPartnersScroll var(--js-partners-duration) linear infinite;
  animation-delay: -3s;
  animation-direction: var(--js-partners-direction);
  animation-play-state: paused;
  will-change: transform;
}

.js-partners__block {
  position: relative;
  display: flex;
}

.js-partners__logo {
  min-width: 140px;
  width: auto;
  height: auto;
  display: block;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .js-partners[data-pause-hover="true"] .js-partners__wrapper.is-ready:hover .js-partners__group {
    animation-play-state: paused;
  }
}

/* JS Partners animation */
@keyframes jsPartnersScroll {
  from {
    transform: translateX(var(--js-partners-scroll-start));
  }

  to {
    transform: translateX(var(--js-partners-scroll-end));
  }
}


/* ================================================================
  CARDS
================================================================ */
.js-cards {
  padding-top: calc(var(--js-padding) * 4);
}

.js-cards__block {
  padding-right: var(--js-padding);
  padding-left: var(--js-padding);
}

.js-cards__wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-main-op1);
  background: var(--color-main-op05);
  backdrop-filter: blur(8px);
  border-radius: var(--js-radius-md);
  overflow: hidden;
  transition: var(--js-transition);
}

.js-cards__wrapper--bright {
  background: var(--color-main-op1);
}

.js-cards__block:hover .js-cards__wrapper {
  border-color: var(--color-main-op2);
  background: var(--color-background-op1);
}

.js-cards__gallery {
  width: 100%;
  min-height: 200px;
  padding: calc(var(--js-padding) * 1.5) calc(var(--js-padding) * 1.5) 0;
}

.js-cards__video,
.js-cards__image {
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: var(--js-radius-sm) var(--js-radius-sm) 0 0;
}

.js-cards__content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding));
  padding: calc(var(--js-padding) * 1.5);
}

.js-cards__gallery + .js-cards__content {
  border-top: 1px solid var(--color-main-op1);
  /* background: var(--color-background-op3); */
}

.js-cards__icon {
  width: calc(var(--js-padding) * 5.25);
  height: calc(var(--js-padding) * 5.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--font-base-size) * 1.875);
  background: var(--color-main);
  color: var(--color-background);
  border-radius: var(--js-radius-sm);
  margin-bottom: calc(var(--js-padding) * 0.5);
  transition: var(--js-transition);
}

.js-cards__block:hover .js-cards__icon {
  background: var(--js-color-purple-light);
  color: var(--color-main);
}

.js-cards__title {
  font-size: calc(var(--font-base-size) * 1.875);
  font-weight: 400;
}

.js-cards__text {
  font-size: calc(var(--font-base-size) * 1);
  opacity: 0.7;
}

/* ================================================================
  THEME GALLERY
================================================================ */
#js-gallery {
  overflow: hidden;
  position: relative;
}

#js-gallery .js-section__content {
  padding-bottom: calc(var(--js-padding) * 5);
}

.js-gallery__container,
.js-gallery__wrapper,
.js-gallery__row {
  display: flex;
  gap: calc(var(--js-padding) * 2);
}

.js-gallery__container {
  flex-direction: column;
  min-width: 100vw;
  margin-left: var(--js-margin);
  padding-top: calc(var(--js-padding) * 5);
  padding-left: 0;
  padding-right: 0;
}

.js-gallery__wrapper,
.js-gallery__row {
  align-items: flex-start;
  flex-wrap: nowrap;
  will-change: transform;
  position: relative;
}

.js-gallery__wrapper {
  min-width: auto;
  margin-left: var(--js-margin);
  margin-right: var(--js-margin);
  flex-direction: column;
}

.js-gallery__row {
  flex-direction: row;
}

.js-gallery__block {
  display: block;
  box-sizing: content-box;
  overflow: hidden;
  border-radius: var(--js-radius-md);
}

.js-gallery__image {
  width: 100%;
}

/* Theme Gallery Media Queries */
@media (max-width: 575px) {
  .js-gallery__block {
    width: 70vw;
  }
}

@media (min-width: 576px) {
  .js-gallery__block {
    width: 40vw;
  }
}

/* ================================================================
  SIGNUP FORM
================================================================ */
.js-signup {
  width: 100%;
  height: calc(var(--js-padding) * 4.5);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--js-radius-md);
  box-shadow: 0 0 40px transparent;
  transition: var(--js-transition);
  gap: 0;
}

.js-signup:has(.js-signup__input:focus) {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.75);
}

.js-signup__input {
  font-size: calc(var(--font-base-size) * 1.125);
  padding: calc(var(--js-padding) * 1.25);
  width: 100%;
  border-radius: var(--js-radius-md) 0 0 var(--js-radius-md);
  border: none !important;
}

.js-signup__button {
  min-width: fit-content;
  font-size: calc(var(--font-base-size) * 1.125);
  border-radius: 0 var(--js-radius-md) var(--js-radius-md) 0;
}

/* ================================================================
  SIGNUP MODAL
================================================================ */
.signup-modal {
  background: var(--color-background);
}

.signup-modal__close {
  background: transparent !important;
  color: var(--color-main) !important;
  padding: calc(var(--js-padding) * 0.75);
  font-size: calc(var(--font-base-size) * 1.25);
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  opacity: 0.7;
}

.signup-modal__close:hover {
  opacity: 1;
}

/* Signup Modal > Header 
================================================================ */
.signup-modal__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: calc(var(--js-padding) * 1.25);
  padding-top: calc(var(--js-padding) * 4.25);
  padding-bottom: calc(var(--js-padding) * 2.25);
}

.signup-modal__logo {
  width: auto;
  height: calc(var(--js-padding) * 2.5);
  margin-bottom: calc(var(--js-padding) * 1.875);
  object-fit: contain;
  object-position: center left;
}

.signup-modal__title {
  font-size: calc(var(--font-base-size) * 2.25);
}

.signup-modal__text {
  font-size: calc(var(--font-base-size) * 0.875);
}


/* ================================================================
  OVERRIDES FOR createStoreModal
================================================================ */
.landing-2026 #createStoreModal .modal-content {
  background: var(--color-background) !important;
}

.landing-2026 #createStoreModal #create-store-modal-close {
  font-size: calc(var(--font-base-size) * 0.75) !important;
  margin: 0 !important;
  padding: calc(var(--js-padding) * 1.25);
}

.landing-2026 h2#createStoreModal {
  font-family: var(--font-main) !important;
  color: var(--color-main) !important;
  margin-bottom: calc(var(--js-padding) * 0.5);
  background: transparent !important;
}

.landing-2026 #create-store-modal-sublabel {
  font-size: calc(var(--font-base-size) * 1) !important;
}

.landing-2026 #createStoreModal .form-label {
  font-size: calc(var(--font-base-size) * 0.875) !important;
  margin-bottom: calc(var(--js-padding) * 0.5) !important;
  font-weight: 600;
  cursor: pointer !important;
}

.landing-2026 #createStoreModal .form-control {
  font-family: var(--font-secondary) !important;
  color: var(--color-main) !important;
  font-size: calc(var(--font-base-size) * 0.9375) !important;
  padding: calc(var(--js-padding) * 0.875) calc(var(--js-padding) * 1.25) !important;
  border-radius: var(--js-radius-sm) !important;
  border-color: var(--color-main-op1) !important;
}

.landing-2026 #createStoreModal .form-label:hover + .form-control,
.landing-2026 #createStoreModal .form-label:hover + #country-form #country_selector {
  border-color: var(--color-main-op3) !important;
}

.landing-2026 #createStoreModal #country_selector.form-control {
  padding-left: calc(var(--js-padding) * 5) !important;
}

.landing-2026 #createStoreModal #create-store-modal-form-submit {
  font-size: calc(var(--font-base-size)) !important;
  font-family: var(--font-button) !important;
  background: var(--color-button-main-bg);
  border-color: var(--color-button-main-bg);
  border-radius: var(--js-radius-sm) !important;
  color: var(--color-button-main-text) !important;
  padding: calc(var(--js-padding) * 0.75) calc(var(--js-padding)) !important;
}

.landing-2026 #createStoreModal #create-store-modal-form-submit:is(:hover, :focus) {
  background: var(--color-button-main-bg-hover);
  border-color: var(--color-button-main-bg-hover);
  color: var(--color-button-main-text-hover) !important;
}

.landing-2026 #createStoreModal #create-store-modal-form-login .text-secondary {
  font-size: calc(var(--font-base-size) * 0.875) !important;
  font-family: var(--font-secondary);
  color: var(--color-secondary) !important;
}

.landing-2026 #createStoreModal #create-store-modal-form-login a.text-secondary:is(:hover, :focus) {
  color: var(--color-accent) !important;
}

/* Card illustration */
.landing-2026 #createStoreModal #create-store-modal-card {
  background: var(--color-background);
  border-radius: var(--js-radius-lg);
  gap: calc(var(--js-padding) * 1.5) !important;
  padding: calc(var(--js-padding) * 2.5) !important;
}

.landing-2026 #createStoreModal #create-store-modal-card-image {
  border-radius: var(--js-radius-md);
  width: calc(var(--js-padding) * 16);
  height: calc(var(--js-padding) * 16);
  overflow: hidden;
}

.landing-2026 #createStoreModal #create-store-modal-card-description {
  gap: calc(var(--js-padding) * 0.5);
}

.landing-2026 #createStoreModal #create-store-modal-card-description .animate-shimmer {
  background: var(--color-main-op5);
  height: calc(var(--js-padding) * 0.5);
}

.landing-2026 #createStoreModal #create-store-modal-card-button {
  background: var(--color-main-op7);
  color: var(--color-background);
  height: auto;
  width: 100%;
  font-size: calc(var(--font-base-size) * 1);
  padding: calc(var(--js-padding) * 0.75);
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes shimmer {
  from {
    background-position: -468px 0;
  }

  to {
    background-position: 468px 0;
  }
}

.landing-2026 #createStoreModal .animate-fadeIn {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.landing-2026 #createStoreModal .animate-shimmer {
  background: linear-gradient(to right, var(--color-main-op7) 8%, var(--color-main-op3) 18%, var(--color-main-op7) 33%);
  background-size: 800px 104px;
  animation: shimmer 2s infinite linear;
}


/* ================================================================
  ANIMATIONS FOR SECTIONS
================================================================ */
/* Features
================================================================ */
.js-features :is(.js-section__content, .js-cards__block, .js-section__actions) {
  opacity: 0;
  will-change: transform, opacity;
}

.js-features .js-section__content {
  transform: translate(0px, -80px);
}

.js-features .js-cards__block:nth-child(1),
.js-features .js-cards__block:nth-child(3),
.js-features .js-cards__block:nth-child(5) {
  transform: translate(-160px, 0px);
}

.js-features .js-cards__block:nth-child(2),
.js-features .js-cards__block:nth-child(4),
.js-features .js-cards__block:nth-child(6) {
  transform: translate(160px, 0px);
}

.js-features .js-section__actions {
  transform: translate(0px, 80px);
}

/* AI Tools 
================================================================ */
.js-ai-tools :is(.js-section__content, .js-cards__block, .js-section__actions) {
  opacity: 0;
  will-change: transform, opacity;
}

.js-ai-tools .js-section__content {
  transform: translate(0px, -80px);
}

.js-ai-tools .js-cards__block:nth-child(1) {
  transform: translate(-160px, 0px);
}

.js-ai-tools .js-cards__block:nth-child(3) {
  transform: translate(160px, 0px);
}

.js-ai-tools .js-section__actions {
  transform: translate(0px, 80px);
}

/* Gallery
================================================================ */
#js-gallery .js-section__content {
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(0px, -80px);
}

/* Signup
================================================================ */
#js-signup-form :is(.js-section__content, .js-signup) {
  opacity: 0;
  will-change: transform, opacity;
}

#js-signup-form .js-section__content {
  transform: translate(0px, -80px);
}

#js-signup-form .js-signup {
  transform: translate(0px, 40px);
}