.cmsSlot {
  --color-background: white;
  --color-text: #1d1d1d;
  --width-content-max: 1440px;
  color-scheme: light;
  background-color: var(--color-background);
  color: var(--color-text);

  &.light,.light {
    --color-background: white;
    --color-text: #1d1d1d;
    color-scheme: light;
    background-color: var(--color-background);
    color: var(--color-text);
  }
  &.desktop-light,.desktop-light {
    @media (min-width: 768px) {
      --color-background: white;
      --color-text: #1d1d1d;
      color-scheme: light;
      background-color: var(--color-background);
      color: var(--color-text);
    }
  }
  &.mobile-light,.mobile-light {
    @media (max-width: 768px) {
      --color-background: white;
      --color-text: #1d1d1d;
      color-scheme: light;
      background-color: var(--color-background);
      color: var(--color-text);
    }
  }

  &.dark,.dark {
    --color-background: #1d1d1d;
    --color-text: white;
    color-scheme: dark;
    background-color: var(--color-background);
    color: var(--color-text);
  }
  &.desktop-dark,.desktop-dark {
    @media (min-width: 768px) {
      --color-background: #1d1d1d;
      --color-text: white;
      color-scheme: dark;
      background-color: var(--color-background);
      color: var(--color-text);
    }
  }
  &.mobile-dark,.mobile-dark {
    @media (max-width: 768px) {
      --color-background: #1d1d1d;
      --color-text: white;
      color-scheme: dark;
      background-color: var(--color-background);
      color: var(--color-text);
    }
  }

  /* helpful for cms classes where the 'false' comes from a var, ie ctaEnabled */
  &.display-false,.display-false {display: none !important;}
  &.desktop,.desktop,&.desktopDisplay-false,.desktopDisplay-false {
    @media (max-width: 768px) {display: none !important;}
  }
  &.mobile,.mobile,&.mobileDisplay-false,.mobileDisplay-false {
    @media (min-width: 768px) {display: none !important;}
  }

  &.center,.center,.center-true {justify-content:center;margin-left:auto;margin-right:auto;text-align: center;}
  &.desktopCenter-true,.desktopCenter-true {
    @media (min-width: 768px) {justify-content:center;margin-left:auto;margin-right:auto;text-align: center;}
  }
  &.mobileCenter-true,.mobileCenter-true {
    @media (max-width: 768px) {justify-content:center;margin-left:auto;margin-right:auto;text-align: center;}
  }

  --font-size-body: 14px;
  --font-size-p: 0.875em;
  --font-size-h1: 4em;
  --font-size-h2: 3em;
  --font-size-h3: 2.5em;
  --font-size-h4: 2em;
  --font-size-h5: 1.5em;
  --font-size-h6: 1.3em;
  font-size:var(--font-size-body);
  @media (max-width: 768px) {
    --font-size-h1: 2.5em;
    --font-size-h2: 2em;
    --font-size-h3: 1.5em;
    --font-size-h4: 1em;
    --font-size-h5: 1em;
    --font-size-h6: 1em;
  }
  p {font-size:var(--font-size-p)};
  h1 {font-size:var(--font-size-h1)};
  h2 {font-size:var(--font-size-h2)};
  h3 {font-size:var(--font-size-h3)};
  h4 {font-size:var(--font-size-h4)};
  h5 {font-size:var(--font-size-h5)};
  h6 {font-size:var(--font-size-h6)};
  strong {font-size:unset} /* normalize.scss sets to 100% */
 
  *:not(.markdown) {
    h1,h2,h3,h4,h5,h6 {
      font-weight: bold; 
    }
  }

  /* this should be done for all templates bc the default is weirdly 1.25em */
  line-height: 1.2;

  strong { font-weight: bold; }

  .pageCenter {margin-left:auto;margin-right:auto;max-width:var(--width-content-max);}
}
.html-slot-container:first-of-type > .cmsSlot:first-of-type > .hero:first-of-type > .pageCenter:first-of-type {max-width: unset;}


.cmsSlot .athleteTag > div {
  background: transparent !important;
  font: inherit;
  font-size: 10px;
  gap: 8px;
  letter-spacing: 1px;
  overflow-wrap: break-word;
  padding: 20px;
  position: absolute;
  width: 100%;

  /* pos-0 should default to bottom-right */
  &.posX--50 {left: 0%;}
  &.posX-50,&.posX-0 {right: 0%;text-align: right;}
  &.posY--50 {top: 0px;}
  &.posY-50,&.posY-0 {bottom: 0px;}

  .athleteInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    @media (max-width: 768px) {
        gap: 3px;
    }
  }

  .athleteName {
    font-weight: 700;
    text-transform: uppercase;
  }

  &:has(.athleteInfo:nth-child(2)) {
    gap: 8px;
    .athleteInfo {
      gap: 4px;
      margin-bottom: 8px;
    }
  }

  &:not(:has(.athleteInfo:nth-child(2))) {
    gap: 0;
  }

  @media (max-width: 768px) {
    font-size: 8px;
    letter-spacing: 0.25px;
    padding: 8px;
    
  }
  
}


.cmsSlot .contentCarousel {
  --width-content-max: 1200px;
  > .teaserCtaSection {
    padding: 0 16px;
    padding-bottom: 0;
    @media (max-width: 768px) {
      padding-bottom: 20px;
    }
    > div > .row-1 >.subHeaderText {
      margin-bottom:10px;
    }
  }
  > .section-2 {
    padding: 0 16px;
    > .section-2-inner {
      --swiper-pagination-bottom: -34px;
      --swiper-navigation-sides-offset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      visibility: hidden;

      .cardContainer {
        .card {
          --card-header-font-size: var(--font-size-body);
          --card-header-font-weight: bold;
          --card-subheader-font-size: var(--font-size-p);
          --card-subheader-font-weight: bold;

          .mediaA {
            display: block;
            .media-desktop,.media-mobile {
              margin-bottom: 15px;
              width: 100%;
            }
          }

          .contentCarouselProductCard {
            .media-desktop,.media-mobile {
              align-items: center;
              aspect-ratio: 4 / 5;
              display: flex;
              justify-content: center;
              img {
                aspect-ratio: unset;
                height: 100%;
                object-fit: contain;
                object-position: center;
              }
            }
            .productWrapper {
              .productDetailWrapper {
                display: flex;
                flex-direction: column;
                gap: 10px;
                justify-content: center;
                width: 100%;
                word-wrap: break-word;
                overflow-wrap: break-word;
                white-space: normal;

                .swatchesSwiperWrapper {
                  display: flex;
                  height: 25px;
                  width: 100%;

                  .swatchContainer {
                    display: flex;
                    width: fit-content;
                    overflow: hidden;

                    .swiper-slide {
                      border-radius: 4px;
                      cursor: pointer;
                      height: 20px;
                      width: 20px !important;
                    }
                  }

                  .swatchSwiperNext path, .swatchSwiperPrev path {
                    stroke: var(--color-text);
                  }
                  .swatchSwiperNext.swiper-button-disabled path, .swatchSwiperPrev.swiper-button-disabled path {
                    stroke: #666;
                  }
                }

                > .productDetails {
                  flex-direction: column;
                  justify-content: center;
                  text-decoration: none;

                  h3 {
                    font-size: var( --card-header-font-size);
                    font-weight: var(--card-header-font-weight);
                  }

                  .product-subheader {
                    color: #5f5f5f;
                    font-size: var(--card-subheader-font-size);
                    font-weight: var(--card-subheader-font-weight);
                    margin: 0.25rem 0 0.5rem;
                  }

                  .product-price {
                    font-size: var(--font-size-body);
                  }

                  .product-promotion {
                    font-weight: bold;
                    font-size: var(--font-size-p);
                    color: #008850;
                  }
                  .price-actual {
                    text-decoration: line-through;
                    color: #dc0019;
                  }

                  .price-sales {
                    margin-left: 20px;
                    color: #dc0019;
                  }
                }
              }
            }
          }

          .contentCarouselMarketingCard {
            .productWrapper {
              .numberedCard {
                display: flex;
                justify-content: center;
                align-items: center;

                .numberedCard__circle {
                  align-items: center;
                  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
                  border-radius: 50%;
                  display: flex;
                  height: 70px;
                  justify-content: center;
                  margin-top: 10px;
                  width: 70px;

                  .numberedCard__number {
                    font-size: 30px;
                    font-weight: 400;
                    margin-top: 5px;
                  }
                }
              }

              .productDetailWrapper {
                display: flex;
                flex-direction: column;
                gap: 10px;
                width: 100%;                
                .teaser {
                  text-decoration: none;
                  .teaserHeader {
                    margin-top: 9px;
                    p {
                      font-size: var( --card-header-font-size);
                      font-weight: var(--card-header-font-weight);
                    }
                  }
                  .teaserSubheader {
                    color: #5f5f5f;
                    margin: 0.25rem 0 0.5rem;
                    p {
                      font-size: var(--card-subheader-font-size);
                      font-weight: var(--card-subheader-font-weight);
                    }
                  }
                }
              }
            }
          }
        }
      }

      .swiper-pagination-bullet {
        background-color: #ccc;
        opacity: 1;
      }

      .swiper-pagination-bullet-active {
        background-color: #000 !important;
      }

      .swiper-button-next::after,
      .swiper-button-prev::after {
        display: none;
      }

      .swiper-button-prev,
      .swiper-button-next {
        height: 25px !important;
        width: 25px !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        background-color: white;
        margin: 0 -12px;
        svg {
          padding: 6px;
          path {
            stroke: #666;
          }
        }
      }

      @media (max-width: 768px) {
        --swiper-pagination-bottom: -44px;
        .swiper-pagination,
        .swiper-button-prev,
        .swiper-button-next {
          display: none;
        }

        &.Carousel {
          display: flex;
          flex-direction: column;
          
          .swiper-pagination,
          .swiper-button-prev,
          .swiper-button-next {
              display: block;
          }

          .cardContainer {
            display: flex;
            gap: 0.5rem;
            width: 100%;

            .card {
              min-width: 80%;
              margin: 0 !important;
            }
          }
        }

        &.Grid {
          display: flex;
          padding: 0.875rem;

          .cardContainer {
            display: flex;
            flex-wrap: wrap;
            gap: 0.875rem;
            width: 100%;

            .card {
              flex: 0 0 calc(50% - 0.4375rem);
              max-width: calc(50% - 0.4375rem);
              box-sizing: border-box;
              margin: 0 !important;        
            }
          }
        }

        &.Stack {
          display: flex;
          flex-direction: column;
          padding: 0.875rem;

          .cardContainer {
            display: flex;
            flex-wrap: wrap;
            gap: 0.875rem;
            width: 100%;

            .card {
              min-width: 100%;
            }
          }
        }

        &.Compact.Stack {
          display: flex;
          gap: 0.875rem;
          width: 100%;

          .cardContainer {
            display: flex;
            flex-direction: row;
            gap: 0.875rem;
            width: 100%;

            .contentCarouselProductCard,
            .contentCarouselMarketingCard {
              .productWrapper {
                display: flex;
                flex-direction: row;

                .media {
                  min-width: 50%;
                  max-width: 50%;
                }

                .productDetailWrapper {
                  min-width: 50%;
                  max-width: 50%;
                  padding: 0.875rem;
                }
              }
            }
          }
        }
      }
    }

    .commonCta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding-top: 5rem;
      > a.button {
        background-color: var(--color-text);
        border-radius: 0.25rem;
        color: var(--color-background);
        font-weight: 500;
        line-height:2.7rem;
        max-width: 212px;
        margin-bottom: 3rem;
        padding-top: 4px;
        text-align: center;
        text-decoration: none;
        width: 100%;
        @media (max-width: 768px) {
          max-width:100%;
        }
      }
    }
  }
}


.cmsSlot .hero1 {
  > .section-1 {
    position: relative;
    > .body {
      background-color: transparent !important;
      box-sizing: border-box;
      position: absolute;
      max-width: var(--bodyWidth);

      /*
      Position the teaser section over the hero image.
      Notes:
      - Center if "posX-" or "posY-". This can happen if curator minimizes the
      "Style for hero N" section before selecting "hero 1", AND then saves the 
      content without ever expanding that section. 
      */
      &.posX--50 {left:8%;max-width:calc(var(--bodyWidth) - 8%)}
      &.posX-0,&.posX- {left:50%;transform:translateX(-50%);}
      &.posX-50 {right:8%;max-width:calc(var(--bodyWidth) - 8%);}
      &.posY--50 {top:70px;}
      &.posY-0,&.posY- {top:50%;transform:translateY(-50%);}
      &.posY-50 {bottom:70px;}
      &.posX-0.posY-0,&.posX-,&.posY- {transform:translate(-50%, -50%);}

      > .row-1 {
        > .snipeText {
          padding-bottom: 4px;
          p {font-size: var(--font-size-h6)}
        }
        > .headerText {
          margin: 4px 0 12px;
          * {
            line-height: 1;
            letter-spacing: 2px;
            font-stretch: condensed;
          }
        }
        > .subHeaderText {
          margin-bottom: 24px;
        }
      }
      > .row-2 {
        display: flex;
        gap: 24px;
        > a.button {
          background-color: var(--color-text);
          border-radius: 0.25rem;
          color: var(--color-background);
          font-size: .75rem;
          font-weight: 500;
          max-width: 288px;
          width: 212px;
          padding: 17px 0 13px;
          text-align: center;
          text-decoration: none;
        }
      }


    }
  }

  > .teaserCtaSection {
    @media (min-width: 768px) {display:none;}
  }
}

.cmsSlot .hero4 {
  > .section-1 {
    position: relative;
  }
}

.cmsSlot .media {
  img {
    aspect-ratio: var(--width) / var(--height) auto;
    display: block;
    width: 100%;
  }
}
 
.cmsSlot .teaserCtaSection {
  padding: 56px 16px;
  > div {
    margin: 0 auto;
    width: var(--desktopWidth);
    @media (max-width: 768px) {
      width: var(--mobileWidth);
    }
    > .row-1 {
      padding-top: 18px;
      @media (max-width: 768px) {
        padding-top: 0;
      }
      > .snipeText {
        padding-bottom: 4px;
        p {font-size: var(--font-size-h6)}
      }
      > .headerText {
        margin: 4px 0 12px;
        * {
          line-height: 1.3;
        }
      }
      > .subHeaderText {
        margin-bottom: 24px;
        * {
          padding-bottom: .4rem;
          @media (max-width: 768px) {
            padding-bottom: .1rem;  
          }
        }
      }
    }
    > .row-2 {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      > a.button {
        background-color: var(--color-text);
        border-radius: 0.25rem;
        color: var(--color-background);
        font-weight: 500;
        line-height:2.7rem;
        max-width: 212px;
        padding-top: 4px;
        text-align: center;
        text-decoration: none;
        width: 100%;
        @media (max-width: 768px) {
          max-width:100%;
        }
      }
    }
  }
}

.cmsSlot .video {
  video {
    /* Note: chrome has a bug/quirk with video and aspect-ratio that height
       is higher than should be, so we set with js instead */
    display: block;
    width: 100%;
  }
  > .playOverlay {
    display: none;
  }
  &.experience-click-to-play,&.experience-click-to-overlay,&.experience-looping-to-overlay {
    position: relative;
    > .playOverlay {
      align-items: center;
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      left: 0;
      position: absolute;
      top: 0;
      transition: opacity 0.3s ease-in-out;
      width: 100%;
      > .circle {
        align-items: center;
        background-color: black;
        border-radius: 50%;
        color: white;
        display: flex;
        height: 50px;
        justify-content: center;
        width: 50px;
        > svg {
          margin-left: 4px;
        }
      }
    }
  }
  > .dialog {
    align-items: center;
    background: none;
    border: none;
    height: 90vh;
    justify-content: center;
    padding: 0;
    width: 80vw;
    @media (max-width: 768px) {
      height: 100%;
      width: 100%;
    }
    &:open {display: flex;}
    &::backdrop {
      background: rgba(0,0,0,0.9);
    }
    .dialogContent {
      position: relative;
    }
    .dialogClose {
      align-items: center;
      background-color: unset;
      border-width: 0;
      cursor: pointer;
      display: flex;
      height: 32px;
      justify-content: center;
      position: absolute;
      right: 8px;
      top: 8px;
      width: 32px;
    }
  }
  
}