/** Shopify CDN: Minification failed

Line 419:3 Cannot use type selector "--sub" directly after nesting selector "&"
Line 473:7 Cannot use type selector "--numbers" directly after nesting selector "&"

**/
/* --------------------------------------------------------------------------
   Section card layout & sub-tab styles
   -------------------------------------------------------------------------- */

[id^='shopify-section-'] {
  .blog__posts {
    .article-card-wrapper {
      width: 100%;
      height: auto;
    }

    .article-card .card__inner {
      flex-shrink: 0;
      height: var(--article-card-media-height);
    }

    @media screen and (min-width: 750px) {
      .blog__post {
        display: flex;
      }

      .article-card-wrapper {
        flex: 1;
        display: flex;
      }

      .article-card {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;

        .view-article {
          margin-top: auto;
        }
      }
    }
  }

  .blog-by-type .slider-slide {
    @media screen and (min-width: 750px) {
      .blog__post {
        height: 100%;
        display: flex;
      }

      .article-card-wrapper {
        height: 100%;
        flex: 1;
        display: flex;
      }

      .article-card {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
  }

  .blog__post .article-card-wrapper .article-card .excerpt-content {
    overflow: visible;
  }

  .slider-buttons--mobile-only {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
}

.blog-center {
  .collapsible-sub-toggles-container {
    .collapsible-sub-toggle {
      .collapsible-sub-title {
        color: #545454;
        font-weight: 600;
      }

      &.is-open .collapsible-sub-title {
        color: #ffffff;
        font-weight: 700;
      }

      &:hover .collapsible-sub-title,
      &:focus-visible .collapsible-sub-title {
        color: #ffffff;
      }
    }
  }

  .title-wrapper-with-link {
    align-items: flex-start;

    .blog__heading-group {
      flex: 1;
      min-width: 0;
    }

    .blog__description {
      margin-block: 3rem 1.5rem;
      color: #545454;
      font-size: 1.4rem;
      line-height: 1.5;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .blog__sort {
      flex-shrink: 0;
      margin-inline-start: 2rem;
      align-self: flex-start;
      margin-top: 0.8rem;
    }

    @media screen and (max-width: 767px) {
      flex-wrap: wrap;
      gap: 1.2rem;

      .blog__title {
        font-size: 3.5rem;
      }

      .blog__sort {
        width: 100%;
        margin: 0;
      }

      .blog__sort-control {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }

      .blog__sort-select-wrap {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
      }

      .blog__sort-select {
        max-width: 100%;
        text-align: right;
      }
    }
  }

  .blog__posts--mobile-list .blog__post {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .horizontal-tabs {
    .grid__item .blog-tab {
      margin: 0;
      border: none;

      & + .blog-tab {
        margin-top: 0;
        border-top: none;
      }
    }
  }

  .collapsible-content .horizontal-tabs {
    .grid__item .blog-tab {
      &[hidden],
      .blog-sub-panel[hidden],
      .blog__description[hidden] {
        display: none !important;
      }

      &:not([hidden]) {
        display: block;
      }
    }
  }

  @media screen and (max-width: 959px) {
    &[data-mobile-picker-type='dropdown'] .collapsible-toggles-container,
    &[data-mobile-picker-type='dropdown'] .collapsible-sub-toggles-container--desktop {
      display: none !important;
    }

    &[data-mobile-picker-type='tab'] .blog__mobile-controls,
    &[data-mobile-picker-type='tab'] .blog__mobile-select--sub {
      display: none !important;
    }
  }

  @media screen and (max-width: 959px) {
    .horizontal-tabs .grid__item .blog-tab {
      border-bottom: none;
    }
  }

  .blog-article-slider.desktop {
    @media screen and (min-width: 768px) and (max-width: 989px) {
      .blog__posts.blog-by-type .slider-slide {
        --blog-slide-columns: 2;
      }
    }

    @media screen and (max-width: 767px) {
      display: none;
    }
  }
}

.collapsible-content:has(.horizontal-tabs).isolate,
.collapsible-content .collapsible-content__wrapper {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Sort & dropdown controls (shared by sort, category, topic)
   -------------------------------------------------------------------------- */

.blog__sort-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 4.4rem;
  margin-bottom: 1rem;
  padding: 1rem 1.4rem;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 0.4rem;
}

.blog__sort-label {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: #222222;
  white-space: nowrap;
}

.blog__sort-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.blog__sort-select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 2rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: #222222;
  cursor: pointer;
  min-height: 0;
  text-align: right;

  &:hover,
  &:focus,
  &:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

.blog__sort-caret {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.2rem;
  height: auto;
  pointer-events: none;
  transform: translateY(-50%);

  path {
    fill: #545454;
  }
}

.blog__sort-select-wrap--category {
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}

.blog__category-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  width: 100%;
  margin: 0;
  padding: 0 2rem 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: #222222;
  cursor: pointer;
  text-align: right;

  &:hover,
  &:focus,
  &:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

.blog__category-select-trigger__label {
  min-width: 0;
}

.blog__sort-select-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}

.blog__category-select-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 0.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.blog__category-select-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.8rem 1.2rem;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  color: #222222;
  text-align: left;
  cursor: pointer;

  &:hover,
  &:focus,
  &:focus-visible {
    outline: none;
    background: #f5f5f5;
  }
}

.blog__category-select-option__label {
  min-width: 0;
}

.blog__category-select-list [role='option'][aria-selected='true'] .blog__category-select-option {
  background: #f0f7ed;
}

.blog__tablet-down-only,
.blog__mobile-only {
  display: block;
}

.blog__mobile-controls {
  margin-bottom: 1.6rem;
}

.blog__mobile-select {
  width: 100%;

  .blog__sort-control {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  &--sub {
    margin-bottom: 1.6rem;
  }
}

.blog__posts--mobile-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 0 !important;
  overflow: visible;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Responsive layout
   -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  .blog__mobile-only {
    display: none;
  }
}

@media screen and (min-width: 960px) {
  .blog__tablet-down-only {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Slider pagination
   -------------------------------------------------------------------------- */

.blog-article-slider:has(.slider-pagination-numbers) .blog__posts {
  padding-top: 20px;
}

.blog {
  .slider-buttons:has(.slider-pagination-numbers) {
    position: static;
    top: auto;
    right: auto;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    margin-top: 1.2rem;
    padding: 0 2rem;

    .slider-counter {
      min-width: auto;

      &--numbers {
        margin: 0;
      }
    }

    .slider-pagination-numbers {
      display: flex;
      align-items: center;
      gap: 0.2rem;
    }

    .slider-pagination-ellipsis {
      padding: 0 0.2rem;
      line-height: 1;
      color: #545454;
      user-select: none;
    }

    .slider-counter__link--numbers {
      padding: 0.2rem 0.5rem;
      font-size: 16px;
      background: none;
      border: none;
      cursor: pointer;
      color: #545454;
    }

    .slider-counter__link--active.slider-counter__link--numbers {
      font-weight: 700;
      color: #222222;
      text-decoration: none;
    }
  }
}

/* --------------------------------------------------------------------------
   Video article cards
   -------------------------------------------------------------------------- */

.article-card-wrapper--video {
  cursor: pointer;

  .article-card {
    .card__heading a::after {
      content: none;
      display: none;
    }

    > .card__heading a::after {
      content: '';
      display: block;
      position: absolute;
      top: calc(var(--article-card-media-height) + var(--article-card-body-gap));
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
    }

    > .view-article {
      position: relative;
      z-index: 2;
    }
  }
}

.article-card__image-wrapper--playable {
  position: relative;
}

.article-card--video {
  .view-article {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }

  .media > .article-card__video-play-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease;
    text-decoration: none;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      z-index: 0;
    }

    .article-card__video-play {
      position: relative;
      z-index: 1;
    }
  }

  .article-card__image-wrapper--playable {
    .media {
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.15);
        pointer-events: none;
        transition: background 0.2s ease;
      }

      img {
        @media screen and (min-width: 990px) {
          opacity: 1;
          transition: transform var(--duration-long) ease;
        }
      }
    }
  }

  &:hover,
  &:focus-within {
    .article-card__image-wrapper--playable .media::before,
    .article-card__video-play-link {
      background: rgba(0, 0, 0, 0.3);
    }

    .article-card__image-wrapper--playable img,
    .article-card__video-play-link img,
    .media.media--hover-effect > img:first-child {
      @media screen and (min-width: 990px) {
        opacity: 1;
        transform: scale(1.03);
      }
    }
  }

  .article-card__video-play-link img,
  .media.media--hover-effect > img:first-child {
    @media screen and (min-width: 990px) {
      opacity: 1;
      transition: transform var(--duration-long) ease;
    }
  }
}

.article-card__video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.blog__post .article-card-wrapper {
  .article-card .card__heading a {
    font-size: 1.7rem;
    line-height: 1.2;
  }

  &:hover .article-card .card__heading a,
  &:focus .article-card .card__heading a {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  @media screen and (min-width: 1140px) {
    .article-card .card__heading a {
      font-size: 2rem;
    }
  }
}

.card-wrapper:hover .article-card--video {
  .article-card__image-wrapper--playable img,
  .article-card__video-play-link img,
  .media.media--hover-effect > img:first-child {
    @media screen and (min-width: 990px) {
      opacity: 1;
      transform: scale(1.03);
    }
  }
}

.article-card__video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;

  .icon-play {
    width: 30px;
    height: 30px;
    color: #ffffff98;
  }

  &::after {
    content: none;
  }

  @media screen and (max-width: 749px) {
    width: 4rem;
    height: 4rem;

    .icon-play {
      width: 1.25rem;
      height: 1.25rem;
    }
  }
}

/* --------------------------------------------------------------------------
   Article video modal
   -------------------------------------------------------------------------- */

.article-video-modal {
  &.modal-video[open] {
    z-index: 1000000000001;
  }

  &.modal-video {
    background: rgba(17, 17, 17, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    &:hover {
      cursor: pointer;
    }
  }

  .modal-video__content {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    box-sizing: border-box;
    min-height: 100%;
    padding:
    calc(2rem + env(safe-area-inset-bottom, 0px))
      1.5rem
      calc(2rem + env(safe-area-inset-bottom, 0px));

    @media screen and (min-width: 750px) {
      padding:
      calc(3rem + env(safe-area-inset-bottom, 0px))
        3rem
        calc(3rem + env(safe-area-inset-bottom, 0px));
    }
  }

  .modal-video__content-info {
    width: min(100%, 960px);
    height: auto;
    max-height: calc(
      100dvh - var(--header-height, 8rem) - 4rem - env(safe-area-inset-bottom, 0px)
    );
    margin: 0 auto;
    padding: 0;
  }

  .modal-video__toggle {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    color: #222222;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    right: 40px;
    top: 40px;
  }
}

.article-video-modal__player {
  position: relative;
  width: 100%;
  max-height: calc(
    100dvh - var(--header-height, 8rem) - 4rem - env(safe-area-inset-bottom, 0px)
  );
  aspect-ratio: 16 / 9;
  height: auto;
  background: #000000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);

  iframe,
  video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.article-video-modal__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  background: #000000;
  color: #ffffff;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
  }

  &:hover::before,
  &:focus-visible::before {
    background: rgba(0, 0, 0, 0.35);
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: 0.2rem solid rgba(255, 255, 255, 0.95);
    outline-offset: -0.2rem;
  }
  &:hover, &:focus-visible {
    .article-video-modal__poster-button {
      color: #ffffff9b;
    }
  }
}

.article-video-modal__poster-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-video-modal__poster-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.2rem;
  height: 6.2rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff6f;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
  pointer-events: none;

  .icon,
  .icon-play {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-left: 0.2rem;
    flex-shrink: 0;
  }
}

.article-video-modal__poster:hover .article-video-modal__poster-button,
.article-video-modal__poster:focus-visible .article-video-modal__poster-button {
  transform: translate(-50%, -50%) scale(1.08);
}