/** Shopify CDN: Minification failed

Line 10:12 Expected ":"

**/


/* CSS from section stylesheet tags */
.native-custom[data-section-type="collapsible-row-list"] .anchor {
    position
  }
.vibes-section {
    padding-bottom: calc(900px - var(--vvh, 100svh)); /* Create section isolation */
    margin-bottom: 40px;
  }

  .vibes-section img {
    border-radius: 7.29px;
  }

  .image-grid {
    position: sticky;
    top: 66px;
    height: calc(var(--vvh, 100svh) - 66px);
    z-index: 0;
    max-width: 1440px;
    margin: 0 auto;
    margin-top: -100svh;
    margin-top: calc(-1 * var(--vvh, 100svh));
    display: flex;
    gap: 30px;
  }

    .image-grid > div:nth-child(1),
    .image-grid > div:nth-child(3) {
      flex: 1;
    }

    .image-grid > div:nth-child(2) {
      width: 170px;
    }

  .image-grid__column { position: relative; margin-top: 0;}

  .image-grid__column--left { position: relative; overflow: visible; }

  .image-grid__figure { margin: 0; }

  .image-grid__figure--left {
    position: absolute;
    right: 0;
    --leftW: clamp(calc(400px * 6 / 7), 70vw, 560px);
    width: var(--leftW);
    aspect-ratio: 6 / 7;
    margin: 0;
    z-index: 0;
  }

  .image-grid__figure--left:nth-child(1) { top: 0; }

  .image-grid__figure--left:nth-child(2) {
    --leftGap: 30px;
    top: calc(var(--leftW) * 7 / 6 + var(--leftGap));
  }

  .image-grid__image {
    display: block;
    object-fit: cover;
    width: 100%;
  }

  .image-grid__column--center .image-grid__figure {
    margin: 0;
  }

  .image-grid__column--center .image-grid__image {
    width: 170px;
    height: calc(106px + ((var(--vvh, 100svh) - 800px) / 2));
  }

  .shopify-section.vibes-section {
    overflow: visible;
    overflow-x: clip;
    /* To see the scroll uncomment
    background:
    repeating-linear-gradient(
      135deg,
      #f0f3ff 0 24px,
      #ffffff 24px 48px
    );*/
  }

  .vibes-section {
    --vibes-grid-baseline-vh: 961px;
    position: relative;
    height: max(160vh, 1800px); /* Ensure enough scroll length for shorter viewports */
    background: #fff;
    view-timeline-name: --vibes;
    view-timeline-axis: block;
  }

  .vibes-center {
    position: sticky;
    z-index:1;
    top: 0;
    height: var(--vvh, 100svh);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .vibes-image {
    width: 100%;
    height: var(--vvh, 100svh);
    overflow: hidden;
    background: #ccc;
    animation: shrink-m linear both;
    animation-timeline: --vibes;
    animation-range: entry 100% exit 0%;
    border-radius: 7.29px;
  }

  .image-grid__feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .image-grid__column--center .image-grid__figure--stacked {
    margin-top: 460px;
  }

  .image-grid__figure--stacked .image-grid__image {
    height: calc(265px - ((var(--vvh, 100svh) - 800px) / 2));
  }

  .image-grid__column--right { position: relative; overflow: visible; }

  .image-grid__figure--right {
    position: absolute;
    left: 0;
    --rightW: clamp(calc(400px * 6 / 7), 70vw, 560px);
    width: var(--rightW);
    aspect-ratio: 6 / 7;
    margin: 0;
    z-index: 0;
  }

  .image-grid__figure--right:nth-child(1) { top: 0; }

  .image-grid__figure--right:nth-child(2) {
    --rightGap: 30px;
    top: calc(var(--rightW) * 7 / 6 + var(--rightGap));
  }

  .image-grid__image--left,
  .image-grid__image--right {
    height: 100%;
    min-height: 400px;
  }

  .image-grid__image--left {
    object-fit: none;
    object-position: 100% 50%;
    animation: panY-left linear both;
    animation-timeline: --vibes;
    animation-range: entry 100% exit 100%;
    will-change: object-position;
  }

  .image-grid__image--right {
    object-fit: none;
    object-position: 0% 50%;
    animation: panY-right linear both;
    animation-timeline: --vibes;
    animation-range: entry 100% exit 100%;
    will-change: object-position;
  }

  @keyframes shrink-m {
    from { width: 100%; height: var(--vvh, 100svh); }
    to   { width: 170px; height: 400px; }
  }

  @keyframes panY-left {
    from { object-position: 100% 0%; }
    to   { object-position: 100% 100%; }
  }

  @keyframes panY-right {
    from { object-position: 0% 0%; }
    to   { object-position: 0% 100%; }
  }

  @keyframes panY-center {
    from { object-position: 50% 40%; }
    to   { object-position: 50% 60%; }
  }

  .image-grid__image--center {
    object-fit: none;
    object-position: 50% 50%;
    animation: panY-center linear both;
    animation-timeline: --vibes;
    animation-range: entry 100% exit 100%;
    will-change: object-position;
  }

  @media (min-width: 720px) {

    .vibes-center { height: 100vh; }

    .vibes-section img {
      border-radius: 20px;
    }

    .vibes-image {
      border-radius: 20px;
      height: auto;
      aspect-ratio: 6 / 7;
      animation-name: shrink-d;
    }

    @keyframes shrink-d {
      from { width: 100%; }
      to   { width: 480px; }
    }

    .image-grid__feature-image {
      aspect-ratio: 6 / 7;
    }

    .image-grid {
      height: calc(100vh - 66px);
      --center-width: 480px;
      --vh-delta: calc(100vh - var(--vibes-grid-baseline-vh));
      --center-main-height: calc(var(--center-width) * 292 / 480);
      --center-stack-offset-base: calc(var(--center-width) * 665 / 480);
      --center-stacked-height-base: calc(var(--center-width) * 155 / 480);
      min-height: 1112px;
    }

    .image-grid__column--center .image-grid__image {
      width: var(--center-width);
      height: var(--center-main-height);
    }

    .image-grid__column--center .image-grid__figure--stacked {
      margin-top: calc(var(--center-stack-offset-base) - var(--vh-delta) / 2);
    }

    .image-grid__figure--stacked .image-grid__image {
      height: calc(var(--center-stacked-height-base) + var(--vh-delta) / 2);
    }

    .image-grid > div:nth-child(2) {
      width: var(--center-width);
    }

    .image-grid__figure--left {
      position: relative;
      right: auto;
      left: auto;
      top: auto;
      width: min(100%, var(--center-width));
      aspect-ratio: 6 / 7;
      overflow: hidden;
      margin: 0 0 62px;
    }

    .image-grid__figure--left:nth-child(1),
    .image-grid__figure--left:nth-child(2) {
      top: auto;
    }

    .image-grid__figure--left:last-child { margin-bottom: 0; }

    .image-grid__image--left {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .image-grid__figure--right {
      position: relative;
      left: auto;
      top: auto;
      width: min(100%, var(--center-width));
      aspect-ratio: 6 / 7;
      overflow: hidden;
      margin: 0 0 62px;
    }

    .image-grid__figure--right:nth-child(1),
    .image-grid__figure--right:nth-child(2) {
      top: auto;
    }

    .image-grid__figure--right:last-child { margin-bottom: 0; }
    .image-grid__image--right {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

  }

  @media (min-width: 720px) and (max-width: 1439px) {

    .image-grid {
      --grid-gap: 30px;
      --side-visible: clamp(72px, calc((100vw - var(--center-width) - 2 * var(--grid-gap)) / 2), 449.5px);
    }

    .image-grid > div:nth-child(1),
    .image-grid > div:nth-child(3) {
      flex: 0 0 var(--side-visible);
      width: var(--side-visible);
      overflow: hidden;
    }

    .image-grid__figure--left {
      left: auto;
      right: 0;
      transform: none;
      width: 560px;
      margin-left: calc(var(--side-visible) - 560px);
    }

    .image-grid__image--left {
      min-height: 560px;
    }

    .image-grid__figure--right {
      left: 0;
      transform: none;
      width: 560px;
    }

    .image-grid__image--right {
      min-height: 560px;
    }

  }

  .vibes-headline{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    pointer-events: none;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    letter-spacing: .05em;
    font-weight: 420;
    text-transform: uppercase;
    font-size: 55px !important;

    animation: headline-out linear both;
    animation-timeline: --vibes;
    animation-range: entry 100% exit 0%;
  }

  @keyframes headline-out{
    from{
      opacity: 1;
      transform: scale(1);
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
    }
    to{
      opacity: 0;
      transform: scale(.72);
      filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    }
  }

  @media (min-width: 720px){
    .vibes-headline{ font-size: clamp(22px, 3.6vw, 56px); }
  }

  /* Safari fallback */
  html.ios-safari-fallback .image-grid { display: none !important; }
  html.ios-safari-fallback .vibes-section { height: auto !important; padding-bottom: 0 !important; }
  html.ios-safari-fallback .vibes-center { position: relative !important; height: auto !important; display: grid !important; place-items: center !important; }
  html.ios-safari-fallback .vibes-image { width:100% !important; height:auto !important; max-width:480px !important; aspect-ratio:6/7 !important; margin:0 auto !important; animation:none !important; transform:none !important; filter:none !important; }
  html.ios-safari-fallback .image-grid__feature-image { width:100% !important; height:100% !important; object-fit:cover !important; object-position:50% 50% !important; }
  html.ios-safari-fallback .vibes-headline { position:absolute !important; inset:0 !important; display:grid !important; place-items:center !important; animation:none !important; transform:none !important; filter:none !important; opacity:1 !important; }
/* Account Login - Track Order Page redirect message */
  #login__track-order-message-container {
    margin: 0 auto;
  }

  #login__track-order-message-container .track-order-message {
    text-align: center;
    margin-top: 25px;
  }

/* CSS from snippet stylesheet tags */
.promo-section-animation {
    position: relative;
    overflow: hidden;
  }

  .promo-section-animation .media-with-content__content-wrapper,
  .promo-section-animation .media-with-content__media-wrapper {
    opacity: 1;
    transform: translateY(60px);
    transition: transform 0.3s ease-out;
  }