/* Legacy engines without container query units: shop.css mobile fallback. */
@supports not (width: 1cqw) {
  .shop-page {
    overflow-x: clip;
    background: #000;
  }

  .shop-page #main {
    min-height: 100vh;
    margin-top: calc(0px - var(--header-height));
  }

  .shop-scene {
    position: relative;
    display: none;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: #000;
  }

  .shop-background__texture-placement,
  .shop-decoration--top,
  .shop-decoration--bottom,
  .shop-panel__blur-source,
  .shop-panel__overlay,
  .shop-title-divider-mobile,
  .shop-description--mobile,
  .shop-cta {
    display: none;
  }

  .shop-cta {
    transform-origin: center;
    transition: transform 180ms var(--ease-ui);
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
  }

  .shop-cta::before {
    transition:
      border-color 180ms var(--ease-ui),
      background 180ms var(--ease-ui),
      box-shadow 180ms var(--ease-ui);
  }

  .shop-cta:focus-visible,
  .shop-cta:active {
    transform: scale(1.015);
  }

  .shop-cta:focus-visible::before,
  .shop-cta:active::before {
    border-color: rgb(255 193 58 / 100%);
    background: linear-gradient(90deg, rgb(35 24 5 / 32%) 0%, rgb(44 29 4 / 30%) 50%, rgb(58 38 4 / 28%) 100%);
    box-shadow: var(--shop-cta-active-shadow);
  }

  @media (hover: hover) and (pointer: fine) {
    .shop-cta:hover {
      transform: scale(1.025);
    }

    .shop-cta:hover::before {
      border-color: rgb(244 183 45 / 92%);
      background: linear-gradient(90deg, rgb(29 20 5 / 27%) 0%, rgb(38 25 4 / 25%) 50%, rgb(51 34 4 / 23%) 100%);
      box-shadow: var(--shop-cta-hover-shadow);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shop-cta,
    .shop-cta::before {
      transition: none;
    }

    .shop-cta:hover,
    .shop-cta:focus-visible,
    .shop-cta:active {
      transform: none;
    }
  }

  @media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    .shop-cta:active {
      transform: scale(1.04);
      transition-duration: 80ms;
    }

    .shop-cta:active::before {
      transition-duration: 80ms;
    }
  }

  @media (max-width: 1023px) {
    .shop-scene {
      display: block;
      height: max(100vh, 216.410256vw);
      min-height: max(100vh, 216.410256vw);
      container-type: inline-size;
    }

    .shop-background {
      position: absolute;
      inset: 0;
    }

    .shop-background__texture-placement,
    .shop-background__image-placement,
    .shop-background__texture {
      position: absolute;
      display: block;
    }

    .shop-background__texture-placement {
      z-index: 0;
      top: 1.794872vw;
      left: -7.17955vw;
      width: 121.533766vw;
      height: 216.153846vw;
    }

    .shop-background__texture {
      inset: 0;
      width: 100%;
      height: 100%;
      background: url("../assets/images/shop/background-mobile.png") 0 0 / 100% 100% no-repeat;
      transform: rotate(180deg);
    }

    .shop-background__image-placement {
      z-index: 3;
      top: -45.641026vw;
      left: -37.179487vw;
      width: 194.871795vw;
      height: 109.74359vw;
      background: url("../assets/images/shop/gym-mobile.png") 0 0 / 100% 100% no-repeat;
    }

    .shop-background__darkening {
      position: absolute;
      z-index: 4;
      top: -4.102564vw;
      left: 4.102564vw;
      width: 100.769231vw;
      height: 15.897436vw;
      overflow: hidden;
      opacity: 0.8;
      pointer-events: none;
    }

    .shop-background__darkening-transform {
      position: absolute;
      top: 100%;
      left: 100%;
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(180.009deg, transparent 3.621509%, #000 86.538464%);
      transform: rotate(180deg);
      transform-origin: 0 0;
    }

    .shop-decoration--left,
    .shop-decoration--right {
      display: none;
    }

    .shop-decoration--top,
    .shop-decoration--bottom {
      position: absolute;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .shop-decoration--top {
      top: -4.358974vw;
      left: -7.692308vw;
      width: 118.717949vw;
      height: 21.025641vw;
    }

    .shop-decoration--top .shop-decoration__clip {
      position: absolute;
      display: block;
      width: 21.025641vw;
      height: 118.717949vw;
      overflow: hidden;
      transform: rotate(90deg);
    }

    .shop-decoration--top .shop-decoration__asset {
      position: absolute;
      top: 0.003318vw;
      left: -0.505559vw;
      display: block;
      width: 21.530472vw;
      height: 118.714701vw;
      max-width: none;
    }

    .shop-decoration--bottom {
      top: 201.025868vw;
      left: -3.846154vw;
      width: 118.714701vw;
      height: 21.530472vw;
    }

    .shop-decoration--bottom .shop-decoration__clip {
      position: absolute;
      display: block;
      width: 21.530472vw;
      height: 118.714701vw;
      overflow: visible;
      transform: rotate(-90deg);
    }

    .shop-decoration--bottom .shop-decoration__asset {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      max-width: none;
    }

    .shop-panel {
      position: absolute;
      z-index: 5;
      top: 18.205128vw;
      left: 5.641026vw;
      width: 88.717949vw;
      height: 164.871795vw;
    }

    .shop-panel__surface {
      position: absolute;
      top: 7.179487vw;
      left: 0;
      width: 88.717949vw;
      height: 162.307692vw;
      overflow: hidden;
      border: 0.40465vw solid rgb(251 171 10 / 68%);
      border-radius: 6.574155vw;
      background: transparent;
      box-shadow:
        0 5.128205vw 128.205128vw rgb(0 0 0 / 45%),
        inset 0 0.512821vw 0.512821vw rgb(255 255 255 / 10%);
    }

    .shop-panel__blur-source,
    .shop-panel__overlay {
      position: absolute;
      display: block;
      pointer-events: none;
    }

    .shop-panel__blur-source {
      inset: 0;
      filter: blur(0.512821vw);
    }

    .shop-panel__blur-texture,
    .shop-panel__blur-gym {
      position: absolute;
      display: block;
      max-width: none;
    }

    .shop-panel__blur-texture {
      top: -23.589744vw;
      left: -12.820575vw;
      width: 121.533766vw;
      height: 216.153846vw;
      background: url("../assets/images/shop/background-mobile.png") 0 0 / 100% 100% no-repeat;
      transform: rotate(180deg);
    }

    .shop-panel__blur-gym {
      top: -71.025641vw;
      left: -42.820513vw;
      width: 194.871795vw;
      height: 109.74359vw;
      background: url("../assets/images/shop/gym-mobile.png") 0 0 / 100% 100% no-repeat;
    }

    .shop-panel__overlay {
      inset: 0;
      background: linear-gradient(90deg, rgb(5 5 5 / 53.04%) 0%, rgb(10 10 10 / 48.96%) 50%, rgb(18 13 4 / 46.24%) 100%);
    }

    .shop-panel__content {
      position: absolute;
      z-index: 1;
      top: 5.897436vw;
      left: 0;
      width: 88.717949vw;
      height: 164.871795vw;
    }

    .shop-heading {
      position: absolute;
      top: 6.153846vw;
      left: 13.589744vw;
      width: 61.538489vw;
      height: 34.358974vw;
    }

    .shop-title {
      position: absolute;
      top: 0;
      left: 11.794872vw;
      width: 38.205128vw;
      height: 9.230769vw;
      margin: 0;
      color: #e8e8e8;
      font-family: "PT Root UI", sans-serif;
      font-size: 7.651282vw;
      font-weight: 500;
      line-height: 1.1991;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .shop-title-divider--desktop {
      display: none;
    }

    .shop-title-divider-mobile {
      position: absolute;
      top: 7.948718vw;
      left: 0;
      display: block;
      width: 61.538489vw;
      height: 10.624099vw;
    }

    .shop-title-divider-mobile__line {
      position: absolute;
      top: 5.412177vw;
      display: block;
      width: 24.481872vw;
      height: 0.456003vw;
      background: #df9809;
    }

    .shop-title-divider-mobile__line--left {
      left: 0;
      clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }

    .shop-title-divider-mobile__line--right {
      right: 0;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    .shop-title-divider-mobile__icon-crop {
      position: absolute;
      top: 0;
      left: 25.457279vw;
      display: block;
      width: 10.624099vw;
      height: 10.624099vw;
      overflow: hidden;
    }

    .shop-title-divider-mobile__icon-crop img {
      position: absolute;
      top: 0;
      left: -43.558807vw;
      display: block;
      width: 97.741713vw;
      height: 10.624099vw;
      max-width: none;
    }

    .shop-illustration {
      position: absolute;
      top: 20.25641vw;
      left: 23.846154vw;
      width: 13.862826vw;
      height: 14.102564vw;
      max-width: none;
    }

    .shop-description--desktop,
    .shop-store-link--desktop {
      display: none;
    }

    .shop-description--mobile {
      position: absolute;
      top: 42.820513vw;
      left: -1.794872vw;
      display: block;
      width: 92.423581vw;
      height: 115.384615vw;
      margin: 0;
      color: #e8e8e8;
      font-family: "Montserrat Alternates", sans-serif;
      font-size: 3.095332vw;
      font-weight: 500;
      line-height: 3.846154vw;
      letter-spacing: 0.2em;
      text-align: center;
      white-space: nowrap;
    }

    .shop-cta {
      position: absolute;
      z-index: 6;
      top: 193.333333vw;
      left: 5.641026vw;
      display: block;
      width: 88.717949vw;
      height: 11.794872vw;
      color: #fdca01;
      font-family: "Montserrat Alternates", sans-serif;
      text-decoration: none;
      touch-action: manipulation;
      --shop-cta-hover-shadow:
        0 2.380952vw 6.666667vw rgb(0 0 0 / 45%),
        0 0 8.205128vw rgb(253 172 9 / 78%),
        inset 0 0 2.051282vw rgb(253 172 9 / 12%);
      --shop-cta-active-shadow:
        0 2.380952vw 6.666667vw rgb(0 0 0 / 45%),
        0 0 9.230769vw rgb(253 172 9 / 86%),
        inset 0 0 2.564103vw rgb(253 172 9 / 16%);
    }

    .shop-cta::before {
      position: absolute;
      inset: 0;
      display: block;
      border: 0.238095vw solid #fdac09;
      border-radius: 5.714286vw;
      background: linear-gradient(90deg, rgb(5 5 5 / 15.6%) 0%, rgb(10 10 10 / 14.4%) 50%, rgb(18 13 4 / 13.6%) 100%);
      box-shadow:
        0 2.380952vw 6.666667vw rgb(0 0 0 / 45%),
        0 0 7.142857vw rgb(253 172 9 / 70%),
        inset 0 0.47619vw 0.47619vw rgb(255 255 255 / 10%);
      content: "";
    }

    .shop-cta span {
      position: absolute;
      top: 3.846154vw;
      left: 10.512821vw;
      display: block;
      width: 67.948718vw;
      height: 4.102564vw;
      font-size: 3.382896vw;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.05em;
      text-align: center;
      text-decoration: underline;
      white-space: nowrap;
    }

    .shop-cta:focus-visible {
      border-radius: 5.714286vw;
      outline: 0.512821vw solid #fff;
      outline-offset: 0.769231vw;
    }

    .shop-signature {
      position: absolute;
      z-index: 7;
      top: 206.666667vw;
      left: 79.74359vw;
      width: 19.334247vw;
      height: 9.737827vw;
      max-width: none;
    }
  }

}
