/* Welcome to Codeium Editor!
Press Enter and use Tab to accept AI suggestions. Here's an example:*/

/* .action-button class with a hover effect. */

@media (prefers-reduced-motion: no-preference) {
  .transition_wrap {
    display: flex;
  }
}

/* Gradient reveal initial state - hide gradient layer chars until animated */
[data-gradient-reveal="gradient"]>span,
[data-gradient-reveal="gradient"] .fmtion-char {
  opacity: 0;
}

:root {
  --grid-breakout: [full-start] minmax(0, 1fr) [content-start] repeat(var(--site--column-count),
      minmax(0, var(--site--column-width))) [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: [full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - var(--site--margin) * 2)) [content-end] minmax(0, 1fr) [full-end];
}

::before,
::after {
  box-sizing: border-box;
}

.w-embed:before,
.w-embed:after,
.w-richtext:before,
.w-richtext:after {
  content: unset;
}

html {
  background-color: var(--_theme---background);
}

button {
  background-color: unset;
  padding: unset;
  text-align: inherit;
}

button:not(:disabled) {
  cursor: pointer;
}

video {
  width: 100%;
  object-fit: cover;
}

/* remove padding of empty element */
.wf-empty {
  padding: 0;
}

svg {
  max-width: 100%;
}

@media (prefers-color-scheme: light) {
  option {
    color: black;
  }
}

img::selection {
  background: transparent;
}

/* Typography */
body {
  text-transform: var(--_text-style---text-transform);
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}

/* Clear Defaults */
a:not([class]) {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-wrap: inherit;
  margin-top: 0;
  margin-bottom: 0;
}

select:has(option[value=""]:checked) {
  color: color-mix(in lab, currentcolor 60%, transparent);
}

/* Selection Color */
::selection {
  background-color: var(--_theme---selection--background);
  color: var(--_theme---selection--text);
}

/* Margin Trim */
:is(.u-margin-trim, .u-rich-text)> :not( :not(.w-condition-invisible, .u-cover-absolute, .u-ignore-trim) ~ :not(.w-condition-invisible,
    .u-cover-absolute,
    .u-ignore-trim)),
:is(.u-margin-trim, .u-rich-text)> :not( :not(.w-condition-invisible, .u-cover-absolute, .u-ignore-trim) ~ :not(.w-condition-invisible,
    .u-cover-absolute,
    .u-ignore-trim)).u-display-contents> :first-child {
  margin-top: 0;
}

:is(.u-margin-trim, .u-rich-text)> :not( :has(~ :not(.w-condition-invisible,
      .u-cover-absolute,
      .u-ignore-trim))),
:is(.u-margin-trim, .u-rich-text)> :not( :has(~ :not(.w-condition-invisible,
      .u-cover-absolute,
      .u-ignore-trim))).u-display-contents> :last-child {
  margin-bottom: 0;
}

/* Line Height Trim */
:is(h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off,
  :has([class*="u-text-style-"]))::before,
[class*="u-text-style-"]:not(.u-text-trim-off,
  :has(h1, h2, h3, h4, h5, h6, p))::before {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + var(--_text-style---trim-top));
}

:is(h1, h2, h3, h4, h5, h6, p):not(.u-text-trim-off,
  :has([class*="u-text-style-"]))::after,
[class*="u-text-style-"]:not(.u-text-trim-off,
  :has(h1, h2, h3, h4, h5, h6, p))::after {
  content: "";
  display: table;
  margin-bottom: calc(-0.5lh + var(--_text-style---trim-bottom));
}

/* Rich Text Links */
.w-richtext a {
  position: relative;
  z-index: 4;
}

/* Line Clamp */
.u-line-clamp-1,
.u-line-clamp-2,
.u-line-clamp-3,
.u-line-clamp-4 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.u-line-clamp-2 {
  -webkit-line-clamp: 2;
}

.u-line-clamp-3 {
  -webkit-line-clamp: 3;
}

.u-line-clamp-4 {
  -webkit-line-clamp: 4;
}

/* Child Contain */
.u-child-contain>* {
  width: 100%;
  max-width: inherit !important;
  margin-inline: 0 !important;
  margin-top: 0 !important;
}

/* Hide */
.u-hide-if-empty:empty,
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
.u-embed-js,
.u-embed-css {
  display: none !important;
}

/* Focus State */
a,
button,
:where([tabindex]),
[data-outline],
input {
  outline-offset: var(--focus--offset-outer);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline-color: var(--_theme---text);
  outline-width: var(--focus--width);
  outline-style: solid;
}

/* Disabled */
[data-button]:has(button:disabled) {
  opacity: 0.5;
  pointer-events: none;
}

/* Global / Clickable Component */
.wf-design-mode .clickable_wrap {
  z-index: 0;
}

.clickable_wrap a[href="#"] {
  display: none;
}

.clickable_wrap a[href="#"]~button {
  display: block;
}

/* Responsive Above */
@container threshold-large (width >=62em) {
  .u-order-unset-above {
    order: unset !important;
  }

  .u-all-unset-above {
    all: unset !important;
  }

  .u-grid-below {
    display: flex !important;
  }
}

@container threshold-medium (width >=48em) {
  .u-order-unset-above {
    order: unset !important;
  }

  .u-all-unset-above {
    all: unset !important;
  }

  .u-grid-below {
    display: flex !important;
  }
}

@container threshold-small (width >=30em) {
  .u-order-unset-above {
    order: unset !important;
  }

  .u-all-unset-above {
    all: unset !important;
  }

  .u-grid-below {
    display: flex !important;
  }
}

/* Responsive Below */
@container threshold-large (width < 62em) {
  .u-order-unset-below {
    order: unset !important;
  }

  .u-all-unset-below {
    all: unset !important;
  }

  .u-grid-above {
    display: flex !important;
  }
}

@container threshold-medium (width < 48em) {
  .u-order-unset-below {
    order: unset !important;
  }

  .u-all-unset-below {
    all: unset !important;
  }

  .u-grid-above {
    display: flex !important;
  }
}

@container threshold-small (width < 30em) {
  .u-order-unset-below {
    order: unset !important;
  }

  .u-all-unset-below {
    all: unset !important;
  }

  .u-grid-above {
    display: flex !important;
  }
}

/* State Manager */
[data-state] {
  --_state---true: 1;
  --_state---false: 0;
}

.is-active,
[data-state~="checked"]:is(:checked, :has(:checked)),
[data-state~="current"]:is(.w--current, :has(.w--current)),
[data-state~="open"]:is(.w--open, :has(.w--open)),
[data-state~="pressed"]:is([aria-pressed="true"],
  :has([aria-pressed="true"])),
[data-state~="expanded"]:is([aria-expanded="true"],
  :has([aria-expanded="true"])),
[data-state~="external"]:is([target="_blank"],
  :has([target="_blank"])) {
  --_state---true: 0;
  --_state---false: 1;
}

.wf-design-mode [data-trigger~="preview"],
[data-trigger~="focus"]:is(:focus-visible, :has(:focus-visible)),
[data-trigger~="group"]:has([data-trigger~="focus-other"]:focus-visible,
  [data-trigger~="focus-other"] :focus-visible) [data-trigger~="focus-other"]:not( :focus-visible,
  :has(:focus-visible)) {
  --_trigger---on: 0;
  --_trigger---off: 1;
}

@media (hover: hover) {

  [data-trigger~="hover"]:hover,
  [data-trigger~="hover-if-clickable"]:has(.clickable_wrap:not(.w-condition-invisible)):hover,
  [data-trigger~="group"]:has([data-trigger~="hover-other"]:hover) [data-trigger~="hover-other"]:not(:hover) {
    --_trigger---on: 0;
    --_trigger---off: 1;
  }

  [data-trigger~="hover-other"]:hover {
    --_trigger---on: 1 !important;
    --_trigger---off: 0 !important;
  }
}

@media (hover: none) {
  [data-trigger~="mobile"] {
    --_trigger---on: 0;
    --_trigger---off: 1;
  }
}

/* Slot Styler */
[data-slot]>.w-dyn-list,
[data-slot]>.w-dyn-list>*,
[data-slot]>.w-dyn-list>*>*,
[data-slot]>.u-display-contents>.w-dyn-list,
[data-slot]>.u-display-contents>.w-dyn-list>*,
[data-slot]>.u-display-contents>.w-dyn-list>*>*,
[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list,
[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list>*,
[data-slot]>.u-display-contents>.u-display-contents>.w-dyn-list>*>* {
  display: contents;
}

/* Gradient Accent */
.u-heading-accent strong,
.u-heading-accent b {
  background: linear-gradient(45deg,
      var(--swatch--green),
      var(--swatch--gold),
      var(--swatch--coral));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-animation: GradientAnimation 5s ease infinite;
  -moz-animation: GradientAnimation 5s ease infinite;
  animation: GradientAnimation 5s ease infinite;
}

/* Gradient Background - add your data attribute name */
[data-gradient-bg] {
  background: linear-gradient(300deg,
      var(--swatch--green),
      var(--swatch--gold),
      var(--swatch--coral));
  background-size: 180% 180%;
  -webkit-animation: GradientAnimation 10s ease infinite;
  -moz-animation: GradientAnimation 10s ease infinite;
  animation: GradientAnimation 10s ease infinite;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {

  .u-heading-accent strong,
  .u-heading-accent b {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background-size: 100% 100%;
  }

  [data-gradient-bg] {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background-size: 100% 100%;
  }
}

@-webkit-keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes GradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Shadow */
[data-shadow] {
  box-shadow: rgb(from var(--_theme---shadow) r g b / 0.02) 0 0.25em 0.5em 0,
    rgb(from var(--_theme---shadow) r g b / 0.03) 0 0.5em 0.75em 0,
    rgb(from var(--_theme---shadow) r g b / 0.04) 0 0.75em 1em 0,
    rgb(from var(--_theme---shadow) r g b / 0.04) 0 1em 1.5em 0;
}

html.wf-design-mode .guide_wrap {
  display: block;
}

.guide_layout {
  counter-reset: gridguides;
}

.guide_layout>div::before {
  counter-increment: gridguides;
  content: counter(gridguides);
}

@container (min-width: 40em) {
  .nav_desktop_wrap {
    display: block;
  }

  .nav_desktop_wrap:not(.w-condition-invisible)~.nav_mobile_wrap,
  .nav_desktop_wrap:not(.w-condition-invisible)~.nav_menu_backdrop {
    display: none;
  }
}

body:has([data-tooltip]:hover) .tooltip {
  opacity: 1;
}

[data-transition-wrap] {
  display: none !important;
}

.button_menu_icon_line {
  transition: transform 0.3s ease-in-out;
}

.button_menu_wrap.is-active .button_menu_icon_line:first-child {
  transform: translateY(0.175rem) rotate(45deg);
}

.button_menu_wrap.is-active .button_menu_icon_line:last-child {
  transform: translateY(-0.175rem) rotate(-45deg);
}

.modal_dialog::backdrop {
  opacity: 0;
}

.wf-design-mode [data-show-in-designer="true"] {
  display: block;
}

@container (width < 40em) {
  .form_fieldset_list:has(.form_fieldset_list) {
    display: flex;
  }
}

@container (width < 18em) {
  .form_fieldset_list {
    display: flex;
  }
}

@container (width >=65em) {
  .hero_home_layout {
    gap: 6rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_home_trigger.is-1 {
    height: 100% !important;
  }

  .hero_home_trigger.is-2 {
    display: none !important;
  }

  .hero_home_wrap {
    height: 100vh !important;
  }
}

.wf-design-mode .hero_home_wrap {
  height: 100vh !important;
}

.is-merchant {
  clip-path: polygon(0.75rem 0%,
      calc(100% - 0.75rem) 0%,
      100% 50%,
      calc(100% - 0.75rem) 100%,
      0.75rem 100%,
      0% 50%);
}

.is-studio {
  clip-path: polygon(0% calc(0% + 0.4375rem),
      calc(0% + 0.4375rem) calc(0% + 0.4375rem),
      calc(0% + 0.4375rem) 0%,
      calc(100% - 0.4375rem) 0%,
      calc(100% - 0.4375rem) calc(0% + 0.4375rem),
      100% calc(0% + 0.4375rem),
      100% calc(100% - 0.4375rem),
      calc(100% - 0.4375rem) calc(100% - 0.4375rem),
      calc(100% - 0.4375rem) 100%,
      calc(0% + 0.4375rem) 100%,
      calc(0% + 0.4375rem) calc(100% - 0.4375rem),
      0% calc(100% - 0.4375rem));
}

.is-gamer {
  border-radius: 0.25rem;
}

.product_lifestyle_wrap.is-right {
  inset: auto -14% 20% auto;
}

#canvas-target canvas {
  position: relative;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  max-width: unset;
  pointer-events: all;
  max-width: calc(100% + 2px);
  max-height: calc(100% + 2px);
  min-width: calc(100% + 2px);
  min-height: calc(100% + 2px);
}

[data-credit-modal] {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.5s;
}

[data-credit-modal].is-open {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}
/* Fix: headings inside .c-heading should inherit font-size from parent */
.c-heading h1,
.c-heading h2,
.c-heading h3,
.c-heading h4,
.c-heading h5,
.c-heading h6 {
  font-size: inherit;
  line-height: inherit;
}