@import url('https://images.marketamerica.com/fonts/Montserrat/montserrat.css');

:root {
  --sp-spacing: 1.35rem;
  --sp-spacing--sm: calc(var(--sp-spacing) / 2);
  --sp-spacing--lg: calc(var(--sp-spacing) * 1.5);
  --sp-spacing--xl: calc(var(--sp-spacing) * 2);
  --sp-spacing--xxl: calc(var(--sp-spacing) * 3);

  --sp-container-padding: var(--sp-spacing);
  --sp-container-padding--sm: calc(var(--sp-container-padding) / 2);
  --sp-container-padding--lg: calc(var(--sp-container-padding) * 2);
  --sp-container-padding--xl: calc(var(--sp-container-padding) * 3);
  --sp-container-padding--xxl: calc(var(--sp-container-padding) * 4);

  --sp-recessed: 150px;

  --sp-radius: 1.35rem;
  --sp-radius--sm: calc(var(--sp-radius) / 2);
  --sp-radius--pill: 100vw;

  --sp-star-size: 20px;

  --sp-font-size--xs: 12px;
  --sp-font-size--sm: 14px;
  --sp-font-size--md: 16px;
  --sp-font-size--lg: 18px;
  --sp-font-size--xl: 24px;
  --sp-font-size--xxl: 30px;

  --sp-color--text: black;
  --sp-color--text-light: #787878;
  --sp-color--text-lighter: #999999;
  --sp-color--primary: #BCE248;
  --sp-color--secondary: #F2FC68;
  --sp-color--featured: #b23f02;
  --sp-color--headline: #00134d;
  --sp-color--srp: black;

  --sp-button--bg: linear-gradient(-15deg, var(--sp-color--primary), var(--sp-color--secondary));

  --sp-border-color: #dddddd;
  --sp-border-color: rgba(0, 0, 0, 0.075);

  --sp-image--flame: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/flame.svg');

  --sp-image--hero-bg: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-bg.jpg');
  --sp-image--hero-text-eng: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-text--eng.svg');
  --sp-image--hero-text-hkg-chi: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-text--hkg.svg');
  --sp-image--hero-text-s-chi: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-text--s-chi.svg');
  --sp-image--hero-text-t-chi: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-text--t-chi.svg');
  --sp-image--hero-text-msa: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-text--msa.svg');
  --sp-image--hero-text-twn-chi: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/extended/hero-text--twn-chi.svg');
  --sp-image--hero-text: var(--sp-image--hero-text-eng);

  --sp-image--footer-bg: url('https://images.marketamerica.com/images/campaigns/2026/05-11-sale-promotion/footer-bg.jpg');

  --sp-icon--add: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath d='M395.508 270.508h-125v125h-41.016v-125h-125v-41.016h125v-125h41.016v125h125v41.016z'%3E%3C/path%3E%3C/svg%3E%0A");
  --sp-icon--star: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='%23f8c264'%3E%3Cpath d='M250 359.375l-128.906 78.125 34.18-146.484-113.281-98.633 149.414-12.695 58.594-137.695 58.594 137.695 149.414 12.695-113.281 98.633 34.18 146.484z'%3E%3C/path%3E%3C/svg%3E%0A");
  --sp-icon--loading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='black'%3E%3Cpath d='M494.5 245h.4c-1.2-30.3-8.2-60.6-20.2-87.9-12.6-28.8-31.3-55.6-54.1-77.5-22.6-21.7-49.9-39.2-78.9-50.5-27.3-10.7-57.1-16.3-86.6-16.3-1.7 0-3.3 0-5 .1-30.9.6-62.1 7.4-90.1 19.8-27.9 12.1-53.8 30.2-74.9 52.3-21 21.9-37.9 48.3-48.8 76.4-10.9 27.9-16.3 58.5-15.6 88.5.6 29.9 7.2 60 19.2 87.1 11.8 27 29.4 52 50.7 72.4 21.2 20.3 46.7 36.6 73.9 47.2 26.9 10.5 56.5 15.7 85.5 15.1 28.9-.6 58-7 84.1-18.6 11.5-5.1 22.7-11.2 33.2-18.3-10.8 6.6-22.2 12.2-33.9 16.7-26.2 10.2-55.1 15.2-83.4 14.5-28.2-.6-56.5-7-81.9-18.2-25.3-11.2-48.8-27.8-68-47.9-19-20-34.3-44-44.2-69.5-9.9-25.4-14.7-53.2-14-80.5.6-27.1 6.7-54.4 17.6-78.9 10.8-24.4 26.8-47 46.2-65.5 19.3-18.3 42.4-33 67-42.5 24.4-9.4 51.1-14 77.4-13.3 26.1.7 52.4 6.5 75.9 17.1 23.5 10.4 45.2 25.8 62.9 44.5 17.6 18.5 31.7 40.8 40.8 64.5 8.5 22.2 12.8 45.5 12.8 69.3h.5l-.4 5.4c-.1.8-.1 1.5-.1 2.2 0 13.4 10.1 24.7 23.4 26.1l1.3.1c.5 0 1 .1 1.5.1 14.5 0 26.2-11.8 26.2-26.2 0-.7 0-1.4-.1-2.2l-.3-5.6z'/%3E%3C/svg%3E");
  --sp-icon--check: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill='black'%3E%3Cpath d='M187.5 336.914l220.703-220.703 29.297 29.297-250 250-116.211-116.211 29.297-29.297z'%3E%3C/path%3E%3C/svg%3E");

  --sp-heading-shadow--width: 10vw;
  --sp-heading-shadow--offset: calc(var(--sp-heading-shadow--width) * 2);
  --sp-heading-shadow--blur: var(--sp-heading-shadow--width);
  --sp-heading-shadow--spread: calc(var(--sp-heading-shadow--width) * -1);
  --sp-heading-shadow--left: inset var(--sp-heading-shadow--offset) 0 var(--sp-heading-shadow--blur) var(--sp-heading-shadow--spread) white;
  --sp-heading-shadow--right: inset calc(var(--sp-heading-shadow--offset) * -1) 0 var(--sp-heading-shadow--blur) var(--sp-heading-shadow--spread) white;
}

@media (max-width: 767px) {
  header+main {
    margin-top: 0;
  }
}

.s-sales-promotion {
  font-family: 'Montserrat', sans-serif;

  .container-viewport {
    margin-left: -50vw;
    left: 50%;
    position: relative;
    width: 100vw;
  }

  .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--sp-container-padding--sm);
    padding-right: var(--sp-container-padding--sm);
    width: auto;

    @media (min-width: 768px) {
      padding-left: var(--sp-container-padding);
      padding-right: var(--sp-container-padding);
    }

    @media (min-width: 992px) {
      padding-left: var(--sp-container-padding--lg);
      padding-right: var(--sp-container-padding--lg);
    }

    @media (min-width: 1200px) {
      padding-left: var(--sp-container-padding--xl);
      padding-right: var(--sp-container-padding--xl);
    }

    @media (min-width: 1366px) {
      padding-left: var(--sp-container-padding--xxl);
      padding-right: var(--sp-container-padding--xxl);
    }
  }

  .c-shell {
    align-items: center;
    background: var(--sp-color--primary);
    color: contrast-color(var(--sp-color--primary));
    /* display: flex; */
    display: none;
    font-size: var(--sp-font-size--lg);
    gap: var(--sp-spacing);
    justify-content: center;
    padding: var(--sp-spacing);
    text-align: center;

    .c-shell__content {
      font-weight: 500;
      line-height: 1;
      text-transform: uppercase;
    }
  }

  .c-icon--fire {
    aspect-ratio: 1;
    background: no-repeat center / contain;
    background-image: var(--sp-image--flame);
    display: inline-block;
    width: var(--sp-font-size--xxl);
  }

  .c-sales-header {
    background: no-repeat center top / cover;
    background-image: var(--sp-image--hero-bg);
    margin-bottom: -1px;
    overflow: hidden;
    padding-top: var(--sp-spacing--xl);
    padding-bottom: 0;
    z-index: -1;

    .c-sales-header__title {
      aspect-ratio: 3 / 1;
      background: no-repeat center / contain;
      background-image: var(--sp-image--hero-text);
      display: block;
      margin: 0 auto;
      max-width: 800px;
      width: 100%;
    }

    .c-sales-header__content {
      backdrop-filter: blur(5px);
      background: rgba(255, 255, 255, 0.1);
      background-image: linear-gradient(to bottom, transparent, white 90%);
      box-shadow: 0 0 20px -5px rgba(0, 0, 0, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 5px rgba(255, 255, 255, 0.45), inset 0 0 50px rgba(255, 255, 255, 0.25);
      border-radius: var(--sp-radius) var(--sp-radius) 0 0;
      margin-top: var(--sp-spacing--lg);
      min-height: var(--sp-recessed);
      padding: var(--sp-spacing--xl);
      text-align: center;

      h1 {
        color: var(--sp-color--text);
        display: none;
        font-size: var(--sp-font-size--xl);
        font-weight: 700;
        margin: 0;
        text-transform: uppercase;
      }

      h2 {
        color: var(--sp-color--text);
        display: none;
        font-size: var(--sp-font-size--lg);
        font-weight: 500;
        margin: var(--sp-spacing) 0 0;
      }
    }
  }

  .c-legend {
    align-items: flex-end;
    color: var(--sp-color--text);
    display: flex;
    font-size: var(--sp-font-size--md);
    font-weight: 500;
    gap: var(--sp-spacing--sm);
    justify-content: center;
    line-height: 1;
    margin: var(--sp-spacing) 0 0;
    margin-top: calc(calc(var(--sp-recessed) - var(--sp-spacing)) * -1);
    text-transform: uppercase;

    .c-icon--fire {
      width: var(--sp-font-size--xl);
    }
  }

  .c-sales-disclaimer {
    font-size: var(--sp-font-size--sm);
    margin-top: var(--sp-spacing--xl);
    text-align: center;
  }

  .c-sales-educate {
    border: 1px solid var(--sp-color--primary);
    border-radius: var(--sp-radius);
    margin-top: var(--sp-spacing--xxl);
    padding: var(--sp-spacing--xl);
    text-align: center;

    h2 {
      color: var(--sp-color--primary);
      font-size: var(--sp-font-size--xl);
      font-weight: 600;
      margin: 0;
      text-transform: uppercase;
    }

    p {
      color: var(--sp-color--primary);
      margin: var(--sp-spacing) 0 0;
    }
  }

  .c-sales-footer {
    background: no-repeat center / cover;
    background-image: var(--sp-image--footer-bg);
    margin-top: var(--sp-spacing--lg);
    padding: var(--sp-spacing--xxl) 0;
    text-align: center;

    h1 {
      color: white;
      font-size: var(--sp-font-size--xxl);
      font-weight: 600;
      text-transform: uppercase;
    }
  }

  .c-products {
    margin-top: var(--sp-spacing--xl);
    padding-left: var(--sp-spacing);
    padding-right: var(--sp-spacing);
  }

  .c-products__heading {
    align-items: center;
    background: no-repeat center top / cover;
    color: var(--sp-color--headline);
    display: flex;
    font-size: var(--sp-font-size--xl);
    font-weight: 700;
    gap: var(--sp-spacing--sm);
    justify-content: center;
    margin: 0;
    padding: var(--sp-spacing) 0;
    text-transform: uppercase;
    width: 100%;

    @media (min-width: 768px) {
      :root {
        --sp-heading-shadow--width: 200px;
      }
    }
  }

  .c-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-spacing--lg);
    margin-top: var(--sp-spacing--lg);

    @media (min-width: 480px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 576px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }

    @media (min-width: 992px) {
      grid-template-columns: repeat(4, 1fr);
    }

    @media (min-width: 1200px) {
      grid-template-columns: repeat(5, 1fr);
    }

    @media (min-width: 1920px) {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .c-product {
    border: 1px solid var(--sp-border-color);
    border-radius: var(--sp-radius);
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;

    &.is-hottt:after {
      aspect-ratio: 1;
      background: no-repeat center / contain;
      background-image: var(--sp-image--flame);
      content: '';
      position: absolute;
      right: var(--sp-spacing--sm);
      top: var(--sp-spacing--sm);
      width: var(--sp-font-size--xl);
    }
  }

  .c-product__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--sp-spacing);
    
    a {
      text-decoration: none;
    }
  }

  .c-product__image {
    width: 100%;
  }

  .c-product__sold-by {
    color: var(--sp-color--text-light);
    font-size: var(--sp-font-size--xs);
    margin: 0;
  }

  .c-product__name {
    font-size: var(--sp-font-size--lg);
    margin: var(--sp-spacing--sm) 0 0;
    text-decoration: none;
  }

  .c-product-rating {
    align-items: center;
    display: flex;
    gap: var(--sp-spacing--sm);
    margin: var(--sp-spacing--sm) 0 0;
  }

  .c-product-rating__display {
    aspect-ratio: 5 / 1;
    position: relative;
    width: calc(var(--sp-star-size) * 5);
  }

  .c-product-rating__stars {
    background: repeat left center / var(--sp-star-size);
    background-image: var(--sp-icon--star);
    display: inline-block;
    height: var(--sp-star-size);
    left: 0;
    position: absolute;
    top: 0;
  }

  .c-product-rating__stars--background {
    filter: grayscale(1);
    opacity: 0.4;
    width: 100%;
  }

  .c-product-rating__count {
    font-size: var(--sp-font-size--sm);
  }

  .badge {
    align-items: center;
    color: white;
    display: inline-flex;
    font-size: var(--sp-font-size--sm);
    font-weight: 600;
    justify-content: center;
    min-height: 1.7em;
    min-width: 4.5em;
    text-transform: uppercase;
  }

  .badge-pill {
    border-radius: var(--sp-radius--pill);
  }

  .badge-srp {
    background-color: var(--sp-color--srp);
  }

  .c-price-group {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--sp-spacing--sm);
    margin: var(--sp-spacing) 0 0;
  }

  .c-price-group__item {
    align-items: center;
    display: grid;
    grid-gap: 0 var(--sp-spacing--sm);
    grid-template-columns: auto 1fr;
    text-align: left;
    width: 100%;

    .c-price {
      color: var(--sp-color--featured);
      font-size: var(--sp-font-size--md);
      grid-column: 1 / 3;
      grid-row: 1 / 2;
      line-height: 1;
      margin: 0;

      &.text-default {
        align-items: center;
        color: black;
        display: flex;
        font-size: var(--sp-font-size--xs);
      }
    }

    .c-price--discount {
      font-weight: 600;
    }

    .c-price--discount[hidden]+.c-price--original {
      grid-row: 1 / 2;
      text-decoration: none;
    }

    .c-price--discount:not(hidden)+.c-price--original {
      color: var(--sp-color--text-lighter) !important;
      font-size: var(--sp-font-size--sm);
      font-weight: 400;
      grid-row: 2 / 3;
      text-decoration: line-through;
    }

    .c-cashback-icon {
      margin: 0 calc(var(--sp-spacing--sm) / 2);
      width: 1em;
    }
  }

  .c-product__actions {
    align-items: center;
    display: flex;
    gap: var(--sp-spacing--sm);
    justify-content: center;
    margin: var(--sp-spacing) 0 0;

    .btn {
      align-items: center;
      background: var(--sp-button--bg);
      border: none;
      border-radius: var(--sp-radius--pill);
      color: contrast-color(var(--sp-color--primary));
      cursor: pointer;
      display: flex;
      font-size: var(--sp-font-size--md);
      gap: var(--sp-spacing--sm);
      justify-content: center;
      padding: var(--sp-spacing--sm) var(--sp-spacing--xl);
      position: relative;

      &:focus,
      &:active {
        border: none;
        outline: none;
      }

      &:after {
        aspect-ratio: 1;
        background: no-repeat center / contain;
        content: '';
        left: 50%;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transition: opacity 0.3s ease-out;
        transform: translate(-50%, -50%);
        width: 1.5em;
      }

      span {
        line-height: 1.1;
        transition: opacity 0.3s ease-out;
        white-space: normal;
        width: fit-content;
      }
    }

    .btn:only-child {
      min-width: 60%;
    }

    .btn.u-loading {
      &:after {
        animation: sp-loading 1s linear infinite;
        background-image: var(--sp-icon--loading);
        opacity: 1;
      }

      span {
        opacity: 0;
      }
    }

    .btn.is-added {
      &:after {
        background-image: var(--sp-icon--check);
        opacity: 1;
      }

      span {
        opacity: 0;
      }
    }
  }

  .u-icon--add:before {
    background: no-repeat center / cover;
    background-color: currentColor;
    content: '';
    display: inline-flex;
    mask: no-repeat center / cover;
    mask-image: var(--sp-icon--add);
    width: 1em;
    height: 1em;
    min-width: 1em;
  }

  .d-none {
    display: none;
  }
}

@keyframes sp-loading {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}