/* Component button */
.t-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: unset;
  border: none;
  padding: 0;
}

.button--tertiary {
  --color-primary-button-background: var(--color-secondary-button-background);
  --color-primary-button-text: var(--color-secondary-button-text);
  font-size: var(--font-size--2xs);
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--style-border-width-secondary) * 2);
  min-height: calc(3.5rem + var(--style-border-width-secondary) * 2);
}

.shopify-payment-button__button--branded {
  z-index: auto;
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem var(--color-foreground),
    0 0 0 0.5rem rgb(var(--color-foreground-rgb) / var(--opacity-50)),
    0 0 0.5rem 0.4rem rgb(var(--color-foreground-rgb) / var(--opacity-30));
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgb(var(--color-primary-button-text-rgb) / var(--opacity-30));
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: var(--font-size--md);
  letter-spacing: 0.1rem;
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */
shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) var(--color-shadow);
}

shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) var(--color-shadow);
}

.button.is-active {
  color: var(--color-primary-button-background);
  background-color: var(--color-primary-button-text);
}

.button[disabled],
button.shopify-payment-button__button--unbranded[disabled],
.button[aria-disabled="true"],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled="true"],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: var(--opacity-50);
}

.button.loading,
.button-secondary.loading {
  --color-secondary-button-background: transparent;
  --color-secondary-button-hover-background: transparent;
  --color-primary-button-background: transparent;
  --color-primary-button-hover-background: transparent;
  color: transparent;
  position: relative;
  pointer-events: none;

  > .loading__spinner {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;

    .spinner {
      width: fit-content;
    }

    .path {
      stroke: var(--color-primary-button-text);
    }
  }
}

@media screen and (forced-colors: active) {
  .button.loading,
  .button-secondary.loading {
    color: var(--color-foreground);
  }
}

.button,
.button-secondary,
.shopify-challenge__button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --text-align: center;
  display: inline-grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background: var(--button-background-color);
  background-origin: border-box;
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  font-family: var(--button-font-family, var(--font-paragraph--family));
  font-style: var(--font-paragraph--style);
  font-size: var(--button-font-size, var(--font-size--paragraph-md));
  font-weight: var(--button-font-weight, var(--font-paragraph--weight));
  text-transform: var(--button-text-case, var(--font-paragraph--case));
  line-height: var(--button-font-line-height, var(--font-paragraph--line-height));
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) var(--color-shadow);
  padding-block: var(--button-padding-vertical-mobile, var(--button-padding-vertical));
  padding-inline: var(--button-padding-horizontal-mobile, var(--button-padding-horizontal));

  @media screen and (max-width: 749px) {
    font-size: min(var(--button-font-size, var(--font-size--paragraph-md)), var(--font-size--2xl));
  }
}

.button.w-full,
.button-secondary.w-full,
.shopify-challenge__button.w-full,
button.shopify-payment-button__button--unbranded.w-full {
  width: 100%;
}

@media (min-width: 750px) {
  .button,
  .button-secondary,
  .shopify-challenge__button,
  button.shopify-payment-button__button--unbranded {
    padding-block: var(--button-padding-vertical);
    padding-inline: var(--button-padding-horizontal);
  }
}

.button--full-width {
  width: 100%;
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-background-color);
}

.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: var(--opacity-50);
  cursor: not-allowed;
}

.button,
.shopify-challenge__button,
button.shopify-payment-button__button--unbranded {
  --button-font-family: var(--button-font-family-primary);
  --button-font-size: var(--button-font-size-primary);
  --button-font-weight: var(--button-font-weight-primary);
  --button-text-case: var(--button-text-case-primary);
  --button-border-radius: var(--style-border-radius-buttons-primary);
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
}

@media (hover: hover) {
  .button:hover:not([disabled]):not(.button-unstyled),
  .shopify-challenge__button:hover:not([disabled]):not(.button-unstyled),
  button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
    --shadow-horizontal-offset: 0;
    --shadow-vertical-offset: 0;
    --button-color: var(--color-primary-button-hover-text);
    --button-background-color: var(--color-primary-button-hover-background);
    --button-border-color: var(--color-primary-button-hover-border);

    svg {
      color: var(--color-primary-button-hover-text);
      fill: var(--color-primary-button-hover-text);
    }

    .path {
      stroke: var(--color-primary-button-hover-text);
    }
  }
}

.button-secondary {
  --button-font-family: var(--button-font-family-secondary);
  --button-font-size: var(--button-font-size-secondary);
  --button-font-weight: var(--button-font-weight-secondary);
  --button-text-case: var(--button-text-case-secondary);
  --button-border-radius: var(--style-border-radius-buttons-secondary);
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

@media (hover: hover) {
  .button-secondary:hover {
    --shadow-horizontal-offset: 0;
    --shadow-vertical-offset: 0;
    --button-color: var(--color-secondary-button-hover-text);
    --button-background-color: var(--color-secondary-button-hover-background);
    --button-border-color: var(--color-secondary-button-hover-border);
  }

  .shopify-challenge__button:hover:not([disabled]),
  button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
    background: var(--button-background-color);
  }
}

.button-unstyled {
  display: block;
  padding: 0;
  background: inherit;
  color: inherit;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

@media (hover: hover) {
  .button-unstyled:hover {
    background: inherit;
  }
}

.button.button-unstyled:active {
  transform: none;
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background: transparent;
  box-shadow: none;
}

.button.size-style {
  height: auto;
}

.button.button--outline,
.button-secondary.button--outline {
  --border-outline-color: var(--button-color);
  background-color: transparent;
  border: 1px solid var(--border-outline-color);
}

.button.button--brand-accent,
.button-secondary.button--brand-accent {
  --button-color: var(--color-white);
  --button-background-color: var(--color-brand-orange);
  --button-border-color: var(--color-brand-orange);
  --color-effect-background: var(--color-brand-black);
}

@media (hover: hover) {
  .button.button--brand-accent:hover:not([disabled]),
  .button-secondary.button--brand-accent:hover:not([disabled]) {
    --shadow-horizontal-offset: 0;
    --shadow-vertical-offset: 0;
    --button-color: var(--color-white);
    --button-background-color: var(--color-brand-black);
    --button-border-color: var(--color-brand-black);
  }
}

.button:not(.button-unstyled) {
  --color-effect-background: var(--color-primary-button-hover-background);
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing),
    transform var(--animation-speed) var(--animation-easing);

  &:not(.deferred-media__poster, .prevent-active, .search-block__button):active {
    transform: scale(0.9);
  }
}

.button-hover--effect .button-secondary:not(.button-unstyled, .header__icon, [disabled]) {
  --color-effect-background: var(--color-secondary-button-hover-background);
}

.button-hover--effect .button:not(.button-unstyled, .header__icon, .button--outline) {
  background-color: var(--color-primary-button-background);
}

.button-hover--effect .button-secondary:not(.button-unstyled, .header__icon, .button--outline) {
  background-color: var(--color-secondary-button-background);
}

.button-hover--effect .button.button--brand-accent,
.button-hover--effect .button-secondary.button--brand-accent {
  --color-effect-background: var(--color-brand-black);
  background-color: var(--color-brand-orange);
}

.button-hover--effect .button-secondary:not(.button-unstyled, .header__icon, [disabled]),
.button-hover--effect .button:not(.button-unstyled, .header__icon, [disabled]) {
  --tss: transform var(--animation-slowest-smooth), opacity var(--animation-slowest-smooth);
  position: relative;
  overflow: hidden;
  isolation: isolate;

  .button-text-main {
    transition: var(--tss);
  }

  .button-overflow {
    &:after {
      content: attr(data-button-text);
      transform: translateY(100%);
      transition: var(--tss);
      display: inline-block;
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      height: 100%;
      width: 100%;
    }
  }

  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: calc(100% + (max(0.2rem, var(--button-border-width)) * 2));
    background-color: var(--color-effect-background);
    backface-visibility: hidden;
    will-change: transform;
    transform: translate(-50%, -50%) rotate3d(0, 0, 2, 20deg) translate3d(-1.2em, 105%, 0);
    transform-origin: 0% 100%;
    transition: var(--tss);
    z-index: -1;
  }

  &:hover {
    .button-overflow:after {
      transform: translateY(0);
    }

    .button-text-main {
      transform: translateY(-100%);
      opacity: 0;
    }

    &:after {
      transform: translate(-50%, -50%) rotate3d(0, 0, 1, 0) translate3d(0, 0, 0);
    }
  }
}

.link {
  cursor: pointer;
  height: auto;
  font-size: var(--button-font-size-link, var(--font-size--sm));
  font-weight: var(--button-font-weight-link, var(--font-body--weight));
  font-family: inherit;
  text-decoration: none;
  text-wrap: var(--text-wrap);
  text-transform: var(--text-transform);
  border: none;
  box-shadow: none;

  &[style*='--button-font-size-link'] {
    font-family: var(--button-type-font-link);
    font-size: var(--button-font-size-link);
  }

  @media screen and (min-width: 1025px) {
    &:hover {
      color: var(--color-primary-hover);
    }
  }
}

.link--text {
  color: var(--color-foreground);

  @media screen and (min-width: 1025px) {
    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-75));
    }
  }
}

.link--hover-underline .text,
.link--hover-underline:not(:has(.text)) {
  transition: background-size var(--animation-values-slow), opacity var(--animation-speed) var(--animation-delay, 0s) var(--animation-easing), color var(--animation-speed) var(--animation-delay, 0s) var(--animation-easing);
}

.link--underline:not(:has(.text)),
.link--underline .text,
.link--hover-underline .text,
.link--hover-underline:not(:has(.text)) {
  --line-link-gap: min(100%, 1.35em);
  text-decoration: none;
}

.link--underline:not(:has(.text)),
.link--underline .text {
  background: linear-gradient(to right, var(--link-underline-color, currentColor), var(--link-underline-color, currentColor)) 0 var(--line-link-gap) / 0 1px no-repeat;
  background-position-y: bottom;
  background-position-x: left;
  background-size: 100% 1px;
  transition: background-size var(--animation-values-slow), opacity var(--animation-speed) var(--animation-delay, 0s) var(--animation-easing), color var(--animation-speed) var(--animation-delay, 0s) var(--animation-easing);
}

.link--hover-underline .text,
.link--hover-underline:not(:has(.text)) {
  background: linear-gradient(to left, var(--link-underline-color, currentColor), var(--link-underline-color, currentColor)) 0 var(--line-link-gap) / 0 1px no-repeat;
  background-position-y: bottom;
  background-position-x: right;
  display: inline;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .instagram-item .link--reveal,
  .group-block-content .link--reveal {
    position: relative;
    overflow: hidden;
    display: inline-block;
    color: transparent !important;

    .text-mask {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color: var(--color-primary);
      transition: transform var(--animation-slowest-smooth);
      transform: translateY(100%);
    }
  }

  .group-block-content:hover .link--reveal .text-mask,
  .instagram-item:hover .link--reveal .text-mask {
    transform: translateY(0);
  }

  .group-block-content .link--reveal.link--underline,
  .instagram-item .link--reveal.link--underline {
    padding-bottom: var(--offset-underline);

    .text-mask {
      text-decoration: underline;
      text-underline-offset: var(--offset-underline);
    }
  }

  .link--hover-underline:hover .text,
  .link--hover-underline:not(:has(.text)):hover {
    background-position-x: left;
    background-size: 100% var(--link-underline-width, 1px);
  }

  .link--underline:hover .text,
  .link--underline:not(:has(.text)):hover {
    background-position-x: right;
    background-size: 0% var(--link-underline-width, 1px);
  }
}