[is=xo-lazyload],
.xo-background-lazyload,
.xo-lazyload,
.xo-lazyloaded {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
}
[is=xo-lazyload][style*="--fallback"],
.xo-background-lazyload[style*="--fallback"],
.xo-lazyload[style*="--fallback"],
.xo-lazyloaded[style*="--fallback"] {
  background-image: var(--fallback);
  background-size: cover;
}

.xo-background-lazyload {
  height: 100%;
}

[data-xo-lazyloaded] {
  position: relative;
  z-index: 1;
}

.xo-lazyload-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.xo-lazyload-overlay:empty {
  backdrop-filter: blur(30px);
  will-change: backdrop-filter;
}[xb-href], [xo-href] {
  cursor: pointer;
}xo-parallax-scroll[xo-keyframes*=groupImg] img {
  opacity: 1;
}
xo-parallax-scroll[xo-keyframes*=groupImg] img + img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}.xo-navigate-smooth {
  animation: xoNavigateSmooth both 0.3s ease;
}
@keyframes xoNavigateSmooth {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}xo-marquee {
  --xo-duration: 10000ms;
  display: flex;
  flex-wrap: nowrap;
  transform: translate3d(var(--xo-marquee-scroll, 0px), 0, 0);
}
xo-marquee[xo-rtl]:not([xo-rtl=false]) {
  direction: rtl;
}
xo-marquee[xo-pause-on-hover]:not([xo-pause-on-hover=false]):hover xo-marquee-item {
  animation-play-state: paused !important;
}
xo-marquee[xo-ready] xo-marquee-item {
  animation: xo-marquee var(--xo-marquee-duration) linear infinite;
}
@keyframes xo-marquee {
  0% {
    transform: translate3d(var(--xo-marquee-from), 0, 0);
  }
  100% {
    transform: translate3d(var(--xo-marquee-to), 0, 0);
  }
}

xo-marquee-item {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  will-change: transform;
}

xo-marquee-scroll-transform {
  display: block;
}xo-toggle {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: inherit;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  overflow: visible;
}
xo-toggle::backdrop {
  display: none;
}xo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: inherit;
}
xo-modal::backdrop {
  display: none;
}
xo-modal:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
xo-modal img {
  vertical-align: middle;
}
xo-modal xo-modal-trigger {
  display: inline-block;
}
xo-modal[xo-current-disabled]:not([xo-current-disabled=false]) {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  visibility: visible;
  overflow: visible;
  z-index: auto;
}
xo-modal[xo-current-disabled]:not([xo-current-disabled=false]) xo-modal-trigger {
  display: none;
}
xo-modal[xo-scroll-disabled]:not([xo-current-disabled=false]) {
  overflow: visible;
}
xo-modal xo-carousel-slide {
  pointer-events: none;
  visibility: hidden;
}
xo-modal[xo-active]:not([xo-active=false]) xo-carousel-slide {
  pointer-events: auto;
  visibility: visible;
}

xo-modal-trigger {
  display: inline-block;
}

xo-modal-pan {
  display: block;
  width: fit-content;
  overflow: hidden;
  touch-action: pinch-zoom;
}

body.xo-modal-open {
  overflow: hidden;
  padding-right: var(--scroll-bar-width);
}

xo-modal [xo-backdrop-cursor] {
  width: 100%;
  height: 100%;
  cursor: none;
}xo-scroll-x {
  display: block;
  position: relative;
  overflow: clip;
}
xo-scroll-x::part(inner) {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
xo-scroll-x xo-scroll-xy-item,
xo-scroll-x xo-scroll-x-item {
  display: block;
  height: 100%;
  overflow: hidden;
  z-index: 9;
}
xo-scroll-x xo-scroll-xy-item ~ xo-scroll-xy-item,
xo-scroll-x xo-scroll-xy-item ~ xo-scroll-x-item,
xo-scroll-x xo-scroll-x-item ~ xo-scroll-xy-item,
xo-scroll-x xo-scroll-x-item ~ xo-scroll-x-item {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
}xo-scroll-y {
  display: block;
  position: relative;
  overflow: clip;
}
xo-scroll-y::part(inner) {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
xo-scroll-y xo-scroll-xy-item,
xo-scroll-y xo-scroll-y-item {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 9;
}
xo-scroll-y xo-scroll-xy-item ~ xo-scroll-xy-item,
xo-scroll-y xo-scroll-xy-item ~ xo-scroll-y-item,
xo-scroll-y xo-scroll-y-item ~ xo-scroll-xy-item,
xo-scroll-y xo-scroll-y-item ~ xo-scroll-y-item {
  position: absolute;
  top: 100%;
  right: 0;
  height: 100%;
}xo-toast-portal {
  position: fixed;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  padding: 10px;
  max-width: none;
  max-height: none;
  border: 0 !important;
  margin: 0;
  background-color: transparent;
  color: inherit;
  inset: auto;
  pointer-events: none;
  overflow: visible;
}
xo-toast-portal * {
  pointer-events: auto;
}
xo-toast-portal[xo-placement^=top-] {
  top: 0;
}
xo-toast-portal[xo-placement^=bottom-] {
  bottom: 0;
}
xo-toast-portal[xo-placement$=-left] {
  left: 0;
}
xo-toast-portal[xo-placement$=-center] {
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
xo-toast-portal[xo-placement$=-right] {
  right: 0;
  align-items: flex-end;
}
xo-toast-portal xo-toast {
  display: inline-block;
  width: fit-content;
  max-width: calc(100vw - 20px);
}

xo-toast {
  position: relative;
  display: none;
}

xo-toast-close-button {
  position: absolute;
  padding: 8px;
  cursor: pointer;
  color: #b9b9b9;
  display: flex;
  align-items: center;
}
xo-toast-close-button[xo-placement^=top-] {
  top: 0;
}
xo-toast-close-button[xo-placement^=bottom-] {
  bottom: 0;
}
xo-toast-close-button[xo-placement$=-left] {
  left: 0;
}
xo-toast-close-button[xo-placement^=center-] {
  top: 50%;
  transform: translateY(-50%);
}
xo-toast-close-button[xo-placement$=-right] {
  right: 0;
}
xo-toast-close-button[xo-placement=top] {
  top: 0;
}
xo-toast-close-button svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
}xo-popover {
  position: fixed;
  z-index: 99;
  display: block;
  width: fit-content;
  visibility: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  background-color: transparent;
  overflow: visible;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}
xo-popover::backdrop {
  display: none;
}
xo-popover[xo-current-disabled]:not([xo-current-disabled=false]) {
  position: static;
  width: auto;
  visibility: visible;
  z-index: auto;
}
xo-popover xo-carousel-slide {
  pointer-events: none;
  visibility: hidden;
}
xo-popover[xo-active]:not([xo-active=false]) xo-carousel-slide {
  pointer-events: auto;
  visibility: visible;
}

xo-popover-trigger {
  display: inline-block;
}xo-builder-popover-content {
  display: block;
  position: absolute;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--xo-popover-duration);
}

xo-builder-popover {
  display: inline-block;
  position: relative;
}
xo-builder-popover[xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-open]:not([xo-open=false]) xo-builder-popover-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
}
xo-builder-popover[xo-animate=zoom] xo-builder-popover-content {
  transform: scale(0.5);
}
xo-builder-popover[xo-animate=fade-up] xo-builder-popover-content {
  transform: translate3d(0, 20%, 0);
}
xo-builder-popover[xo-animate=fade-down] xo-builder-popover-content {
  transform: translate3d(0, -20%, 0);
}
xo-builder-popover[xo-animate=fade-left] xo-builder-popover-content {
  transform: translate3d(-20%, 0, 0);
}
xo-builder-popover[xo-animate=fade-right] xo-builder-popover-content {
  transform: translate3d(20%, 0, 0);
}
xo-builder-popover[xo-animate=none] xo-builder-popover-content {
  transition: none !important;
}
xo-builder-popover[xo-placement=top-left] xo-builder-popover-content {
  bottom: 100%;
  left: 0;
}
xo-builder-popover[xo-placement=top-center] xo-builder-popover-content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
xo-builder-popover[xo-placement=top-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translateX(-50%) scale(0.5);
}
xo-builder-popover[xo-placement=top-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(0, 20%, 0);
}
xo-builder-popover[xo-placement=top-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(0, -20%, 0);
}
xo-builder-popover[xo-placement=top-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(-20%, 0, 0);
}
xo-builder-popover[xo-placement=top-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(20%, 0, 0);
}
xo-builder-popover[xo-placement=top-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=top-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translateX(-50%) scale(1) !important;
}
xo-builder-popover[xo-placement=top-right] xo-builder-popover-content {
  bottom: 100%;
  right: 0;
}
xo-builder-popover[xo-placement=bottom-left] xo-builder-popover-content {
  top: 100%;
  left: 0;
}
xo-builder-popover[xo-placement=bottom-center] xo-builder-popover-content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translateX(-50%) scale(0.5);
}
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(0, 20%, 0);
}
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(0, -20%, 0);
}
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(-20%, 0, 0);
}
xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translateX(-50%) translate3d(20%, 0, 0);
}
xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=bottom-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translateX(-50%) scale(1) !important;
}
xo-builder-popover[xo-placement=bottom-right] xo-builder-popover-content {
  top: 100%;
  right: 0;
}
xo-builder-popover[xo-placement=left-top] xo-builder-popover-content {
  top: 0;
  right: 100%;
}
xo-builder-popover[xo-placement=left-center] xo-builder-popover-content {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}
xo-builder-popover[xo-placement=left-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translateY(-50%) scale(0.5);
}
xo-builder-popover[xo-placement=left-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, 20%, 0);
}
xo-builder-popover[xo-placement=left-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, -20%, 0);
}
xo-builder-popover[xo-placement=left-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(-20%, 0, 0);
}
xo-builder-popover[xo-placement=left-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(20%, 0, 0);
}
xo-builder-popover[xo-placement=left-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=left-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translateY(-50%) scale(1) !important;
}
xo-builder-popover[xo-placement=left-bottom] xo-builder-popover-content {
  bottom: 0;
  right: 100%;
}
xo-builder-popover[xo-placement=right-top] xo-builder-popover-content {
  top: 0;
  left: 100%;
}
xo-builder-popover[xo-placement=right-center] xo-builder-popover-content {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
xo-builder-popover[xo-placement=right-center][xo-animate=zoom] xo-builder-popover-content {
  transform: translateY(-50%) scale(0.5);
}
xo-builder-popover[xo-placement=right-center][xo-animate=fade-up] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, 20%, 0);
}
xo-builder-popover[xo-placement=right-center][xo-animate=fade-down] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(0, -20%, 0);
}
xo-builder-popover[xo-placement=right-center][xo-animate=fade-left] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(-20%, 0, 0);
}
xo-builder-popover[xo-placement=right-center][xo-animate=fade-right] xo-builder-popover-content {
  transform: translateY(-50%) translate3d(20%, 0, 0);
}
xo-builder-popover[xo-placement=right-center][xo-animate=zoom][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=zoom][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-up][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-up][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-down][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-down][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-left][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-left][xo-open]:not([xo-open=false]) xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-right][xo-type=hover]:hover xo-builder-popover-content, xo-builder-popover[xo-placement=right-center][xo-animate=fade-right][xo-open]:not([xo-open=false]) xo-builder-popover-content {
  transform: translateY(-50%) scale(1) !important;
}
xo-builder-popover[xo-placement=right-bottom] xo-builder-popover-content {
  bottom: 0;
  left: 100%;
}xo-tooltip {
  display: block;
  width: fit-content;
}

xo-tooltip-content {
  position: absolute;
  z-index: 9999;
  display: block;
  width: fit-content;
  pointer-events: none;
  background-color: #111;
  color: #fff;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 3px;
  visibility: hidden;
  transition-delay: 0.1s;
}
xo-tooltip-content[xo-active]:not([xo-active=false]) {
  visibility: visible;
}
xo-tooltip-content[xo-animate=fade] {
  opacity: 0;
}
xo-tooltip-content[xo-animate=fade][xo-active]:not([xo-active=false]) {
  opacity: 1;
}
xo-tooltip-content[xo-animate=fade-down] {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}
xo-tooltip-content[xo-animate=fade-down][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
xo-tooltip-content[xo-animate=fade-up] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
xo-tooltip-content[xo-animate=fade-up][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
xo-tooltip-content[xo-animate=fade-left] {
  opacity: 0;
  transform: translate3d(20px, 0, 0);
}
xo-tooltip-content[xo-animate=fade-left][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
xo-tooltip-content[xo-animate=fade-right] {
  opacity: 0;
  transform: translate3d(-20px, 0, 0);
}
xo-tooltip-content[xo-animate=fade-right][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
xo-tooltip-content[xo-animate=zoom] {
  opacity: 0;
  transform: scale(0.4);
}
xo-tooltip-content[xo-animate=zoom][xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: scale(1);
}
xo-tooltip-content:after {
  content: "";
  border: solid transparent;
  border-width: 6px;
  border-top-color: #111;
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
}
xo-tooltip-content[xo-placement=top-left]:after {
  left: 20px;
  transform: none;
}
xo-tooltip-content[xo-placement=top-right]:after {
  left: auto;
  right: 20px;
  transform: none;
}
xo-tooltip-content[xo-placement^=bottom-]:after {
  top: auto;
  bottom: calc(100% - 1px);
  transform: translateX(-50%);
  border-color: transparent;
  border-bottom-color: #111;
}
xo-tooltip-content[xo-placement=bottom-center]:after {
  left: 50%;
}
xo-tooltip-content[xo-placement=bottom-left]:after {
  left: 20px;
  transform: none;
}
xo-tooltip-content[xo-placement=bottom-right]:after {
  left: auto;
  right: 20px;
  transform: none;
}
xo-tooltip-content[xo-placement^=left-]:after {
  left: calc(100% - 1px);
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent;
  border-left-color: #111;
}
xo-tooltip-content[xo-placement^=right-]:after {
  left: auto;
  right: calc(100% - 1px);
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent;
  border-right-color: #111;
}xo-collapse {
  display: block;
  height: 0;
  overflow: hidden;
  will-change: height;
}

xo-collapse-trigger {
  display: block;
}xo-tabs {
  position: relative;
  display: block;
}

xo-tabs-trigger {
  display: block;
  cursor: pointer;
}

xo-tabs-content {
  position: relative;
  display: flex;
  flex-direction: column;
}

xo-tabs-pane {
  position: absolute;
  width: 100%;
  display: block;
  visibility: hidden;
}
xo-tabs-pane[xo-active]:not([xo-active=false]) {
  position: static;
  visibility: visible;
}

[data-xb-section-id] xo-tabs-pane {
  position: static;
  width: 100%;
  display: none;
  visibility: visible;
}
[data-xb-section-id] xo-tabs-pane[xo-active]:not([xo-active=false]) {
  display: block;
}

xo-tabs-active {
  display: block;
  position: absolute;
  will-change: transform, width;
}xo-parallax,
[xo-parallax] {
  position: relative;
  display: block;
}

xo-parallax-scroll {
  display: block;
  background-size: cover;
}
xo-parallax-scroll:empty {
  width: auto;
}

:where(xo-parallax-scroll[xo-fit-content]:not([xo-fit-content=false])) {
  width: fit-content;
}

xo-parallax-hover {
  display: block;
  width: fit-content;
}
xo-parallax-hover:empty {
  width: auto;
}xo-carousel,
xo-carousel-thumbnail {
  position: relative;
  display: block;
  user-select: none;
}
xo-carousel[xo-vertical] xo-carousel-list,
xo-carousel-thumbnail[xo-vertical] xo-carousel-list {
  flex-direction: column;
  height: 100%;
  touch-action: pan-x;
}
xo-carousel[xo-overflow=hidden] xo-carousel-inner,
xo-carousel-thumbnail[xo-overflow=hidden] xo-carousel-inner {
  overflow: hidden;
}
xo-carousel[xo-overflow=visible] xo-carousel-inner,
xo-carousel-thumbnail[xo-overflow=visible] xo-carousel-inner {
  overflow: visible;
}
xo-carousel[xo-rtl]:not([xo-rtl=false]),
xo-carousel-thumbnail[xo-rtl]:not([xo-rtl=false]) {
  direction: rtl;
}

xo-carousel-inner {
  position: relative;
  z-index: 9;
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  overflow: hidden;
}

xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) [xo-carousel-slide] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  visibility: hidden;
}
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=none] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  visibility: visible;
  z-index: 9;
}
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide] {
  opacity: 0;
  transition: var(--xo-speed);
}
xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=fade] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=wind] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  opacity: 1;
}
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide], xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide, xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide] {
  transition: var(--xo-speed);
}
xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=urban] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=water] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) xo-carousel-slide[xo-visible]:not([xo-visible=false]), xo-carousel[xo-type=nature] :not(xo-carousel-thumbnail) [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  opacity: 1;
}

xo-carousel-thumbnail {
  display: block;
}
xo-carousel-thumbnail xo-carousel-slide, xo-carousel-thumbnail [xo-carousel-slide] {
  cursor: pointer;
}

xo-carousel-list {
  display: flex;
  flex-direction: row;
  touch-action: pan-y;
  will-change: transform;
  justify-content: flex-start;
}

xo-carousel xo-carousel-slide, xo-carousel [xo-carousel-slide] {
  width: calc(100% / var(--xo-per-view) + var(--xo-gap) / var(--xo-per-view));
  padding-inline-end: var(--xo-gap);
  flex-shrink: 0;
}

@keyframes xo-carousel-mask {
  from {
    mask-position: 100% 0;
  }
  to {
    mask-position: 0% 0;
  }
}
[xo-type=nature][xo-mask-initialized] xo-carousel-slide[xo-visible]:not([xo-visible=false]),
[xo-type=nature][xo-mask-initialized] [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  mask-image: url(https://raw.githubusercontent.com/long-hp/storage/main/nature-sprite.png);
  mask-size: 2300% 100%;
  animation: xo-carousel-mask var(--xo-speed, 200ms) steps(22) forwards;
}

[xo-type=water][xo-mask-initialized] xo-carousel-slide[xo-visible]:not([xo-visible=false]),
[xo-type=water][xo-mask-initialized] [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  mask-image: url(https://raw.githubusercontent.com/long-hp/storage/main/nature-sprite-2.png);
  mask-size: 7100% 100%;
  animation: xo-carousel-mask var(--xo-speed, 200ms) steps(70) forwards;
}

[xo-type=urban][xo-mask-initialized] xo-carousel-slide[xo-visible]:not([xo-visible=false]),
[xo-type=urban][xo-mask-initialized] [xo-carousel-slide][xo-visible]:not([xo-visible=false]) {
  mask-image: url(https://raw.githubusercontent.com/long-hp/storage/main/urban-sprite.png);
  mask-size: 3000% 100%;
  animation: xo-carousel-mask var(--xo-speed, 200ms) steps(29) forwards;
}

xo-carousel-thumbnail[xo-vertical] xo-carousel-slide,
xo-carousel-thumbnail[xo-vertical] [xo-carousel-slide],
xo-carousel[xo-vertical] xo-carousel-slide,
xo-carousel[xo-vertical] [xo-carousel-slide] {
  width: auto;
  height: calc(100% / var(--xo-per-view) + var(--xo-gap) / var(--xo-per-view));
  padding-bottom: var(--xo-gap);
  padding-inline-end: 0;
}

xo-carousel-prev,
xo-carousel-next {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}
xo-carousel-prev[xo-hide],
xo-carousel-next[xo-hide] {
  display: none;
}

xo-carousel-pagination {
  display: flex;
  align-items: center;
}

xo-carousel-bullet {
  display: flex;
  cursor: pointer;
}

xo-carousel-dynamic-bullets {
  display: block;
  overflow: hidden;
}

xo-carousel-filter-effect {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 9;
  pointer-events: none;
  isolation: isolate;
  opacity: 0;
}
xo-carousel-filter-effect[xo-type=wind] {
  width: 200%;
}
xo-carousel-filter-effect[xo-type=wind][xo-effect=next] {
  animation: xo-carousel-filter-effect-next var(--xo-speed, 200ms) forwards;
}
@keyframes xo-carousel-filter-effect-next {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
}
xo-carousel-filter-effect[xo-type=wind][xo-effect=prev] {
  animation: xo-carousel-filter-effect-prev var(--xo-speed, 200ms) forwards;
}
@keyframes xo-carousel-filter-effect-prev {
  0% {
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
}

xo-carousel-pagination-progress {
  display: block;
}xo-range {
  position: relative;
  display: block;
  height: calc(var(--size) * 1px);
}
xo-range input[type=range] {
  display: block;
  margin: 0;
  padding: 0;
  appearance: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  pointer-events: none;
}
xo-range input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: calc(var(--size) * 1px);
  height: calc(var(--size) * 1px);
  opacity: 0;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
xo-range input[type=range]::-moz-range-thumb {
  width: calc(var(--size) * 1px);
  height: calc(var(--size) * 1px);
  opacity: 0;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  pointer-events: auto;
}

xo-range-track {
  display: block;
  background: #ddd;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: calc(var(--size) * 1px);
}

xo-range-progress {
  position: absolute;
  top: 0;
  height: 100%;
  background: #4caf82;
  left: calc(var(--size) / 2 * 1px);
  will-change: transform, width;
}

xo-range-thumb {
  display: block;
  width: 20px;
  height: 20px;
  background: #4caf82;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
}xo-sticky {
  display: block;
}
xo-sticky[xo-placement=bottom] {
  height: 0;
}

xo-sticky-space {
  display: block;
  transition: all 0.3s;
}xo-filters-clear {
  display: none;
  width: fit-content;
  cursor: pointer;
}
xo-filters-clear[xo-visible]:not([xo-visible=false]) {
  display: block;
}

xo-filters-refine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
xo-filters-refine xo-filters-clear {
  background: #e8e8e8;
  padding: 3px 8px;
  margin-right: 5px;
  margin-bottom: 5px;
}

xo-filters-mobile,
xo-filters-sort-by-selected,
xo-filters-field {
  display: block;
}

xo-filters-fallback {
  display: none;
}
xo-filters-fallback[xo-visible]:not([xo-visible=false]) {
  display: block;
}

xo-filters-refine-clear-icon {
  display: none;
}xo-gallery {
  display: block;
}

xo-gallery-item {
  display: block;
}
xo-gallery-item xo-modal-trigger {
  display: block;
  width: 100%;
  height: 100%;
}
xo-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

xo-gallery-portal {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color: inherit;
  background-color: transparent;
  overflow: visible;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  visibility: hidden;
  gap: 20px;
  background-color: var(--xo-backdrop-color);
}
xo-gallery-portal::backdrop {
  display: none;
}
xo-gallery-portal:not([xo-type=scroll]) {
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
xo-gallery-portal[xo-active]:not([xo-active=false]) {
  visibility: visible;
}
xo-gallery-portal[xo-active]:not([xo-active=false]) xo-image-zoom-inner {
  display: block;
}
xo-gallery-portal::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
xo-gallery-portal xo-modal {
  position: relative;
  top: auto;
  left: auto;
  width: 100vw;
  flex-shrink: 0;
  scroll-snap-align: start;
}
xo-gallery-portal[xo-type=scroll] xo-modal {
  height: auto;
}
xo-gallery-portal[xo-type=scroll] xo-modal::part(content) {
  display: flex;
  justify-content: center;
  width: 100%;
}
xo-gallery-portal[xo-type=scroll] img {
  width: 100%;
  height: auto;
}
xo-gallery-portal xo-modal-pan {
  touch-action: pan-x;
}
xo-gallery-portal xo-modal-trigger {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 34px;
}
xo-gallery-portal xo-image-zoom-inner {
  display: none;
}
xo-gallery-portal video {
  height: 100vh;
  width: 100vw;
}

@-moz-document url-prefix() {
  xo-gallery-portal {
    scrollbar-color: transparent;
    scrollbar-width: none;
  }
}
xo-gallery-prev, xo-gallery-next {
  position: fixed;
  top: 50%;
  z-index: 999;
  width: 50px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  color: #fff;
  font-size: 30px;
}

xo-gallery-prev {
  left: 0;
}

xo-gallery-next {
  right: 0;
}
xo-gallery-next svg {
  transform: rotate(180deg);
}

xo-gallery-counter {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}xo-cart-quantity-minus,
xo-cart-quantity-plus {
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

xo-product-pickup-availability-empty,
xo-product-liquid-static,
xo-product-data {
  display: none !important;
}

xo-product-property,
xo-product-properties,
xo-bundle-progress,
xo-bundle-properties,
xo-bundle-content,
xo-product-media,
xo-product-recommendations,
xo-product-recipient-form-error,
xo-product-recipient-form,
xo-product-quick-view,
xo-product-quick-view-trigger,
xo-cart-add-error,
xo-cart-scroll,
xo-cart-shipping-rates-field,
xo-cart-note,
xo-product,
xo-cart,
xo-cart-mini,
xo-cart-discount,
xo-cart-discount-item,
xo-cart-discount-remove,
xo-cart-discount-submit,
xo-product-variant,
xo-product-variants,
xo-product-will-change {
  display: block;
}

xo-cart-add-error {
  visibility: hidden;
  overflow: hidden;
  height: 0;
}

xo-cart-shipping-rates-field[xo-disabled] {
  display: none;
}

xo-bundle-step,
xo-bundle-add,
xo-bundle-remove,
xo-bundle-placeholders,
xo-cart-note-button {
  display: inline-block;
}

xo-cart-add-fallback,
xo-cart-change-fallback {
  display: none;
}
xo-cart-add-fallback[xo-visible]:not([xo-visible=false]),
xo-cart-change-fallback[xo-visible]:not([xo-visible=false]) {
  display: block;
}

xo-cart-add[xo-loading] xo-cart-add-fallback {
  display: block;
}

.xo-cart-add-error,
.xo-cart-discount-error,
.xo-cart-change-error {
  background-color: #fa6e6e;
  color: #fff;
  font-size: 14px;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  width: 360px;
}
.xo-cart-add-error xo-toast-close-button,
.xo-cart-discount-error xo-toast-close-button,
.xo-cart-change-error xo-toast-close-button {
  color: #fff;
}
.xo-cart-add-error xo-toast-close-button svg,
.xo-cart-discount-error xo-toast-close-button svg,
.xo-cart-change-error xo-toast-close-button svg {
  fill: currentColor;
  width: 20px;
  height: 20px;
}

xo-cart-fly {
  display: none;
  position: absolute;
  z-index: 9999;
}

xo-product-media {
  position: relative;
}
xo-product-media [xo-product-media-content] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  transition: 0.8s;
}
xo-product-media [xo-product-media-content],
xo-product-media [xo-product-media-content] xo-carousel-inner,
xo-product-media [xo-product-media-content] xo-carousel-list,
xo-product-media [xo-product-media-content] xo-carousel-slide,
xo-product-media [xo-product-media-content] div,
xo-product-media [xo-product-media-content] img {
  width: 100% !important;
  height: 100% !important;
}
xo-product-media [xo-product-media-content] img {
  object-fit: cover;
}
xo-product-media [xo-hidden] {
  opacity: 0;
  visibility: hidden;
}
xo-product-media [xo-product-media-content] xo-carousel-prev,
xo-product-media [xo-product-media-content] xo-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: 0.7s;
}
xo-product-media [xo-product-media-content] xo-carousel-prev {
  left: 0;
}
xo-product-media [xo-product-media-content] xo-carousel-next {
  right: 0;
}
xo-product-media [xo-product-media-content] xo-carousel-pagination {
  position: absolute;
  bottom: 0;
  z-index: 10;
}
xo-product-media[xo-rtl] [xo-product-media-content] xo-carousel-prev {
  right: 0;
}
xo-product-media[xo-rtl] [xo-product-media-content] xo-carousel-next {
  left: 0;
}

xo-bundle-price[xo-compare-at-price][xo-hidden] {
  display: none;
}

xo-bundle-progress {
  --xo-x: -100%;
}:where(xo-animate:not([xo-item-used])) [xo-type=none],
xo-animate[xo-type=none] xo-animate-item,
[xo-animate=scroll] [xo-type=none] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1;
}

:where(xo-animate:not([xo-item-used])),
[xo-animate=scroll] {
  --xo-strength: 1;
}

:where(xo-animate:not([xo-item-used])),
xo-animate-item,
[xo-animate=scroll] {
  display: block;
  opacity: 0.01;
  animation-duration: calc(var(--xo-duration) * 1ms);
  animation-timing-function: var(--xo-easing);
  animation-delay: calc(var(--xo-order) * var(--xo-constant) * 1ms);
  animation-fill-mode: both;
}
:where(xo-animate:not([xo-item-used]))[xo-type=width-increment],
xo-animate-item[xo-type=width-increment],
[xo-animate=scroll][xo-type=width-increment] {
  opacity: 1 !important;
  overflow: hidden;
  animation: none !important;
  transition: all calc(var(--xo-duration) * 1ms) var(--xo-easing) calc((var(--xo-order) * var(--xo-constant) + var(--xo-wrap-duration, 0)) * 1ms);
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false]),
xo-animate-item[xo-visible]:not([xo-visible=false]),
[xo-animate=scroll][xo-visible]:not([xo-visible=false]) {
  backface-visibility: hidden;
  opacity: 1;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade] {
  animation-name: xo-fade;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-up] {
  animation-name: xo-fade-up;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-down],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-down],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-down] {
  animation-name: xo-fade-down;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-left],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-left],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-left] {
  animation-name: xo-fade-left;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=fade-right],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=fade-right],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=fade-right] {
  animation-name: xo-fade-right;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=zoom-in],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=zoom-in],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=zoom-in] {
  animation-name: xo-zoom-in;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=zoom-out],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=zoom-out],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=zoom-out] {
  animation-name: xo-zoom-out;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=rotate-left-up] {
  transform-origin: 0 50%;
  animation-name: xo-rotate-left-up;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=rotate-right-up] {
  transform-origin: 100% 50%;
  animation-name: xo-rotate-right-up;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-left],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-left],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-left] {
  transform-origin: 100% 50%;
  animation-name: xo-snake-left;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-right],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-right],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-right] {
  transform-origin: 0 50%;
  animation-name: xo-snake-right;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-up],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-up],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-up] {
  transform-origin: 50% 0;
  animation-name: xo-snake-up;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=snake-down],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=snake-down],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=snake-down] {
  transform-origin: 50% 100%;
  animation-name: xo-snake-down;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type="3d-up"],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type="3d-up"],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type="3d-up"] {
  transform-origin: 50% 0;
  animation-name: xo-3d-up;
}
:where(xo-animate:not([xo-item-used]))[xo-visible]:not([xo-visible=false])[xo-type=blur],
xo-animate-item[xo-visible]:not([xo-visible=false])[xo-type=blur],
[xo-animate=scroll][xo-visible]:not([xo-visible=false])[xo-type=blur] {
  animation-name: xo-blur;
}
@keyframes xo-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xo-fade-up {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-fade-down {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-fade-left {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--xo-strength) * 30%), 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-fade-right {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-zoom-out {
  0% {
    opacity: 0;
    transform: scale(calc(var(--xo-strength) * 1.3));
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-rotate-left-up {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-rotate-right-up {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-snake-up {
  0% {
    opacity: 0;
    transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * 30%), 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-snake-down {
  0% {
    opacity: 0;
    transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-snake-left {
  0% {
    opacity: 0;
    transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * 30%), 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-snake-right {
  0% {
    opacity: 0;
    transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-3d-up {
  0% {
    opacity: 0;
    transform: perspective(100rem) rotateX(-60deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes xo-blur {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

[xo-animate=scroll][xo-opacity] {
  opacity: 0.01;
}

xo-animate[xo-disabled],
xo-mega-menu [xo-animate=scroll] {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-toggle xo-animate-item, xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal xo-animate-item, xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item, xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item, xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-popover xo-animate-item, xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item, xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item, xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-tabs-pane xo-animate-item {
  opacity: 0.01;
  animation: none !important;
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-toggle xo-animate-item[xo-type=fade-up], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal xo-animate-item[xo-type=fade-up], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-up], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-up], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-popover xo-animate-item[xo-type=fade-up], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-up], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-up], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-up],
xo-tabs-pane xo-animate-item[xo-type=fade-up] {
  transform: translate3d(0, calc(var(--xo-strength) * 30%), 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-toggle xo-animate-item[xo-type=fade-down], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal xo-animate-item[xo-type=fade-down], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-down], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-down], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-popover xo-animate-item[xo-type=fade-down], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-down], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-down], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-down],
xo-tabs-pane xo-animate-item[xo-type=fade-down] {
  transform: translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-toggle xo-animate-item[xo-type=fade-left], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal xo-animate-item[xo-type=fade-left], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-left], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-left], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-popover xo-animate-item[xo-type=fade-left], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-left], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-left], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-left],
xo-tabs-pane xo-animate-item[xo-type=fade-left] {
  transform: translate3d(calc(var(--xo-strength) * 30%), 0, 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-toggle xo-animate-item[xo-type=fade-right], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal xo-animate-item[xo-type=fade-right], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=fade-right], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=fade-right], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-popover xo-animate-item[xo-type=fade-right], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-right], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=fade-right], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=fade-right],
xo-tabs-pane xo-animate-item[xo-type=fade-right] {
  transform: translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-toggle xo-animate-item[xo-type=zoom-in], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal xo-animate-item[xo-type=zoom-in], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=zoom-in], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=zoom-in], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-popover xo-animate-item[xo-type=zoom-in], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-in], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-in], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-in],
xo-tabs-pane xo-animate-item[xo-type=zoom-in] {
  transform: scale(0.6);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-toggle xo-animate-item[xo-type=zoom-out], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal xo-animate-item[xo-type=zoom-out], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=zoom-out], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=zoom-out], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-popover xo-animate-item[xo-type=zoom-out], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-out], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=zoom-out], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=zoom-out],
xo-tabs-pane xo-animate-item[xo-type=zoom-out] {
  transform: scale(calc(var(--xo-strength) * 1.3));
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-toggle xo-animate-item[xo-type=rotate-left-up], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal xo-animate-item[xo-type=rotate-left-up], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=rotate-left-up], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=rotate-left-up], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-popover xo-animate-item[xo-type=rotate-left-up], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-left-up], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-left-up], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-left-up],
xo-tabs-pane xo-animate-item[xo-type=rotate-left-up] {
  transform-origin: 0 50%;
  transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(10deg);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-toggle xo-animate-item[xo-type=rotate-right-up], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal xo-animate-item[xo-type=rotate-right-up], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=rotate-right-up], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=rotate-right-up], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-popover xo-animate-item[xo-type=rotate-right-up], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-right-up], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=rotate-right-up], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=rotate-right-up],
xo-tabs-pane xo-animate-item[xo-type=rotate-right-up] {
  transform-origin: 100% 50%;
  transform: translate3d(0, calc(var(--xo-strength) * 30%), 0) rotate(-10deg);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-toggle xo-animate-item[xo-type=snake-left], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal xo-animate-item[xo-type=snake-left], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-left], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-left], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-popover xo-animate-item[xo-type=snake-left], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-left], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-left], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-left],
xo-tabs-pane xo-animate-item[xo-type=snake-left] {
  transform-origin: 100% 50%;
  transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * 30%), 0, 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-toggle xo-animate-item[xo-type=snake-right], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal xo-animate-item[xo-type=snake-right], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-right], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-right], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-popover xo-animate-item[xo-type=snake-right], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-right], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-right], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-right],
xo-tabs-pane xo-animate-item[xo-type=snake-right] {
  transform-origin: 0 50%;
  transform: scaleX(1.8) translate3d(calc(var(--xo-strength) * -1 * 30%), 0, 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-toggle xo-animate-item[xo-type=snake-up], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal xo-animate-item[xo-type=snake-up], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-up], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-up], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-popover xo-animate-item[xo-type=snake-up], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-up], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-up], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-up],
xo-tabs-pane xo-animate-item[xo-type=snake-up] {
  transform-origin: 50% 0;
  transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * 30%), 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-toggle xo-animate-item[xo-type=snake-down], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal xo-animate-item[xo-type=snake-down], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=snake-down], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=snake-down], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-popover xo-animate-item[xo-type=snake-down], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-down], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=snake-down], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=snake-down],
xo-tabs-pane xo-animate-item[xo-type=snake-down] {
  transform-origin: 50% 100%;
  transform: scaleY(1.8) translate3d(0, calc(var(--xo-strength) * -1 * 30%), 0);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-toggle xo-animate-item[xo-type="3d-up"], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal xo-animate-item[xo-type="3d-up"], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type="3d-up"], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type="3d-up"], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-popover xo-animate-item[xo-type="3d-up"], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type="3d-up"], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type="3d-up"], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type="3d-up"],
xo-tabs-pane xo-animate-item[xo-type="3d-up"] {
  transform-origin: 50% 0;
  transform: perspective(100rem) rotateX(-60deg);
}
xo-toggle :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-toggle xo-animate-item[xo-type=blur], xo-modal :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal xo-animate-item[xo-type=blur], xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-modal:not([xo-animate-ready]):not([xo-active]) xo-animate-item[xo-type=blur], xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-modal[xo-animate-ready]:not([xo-animate-active]) xo-animate-item[xo-type=blur], xo-popover :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-popover xo-animate-item[xo-type=blur], xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=blur], xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide xo-animate-item[xo-type=blur], xo-tabs-pane :where(xo-animate:not([xo-item-used], [xo-scroll-forced]))[xo-type=blur],
xo-tabs-pane xo-animate-item[xo-type=blur] {
  filter: blur(10px);
}

xo-toggle[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-toggle[xo-active]:not([xo-active=false]) xo-animate-item,
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-animate-item,
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-animate-item,
xo-popover[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-popover[xo-active]:not([xo-active=false]) xo-animate-item,
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item,
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item,
xo-tabs-pane[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])),
xo-tabs-pane[xo-active]:not([xo-active=false]) xo-animate-item {
  opacity: 1;
  backface-visibility: hidden;
}
xo-toggle[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-toggle[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-modal:not([xo-animate-ready])[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-modal[xo-animate-ready][xo-animate-active]:not([xo-animate-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-popover[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-popover[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-carousel:not([xo-per-view]):not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item:not([xo-type=width-increment]),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-carousel[xo-per-view="1"]:not([xo-column-width]) xo-carousel-slide[xo-visible]:not([xo-visible=false]) xo-animate-item:not([xo-type=width-increment]),
xo-tabs-pane[xo-active]:not([xo-active=false]) :where(xo-animate:not([xo-item-used], [xo-scroll-forced])):not([xo-type=width-increment]),
xo-tabs-pane[xo-active]:not([xo-active=false]) xo-animate-item:not([xo-type=width-increment]) {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  xo-animate, xo-animate-item, [xo-animate=scroll] {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
}
html.no-js xo-animate, html.no-js xo-animate-item, html.no-js [xo-animate=scroll] {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

[xo-animate=svg-infinite]:not(.xo-animate-svg-none) [xo-next-stroke-dasharray], [xo-animate=svg-infinite]:not(.xo-animate-svg-none) [xo-next-stroke-dashoffset] {
  animation: xo-svg-infinite calc(var(--xo-duration) * 2ms) ease infinite;
}
@keyframes xo-svg-infinite {
  0% {
    opacity: 1;
    stroke-dasharray: var(--xo-stroke-dasharray);
    stroke-dashoffset: var(--xo-stroke-dashoffset);
  }
  50%, 80% {
    opacity: 1;
    stroke-dasharray: var(--xo-next-stroke-dasharray);
    stroke-dashoffset: var(--xo-next-stroke-dashoffset);
  }
  90%, 100% {
    opacity: 0;
    stroke-dasharray: var(--xo-next-stroke-dasharray);
    stroke-dashoffset: var(--xo-next-stroke-dashoffset);
  }
}

:where(xo-animate:not([xo-item-used]))[xo-type^=xo-goo-],
[xo-animate=scroll][xo-type^=xo-goo-] {
  animation: none !important;
  transition: none !important;
}xo-image-zoom {
  position: relative;
  z-index: 9;
  display: block;
  cursor: none;
}
xo-image-zoom img {
  width: 100% !important;
}
xo-image-zoom[xo-active]:not([xo-active=false])[xo-zoom-full]:not([xo-zoom-full=false]) > img {
  visibility: hidden;
}
xo-image-zoom[xo-active]:not([xo-active=false]) xo-image-zoom-item {
  display: block !important;
}
xo-image-zoom[xo-active]:not([xo-active=false]) xo-image-zoom-thumb {
  opacity: 1;
}
xo-image-zoom[xo-placement=center] {
  cursor: zoom-in;
}
xo-image-zoom[xo-placement=right] xo-image-zoom-inner {
  left: calc(100% + 10px);
}
xo-image-zoom[xo-placement=left] xo-image-zoom-inner {
  left: auto;
  right: calc(100% + 10px);
}
xo-image-zoom[xo-zoom-full]:not([xo-zoom-full=false]) xo-image-zoom-inner {
  pointer-events: auto;
}
xo-image-zoom[xo-zoom-full]:not([xo-zoom-full=false]) xo-image-zoom-item {
  position: fixed !important;
}

xo-image-zoom-thumb {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

xo-image-zoom-inner {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

xo-image-zoom-item {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 9;
  background-color: var(--color-light-freeze);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: 0 0;
  display: none !important;
}xo-countdown {
  display: block;
}xo-video-cover {
  display: block;
  position: relative;
  overflow: hidden;
}
xo-video-cover:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

xo-video-cover-item {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}
xo-video-cover-item iframe,
xo-video-cover-item video,
xo-video-cover-item embed,
xo-video-cover-item object {
  display: block;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

xo-video-cover-button {
  display: inline-block;
}xo-typing:after {
  content: attr(xo-cursor-char);
  display: inline-block;
  margin-left: 2px;
  animation: xo-typing 1.2s;
}
@keyframes xo-typing {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

xo-typing-inner {
  display: inline-flex;
  overflow: hidden;
}

xo-typing-content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}
xo-typing-content span:nth-child(2) {
  position: absolute;
  left: 0;
  top: 100%;
}

[xo-slide] > xo-typing-inner > xo-typing-content {
  animation: xo-typing-slide backwards calc(var(--xo-duration) * 1ms) ease;
}
@keyframes xo-typing-slide {
  0% {
    transform: translate3d(0, 0, 0);
    width: var(--xo-width-0);
  }
  100% {
    transform: translate3d(0, -100%, 0);
    width: var(--xo-width-1);
  }
}

[xo-goo] > xo-typing-inner > xo-typing-content {
  width: var(--xo-width-1);
}
[xo-goo] > xo-typing-inner > xo-typing-content span:nth-child(1) {
  top: 10%;
  animation: xo-typing-goo-span-1 calc(var(--xo-duration) * 1ms) ease;
}
@keyframes xo-typing-goo-span-1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
[xo-goo] > xo-typing-inner > xo-typing-content span:nth-child(2) {
  top: 0;
  opacity: 0;
  animation: xo-typing-goo-span-2 calc(var(--xo-duration) * 1ms) ease;
}
@keyframes xo-typing-goo-span-2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

xo-typing[xo-effect=goo] {
  position: relative;
}
xo-typing[xo-effect=goo] span + span {
  position: absolute;
}xo-image-comparison {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

xo-image-comparison-label {
  position: absolute;
  top: 0;
  z-index: 1;
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
}

xo-image-comparison-after {
  display: block;
}
xo-image-comparison-after img {
  width: 100%;
  pointer-events: none;
}
xo-image-comparison-after xo-image-comparison-label {
  right: 0;
}

xo-image-comparison-before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  overflow: hidden;
  width: calc(var(--xo-value, 0) * 1%);
}
xo-image-comparison-before img {
  display: block;
  height: 100% !important;
  width: calc(100 / var(--xo-value, 0) * 100%) !important;
  max-width: none !important;
  object-fit: cover !important;
  pointer-events: none;
}
xo-image-comparison-before xo-image-comparison-label {
  left: 0;
}

xo-image-comparison-handle {
  display: block;
  position: absolute;
  top: 0;
  left: calc(var(--xo-value, 0) * 1%);
  z-index: 9;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: #fff;
  cursor: ew-resize;
}

xo-image-comparison-handle-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  border-radius: 50%;
  cursor: ew-resize;
}xo-masonry {
  display: block;
  position: relative;
}

xo-masonry-item {
  display: block !important;
}xo-cursor-item {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  display: block;
  transition: transform 0.4s, opacity 0.4s;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0);
  pointer-events: none;
}
xo-cursor-item[xo-active]:not([xo-active=false]) {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

:where([is=xo-cursor][xo-absolute]) {
  position: relative;
}

[is=xo-cursor][xo-absolute] xo-cursor-item {
  position: absolute;
}xo-scroll-carousel {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  user-select: none;
  touch-action: pan-y;
}
xo-scroll-carousel[xo-rtl]:not([xo-rtl=false]) {
  direction: rtl;
}

xo-scroll-carousel > * {
  display: flex;
  flex-wrap: nowrap;
}

xo-scroll-carousel > * > * {
  flex-shrink: 0;
  padding-inline-end: var(--xo-gap, 30px);
}

xo-scroll-carousel-next, xo-scroll-carousel-prev {
  display: block;
  cursor: pointer;
}xo-magnetic, xo-magnetic-content {
  display: inline-block;
  will-change: transform;
}xo-line-chart {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

xo-line-chart svg {
  position: absolute;
  top: 0;
  left: 0;
}xo-scroll-scene {
  position: relative;
  display: block;
}

xo-scroll-scene-inner {
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
}

xo-scroll-scene-item {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
}

xo-scroll-scene-item[xo-active]:not([xo-active=false]) {
  pointer-events: auto;
  visibility: visible;
}xo-collection-tabs,
xo-collection-tabs-trigger,
xo-collection-tabs-content {
  display: block;
}xo-intersection-video {
  display: block;
}xo-global-function {
  display: block;
}xo-item {
  display: block;
}xo-grid-hover-expand {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--xo-grid-row-gap, 2rem) / -2);
  margin-top: calc(var(--xo-grid-col-gap, 2rem) * -1);
}
xo-grid-hover-expand > * {
  width: calc(100% / var(--xs)) !important;
  padding-top: var(--xo-grid-col-gap, 2rem);
  padding-inline: calc(var(--xo-grid-row-gap, 2rem) / 2);
}
@media (min-width: 576px) {
  xo-grid-hover-expand > * {
    width: calc(100% / var(--sm)) !important;
  }
}
@media (min-width: 768px) {
  xo-grid-hover-expand > * {
    width: calc(100% / var(--md)) !important;
  }
}
@media (min-width: 992px) {
  xo-grid-hover-expand > * {
    width: calc(100% / var(--lg)) !important;
  }
}.xo-hidden {
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}