/*
 * Xiaomi 11.11 sale page
 * Sections: promotional page sections, in page order.
 *
 * Breakpoints: mobile <=720px | tablet 721-1024px | laptop 1025-1440px | desktop 1441-1920px | widescreen >=1921px
 */

/* ==========================================================================
   Hero banner
   ========================================================================== */

:where(.sale-page) .banner-links{
  box-sizing: border-box;
  --title-font-weight: 700;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

:where(.sale-page) .banner-links--weight-semibold{
  --title-font-weight: 700;
}

:where(.sale-page) .banner-links__image{
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

:where(.sale-page) .banner-links__tc{
  z-index: 3;
  align-items: start;
  display: flex;
  position: absolute;
}

:where(.sale-page) .banner-links__tc-link{
  -webkit-margin-start: auto;
  color: var(--event-light-dark-text-on-countdown);
  cursor: pointer;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  display: flex;
}

:where(.sale-page) .banner-links__tc-link:not([dir="rtl"]){
  margin-left: auto;
}

:where(.sale-page) .banner-links__tc-link .micon-arrow-right-outlined{
  transform: scaleX(var(--cardinal-number));
  display: inline-block;
}

:where(.sale-page) .banner-links__tc-text{
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  line-height: 1;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .banner-links__inner{
  z-index: 2;
  width: 100%;
  max-width: var(--content-frame-width,100%);
  height: 100%;
  margin: 0 auto;
  position: relative;
}

:where(.sale-page) .banner-links__content{
  top: var(--content-top,50%);
  bottom: var(--content-bottom,auto);
  z-index: 2;
  box-sizing: border-box;
  width: var(--content-width);
  min-height: var(--content-height,auto);
  text-align: center;
  transform: var(--content-transform,translate(-50%,-50%));
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  left: 50%;
}

:where(.sale-page) .banner-links__title{
  margin: 0;
  margin-bottom: var(--title-gap);
  color: var(--event-light-dark-text-theme,#191919);
  font-weight: var(--title-font-weight);
  font-size: var(--title-font-size);
  white-space: pre-line;
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .banner-links__subtitle{
  margin: 0;
  margin-bottom: var(--subtitle-gap);
  color: var(--event-light-dark-text-on-primary,#191919);
  font-weight: var(--subtitle-font-weight,500);
  font-size: var(--subtitle-font-size);
  white-space: pre-line;
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .banner-links__tips{
  color: var(--event-light-dark-text-countdown,rgba(25,25,25,.7));
  font-weight: 400;
  font-size: var(--tips-font-size);
  white-space: pre-line;
  opacity: .7;
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .banner-links{
    --title-gap: 4px;
    --subtitle-gap: 4px;
    --cards-gap: 8px;
    --cards-margin-top: 12px;
    --title-font-size: 20px;
    --subtitle-font-size: 14px;
    --tips-font-size: 12px;
    --svg-title-width: 300px;
    --svg-title-max-height: 100px;
    --svg-title-gap: 8px;
  }

  :where(.sale-page) .banner-links--shortest{
    height: 480px;
  }

  :where(.sale-page) .banner-links--size-small{
    --title-font-size: 20px;
    --subtitle-font-size: 14px;
    --tips-font-size: 12px;
    --subtitle-gap: 4px;
    --svg-title-width: 300px;
    --svg-title-max-height: 100px;
    --svg-title-gap: 8px;
    --title-block-height: 114px;
    --desc-block-height: 114px;
  }

  :where(.sale-page) .banner-links__tc{
    top: 12px;
    left: 12px;
    right: 12px;
  }

  :where(.sale-page) .banner-links__tc-link{
    gap: 4px;
  }

  :where(.sale-page) .banner-links__tc-text{
    max-width: 160px;
    font-size: 12px;
  }

  :where(.sale-page) .banner-links__content{
    width: 328px;
  }

  :where(.sale-page) .banner-links__tips{
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :where(.sale-page) .banner-links--content-left-image-right{
    --content-width: 300px;
    --content-height: 174px;
    --content-transform: translateX(-50%);
  }

  :where(.sale-page) .banner-links--content-left-image-right{
    --content-top: 52px;
  }

  :where(.sale-page) .banner-links--content-left-image-right .banner-links__subtitle{
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .banner-links{
    --title-gap: 8px;
    --subtitle-gap: 8px;
    --cards-gap: 12px;
    --cards-margin-top: 20px;
    --title-font-size: 40px;
    --subtitle-font-size: 18px;
    --tips-font-size: 14px;
    --svg-title-width: 320px;
    --svg-title-max-height: 107px;
    --svg-title-gap: 16px;
  }

  :where(.sale-page) .banner-links--shortest{
    height: 360px;
  }

  :where(.sale-page) .banner-links--size-small{
    --title-font-size: 40px;
    --subtitle-font-size: 18px;
    --tips-font-size: 14px;
    --subtitle-gap: 8px;
    --svg-title-width: 320px;
    --svg-title-max-height: 107px;
    --svg-title-gap: 16px;
    --title-block-height: 100px;
    --desc-block-height: 72px;
  }

  :where(.sale-page) .banner-links__tc{
    top: 20px;
    left: 20px;
    right: 20px;
  }

  :where(.sale-page) .banner-links__tc-text{
    max-width: 200px;
    font-size: 14px;
  }

  :where(.sale-page) .banner-links--content-left-image-right{
    --content-width: 420px;
    --content-height: 204px;
    --content-transform: translateX(-432px)translateY(-50%);
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right{
    --content-inline-gap: 80px;
    --content-frame-width: 900px;
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right .banner-links__content{
    left: 0;
    right: auto;
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .banner-links{
    --title-gap: 12px;
    --subtitle-gap: 12px;
    --cards-gap: 16px;
    --cards-margin-top: 32px;
    --title-font-size: 44px;
    --subtitle-font-size: 20px;
    --tips-font-size: 14px;
    --svg-title-width: 410px;
    --svg-title-max-height: 137px;
    --svg-title-gap: 20px;
  }

  :where(.sale-page) .banner-links--shortest{
    height: 480px;
  }

  :where(.sale-page) .banner-links--size-small{
    --title-font-size: 44px;
    --subtitle-font-size: 20px;
    --tips-font-size: 14px;
    --subtitle-gap: 12px;
    --svg-title-width: 410px;
    --svg-title-max-height: 137px;
    --svg-title-gap: 20px;
    --title-block-height: 120px;
    --desc-block-height: 80px;
  }

  :where(.sale-page) .banner-links__tc{
    top: 24px;
    left: 24px;
    right: 24px;
  }

  :where(.sale-page) .banner-links__tc-text{
    max-width: 240px;
    font-size: 16px;
  }

  :where(.sale-page) .banner-links--content-left-image-right{
    --content-width: 540px;
    --content-height: 248px;
    --content-transform: translateX(-600px)translateY(-50%);
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right{
    --content-inline-gap: 110px;
    --content-frame-width: 1180px;
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right .banner-links__content{
    left: 0;
    right: auto;
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .banner-links{
    --title-gap: 16px;
    --subtitle-gap: 16px;
    --cards-gap: 20px;
    --cards-margin-top: 40px;
    --title-font-size: 48px;
    --subtitle-font-size: 24px;
    --tips-font-size: 16px;
    --svg-title-width: 540px;
    --svg-title-max-height: 180px;
    --svg-title-gap: 24px;
  }

  :where(.sale-page) .banner-links--shortest{
    height: 600px;
  }

  :where(.sale-page) .banner-links--size-small{
    --title-font-size: 48px;
    --subtitle-font-size: 24px;
    --tips-font-size: 16px;
    --subtitle-gap: 12px;
    --svg-title-width: 540px;
    --svg-title-max-height: 180px;
    --svg-title-gap: 24px;
    --title-block-height: 120px;
    --desc-block-height: 92px;
  }

  :where(.sale-page) .banner-links__tc{
    top: 24px;
    left: 24px;
    right: 24px;
  }

  :where(.sale-page) .banner-links__tc-text{
    max-width: 240px;
    font-size: 16px;
  }

  :where(.sale-page) .banner-links--content-left-image-right{
    --content-width: 640px;
    --content-height: 301px;
    --content-transform: translateX(-700px)translateY(-50%);
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right{
    --content-frame-width: 1400px;
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right .banner-links__content{
    left: 0;
    right: auto;
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .banner-links{
    --title-gap: 16px;
    --subtitle-gap: 16px;
    --cards-gap: 20px;
    --cards-margin-top: 40px;
    --title-font-size: 48px;
    --subtitle-font-size: 24px;
    --tips-font-size: 16px;
    --svg-title-width: 540px;
    --svg-title-max-height: 180px;
    --svg-title-gap: 24px;
  }

  :where(.sale-page) .banner-links--shortest{
    height: 600px;
  }

  :where(.sale-page) .banner-links--size-small{
    --title-font-size: 48px;
    --subtitle-font-size: 24px;
    --tips-font-size: 16px;
    --subtitle-gap: 12px;
    --svg-title-width: 540px;
    --svg-title-max-height: 180px;
    --svg-title-gap: 24px;
    --title-block-height: 120px;
    --desc-block-height: 92px;
  }

  :where(.sale-page) .banner-links__tc{
    top: 24px;
    left: 24px;
    right: 24px;
  }

  :where(.sale-page) .banner-links__tc-text{
    max-width: 240px;
    font-size: 16px;
  }

  :where(.sale-page) .banner-links--content-left-image-right{
    --content-width: 640px;
    --content-height: 301px;
    --content-transform: translateX(-700px)translateY(-50%);
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right{
    --content-frame-width: 1400px;
  }

  :where(.sale-page) .banner-links--shortest.banner-links--content-left-image-right .banner-links__content{
    left: 0;
    right: auto;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   Event navigation
   ========================================================================== */

:where(.sale-page) .nav-activity{
  z-index: 1;
  background-color: var(--event-light-dark-bg-primary,#fff);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

:where(.sale-page) .nav-activity__list--wrapper{
  width: 100%;
  max-width: var(--max-width-1400);
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  display: flex;
}

:where(.sale-page) .nav-activity__list{
  white-space: nowrap;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  --ms-overflow-style: none;
  max-width: 100%;
  display: flex;
  position: relative;
  overflow-x: scroll;
}

:where(.sale-page) .nav-activity__list::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

:where(.sale-page) .nav-activity__switch-item--wrapper{
  width: 28px;
  height: 28px;
}

:where(.sale-page) .nav-activity__switch-item{
  opacity: 1;
  width: 28px;
  height: 28px;
  transition: opacity .5s;
}

:where(.sale-page) .nav-activity__switch-item--hide{
  opacity: 0;
}

:where(.sale-page) .nav-activity__switch-item--hide:focus{
  opacity: 1;
}

:where(.sale-page) .nav-activity__switch-item--hide:focus-visible{
  opacity: 1;
}

:where(.sale-page) .nav-activity__more button{
  background: 0 0;
  border: none;
}

:where(.sale-page) .nav-activity__more--mobile{
  display: none;
}

:where(.sale-page) .nav-activity__more--mobile-show{
  display: block;
}

:where(.sale-page) .nav-activity-popup__list{
  z-index: 22;
  background: var(--event-light-dark-bg-primary,#fff);
  width: 100%;
}

:where(.sale-page) .nav-activity-popup__list .header{
  -webkit-margin-start: 12px;
  align-items: center;
  height: 48px;
  display: flex;
}

:where(.sale-page) .nav-activity-popup__list .header:not([dir="rtl"]){
  margin-left: 12px;
}

:where(.sale-page) .nav-activity-popup__list .header button{
  background: 0 0;
  border: none;
}

:where(.sale-page) .nav-activity-popup__list .header .title{
  color: var(--event-light-dark-text-on-primary);
  flex: 1;
  font-size: 12px;
  font-weight: 500;
}

:where(.sale-page) .nav-activity-popup__list .header .icon-up{
  width: 48px;
  color: var(--event-light-dark-text-on-primary);
  text-align: center;
}

:where(.sale-page) .nav-activity-popup__list .content{
  color: var(--event-light-dark-text-on-primary);
  flex-wrap: wrap;
  padding: 8px 8px 0;
  display: flex;
}

:where(.sale-page) .nav-activity-popup__list .content .nav-activity-popup__item{
  -webkit-margin-start: 0;
  margin-bottom: 8px;
  -webkit-margin-end: 2px;
}

:where(.sale-page) .nav-activity-popup__list .content .nav-activity-popup__item:not([dir="rtl"]){
  margin-left: 0;
  margin-right: 2px;
}

:where(.sale-page) .nav-activity-popup__list .content .nav-activity-popup__item:first-child{
  -webkit-margin-start: 0;
}

:where(.sale-page) .nav-activity-popup__list .content .nav-activity-popup__item:first-child:not([dir="rtl"]){
  margin-left: 0;
}

:where(.sale-page) .nav-activity__item{
  white-space: normal;
  text-align: center;
  cursor: pointer;
  border-radius: 30px;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  display: flex;
}

:where(.sale-page) .nav-activity__item:last-child:not([dir="rtl"]){
  margin-right: 0;
}

:where(.sale-page) .nav-activity__item span{
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .nav-activity__item-theme--light{
  color: var(--text-base);
}

:where(.sale-page) .nav-activity__item:hover{
  background: var(--event-light-dark-button-nav-hover,#f7f7f7);
}

:where(.sale-page) .nav-activity__item--active{
  color: var(--event-text-on-nav,#fff);
  background: var(--event-main-theme,#ff6900);
  font-weight: 700;
}

:where(.sale-page) .nav-activity-popup__wrapper{
  background: var(--event-light-dark-bg-primary,#fff);
  width: 100%;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .nav-activity{
    height: 48px;
  }

  :where(.sale-page) .nav-activity__list--wrapper{
    width: calc(100% - 48px);
  }

  :where(.sale-page) .nav-activity__list-hide-more{
    width: 100%;
  }

  :where(.sale-page) .nav-activity__list{
    max-width: 100%;
  }

  :where(.sale-page) .nav-activity__more button{
    height: 48px;
  }

  :where(.sale-page) .nav-activity__more--mobile{
    width: 48px;
    color: var(--event-light-dark-text-theme);
    text-align: center;
  }

  :where(.sale-page) .nav-activity__item{
    -webkit-margin-end: 2px;
    width: 68px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  :where(.sale-page) .nav-activity__item:not([dir="rtl"]){
    margin-right: 2px;
  }

  :where(.sale-page) .nav-activity__item:hover{
    background: 0 0;
  }

  :where(.sale-page) .nav-activity__item{
    -webkit-margin-start: 2px;
  }

  :where(.sale-page) .nav-activity__item:not([dir="rtl"]){
    margin-left: 2px;
  }

  :where(.sale-page) .nav-activity__item:first-child{
    -webkit-margin-start: 8px;
  }

  :where(.sale-page) .nav-activity__item:first-child:not([dir="rtl"]){
    margin-left: 8px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .nav-activity{
    height: 60px;
  }

  :where(.sale-page) .nav-activity__list{
    max-width: 808px;
  }

  :where(.sale-page) .nav-activity__switch-item--wrapper{
    width: 96px;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    -webkit-margin-end: 68px;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    margin-right: 68px;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    -webkit-margin-start: 68px;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    margin-left: 68px;
  }

  :where(.sale-page) .nav-activity__more button{
    height: 60px;
  }

  :where(.sale-page) .nav-activity__item{
    -webkit-margin-end: 12px;
    width: 120px;
    height: 44px;
    padding: 0 16px;
  }

  :where(.sale-page) .nav-activity__item:not([dir="rtl"]){
    margin-right: 12px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .nav-activity{
    height: 68px;
  }

  :where(.sale-page) .nav-activity__list{
    max-width: 964px;
  }

  :where(.sale-page) .nav-activity__switch-item--wrapper{
    width: 108px;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    -webkit-margin-end: 80px;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    margin-right: 80px;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    -webkit-margin-start: 80px;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    margin-left: 80px;
  }

  :where(.sale-page) .nav-activity__more button{
    height: 68px;
  }

  :where(.sale-page) .nav-activity__item{
    -webkit-margin-end: 16px;
    width: 140px;
    height: 48px;
    padding: 0 20px;
  }

  :where(.sale-page) .nav-activity__item:not([dir="rtl"]){
    margin-right: 16px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .nav-activity{
    height: 72px;
  }

  :where(.sale-page) .nav-activity__list{
    max-width: 1348px;
  }

  :where(.sale-page) .nav-activity__switch-item--wrapper{
    width: 28px;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    -webkit-margin-end: 0;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    margin-right: 0;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    -webkit-margin-start: 0;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    margin-left: 0;
  }

  :where(.sale-page) .nav-activity__more button{
    height: 72px;
  }

  :where(.sale-page) .nav-activity__item{
    -webkit-margin-end: 20px;
    width: 160px;
    height: 48px;
    padding: 0 24px;
  }

  :where(.sale-page) .nav-activity__item:not([dir="rtl"]){
    margin-right: 20px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .nav-activity{
    height: 72px;
  }

  :where(.sale-page) .nav-activity__list{
    max-width: 1348px;
  }

  :where(.sale-page) .nav-activity__switch-item--wrapper{
    width: 28px;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    -webkit-margin-end: 0;
  }

  :where(.sale-page) .nav-activity__switch-item--prev{
    margin-right: 0;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    -webkit-margin-start: 0;
  }

  :where(.sale-page) .nav-activity__switch-item--next{
    margin-left: 0;
  }

  :where(.sale-page) .nav-activity__more button{
    height: 72px;
  }

  :where(.sale-page) .nav-activity__item{
    -webkit-margin-end: 20px;
    width: 160px;
    height: 48px;
    padding: 0 24px;
  }

  :where(.sale-page) .nav-activity__item:not([dir="rtl"]){
    margin-right: 20px;
  }
}

/* Order-sensitive: these must follow the breakpoint blocks above to keep the original cascade. */

:where(.sale-page) .nav-activity__item:last-child{
  -webkit-margin-end: 0;
}

:where(.sale-page) .nav-activity__item--active:hover{
  background: var(--event-main-theme,#ff6900);
}

/* Background artwork and resting position. navigation.js pins the bar (position: fixed) once it reaches the top. */
:where(.sale-page) .nav-activity{
  position: relative;
  top: 0;
  z-index: 1;
  background-image: url("/assets/sale-events/v1/reference/a39b28b8a92f95b1a5d62fb3fbd64c90.jpg");
}

@media (max-width: 720px) {
  :where(.sale-page) .nav-activity{
    background-image: url("/assets/sale-events/v1/reference/cdcc0a20ff503b50fae27ed1b3e8e6af.jpg");
  }
}

/* Holds the bar's height while it is pinned, so the page does not jump. */
:where(.sale-page) .nav-activity__placeholder{
  height: 0;
}

/* Pinned state: the bar stays at the top of the viewport (set by navigation.js). */
:where(.sale-page) .nav-activity.nav-activity--pinned{
  position: fixed;
  top: 0;
  left: 0;
}

:where(.sale-page) .nav-activity.nav-activity--raised{
  z-index: 21;
}

/* Mobile "all sections" panel, opened from the chevron button. */
:where(.sale-page) .nav-activity-popup__wrapper{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 22;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
}

:where(.sale-page) .nav-activity-popup__wrapper[hidden]{
  display: none;
}

/* ==========================================================================
   Section titles
   ========================================================================== */

:where(.sale-page) .store-title-block{
  --title-font-weight-light: 300;
  --title-font-weight-semibold: 700;
  --title-font-weight-heavy: 800;
  --text-align-left: start;
  --text-align-center: center;
  --align-items-left: flex-start;
  --align-items-center: center;
  --margin-inline-left: 0 auto;
  --margin-inline-center: auto;
}

:where(.sale-page) .store-title-block .store-title__container{
  gap: var(--title-subtitle-gap);
  align-items: var(--align-items);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-width-1400);
  padding: var(--container-padding);
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  display: flex;
}

:where(.sale-page) .store-title-block .store-title__title{
  width: 100%;
  max-width: var(--title-max-width);
  margin: 0;
  margin-inline: var(--margin-inline);
  color: var(--event-light-dark-text-theme);
  font-weight: var(--title-font-weight);
  font-size: var(--title-font-size);
  text-align: var(--text-align);
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .store-title-block .store-title__subtitle{
  width: 100%;
  max-width: var(--title-max-width);
  margin: 0;
  margin-inline: var(--margin-inline);
  color: var(--event-light-dark-text-on-countdown);
  font-weight: 400;
  font-size: var(--subtitle-font-size);
  text-align: var(--text-align);
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .store-title-block{
    --container-padding-large: 32px 20px 20px 20px;
    --container-padding-medium: 32px 20px 20px 20px;
    --container-padding-small: 28px 20px 16px 20px;
    --title-subtitle-gap-large: 6px;
    --title-subtitle-gap-medium: 6px;
    --title-subtitle-gap-small: 4px;
    --title-font-size-large: 24px;
    --title-font-size-medium: 24px;
    --title-font-size-small: 18px;
    --title-max-width: 100%;
    --image-width: 320px;
    --image-max-height: 140px;
    --subtitle-font-size-large: 12px;
    --subtitle-font-size-medium: 12px;
    --subtitle-font-size-small: 10px;
  }

  :where(.sale-page) .store-title-block .store-title__title{
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :where(.sale-page) .store-title-block .store-title__subtitle{
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .store-title-block{
    --container-padding-large: 84px 0 40px 0;
    --container-padding-medium: 72px 0 36px 0;
    --container-padding-small: 60px 0 32px 0;
    --title-subtitle-gap-large: 12px;
    --title-subtitle-gap-medium: 12px;
    --title-subtitle-gap-small: 8px;
    --title-font-size-large: 48px;
    --title-font-size-medium: 38px;
    --title-font-size-small: 28px;
    --title-max-width: 800px;
    --image-width: 473px;
    --image-max-height: 207px;
    --subtitle-font-size-large: 16px;
    --subtitle-font-size-medium: 14px;
    --subtitle-font-size-small: 12px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .store-title-block{
    --container-padding-large: 96px 0 52px 0;
    --container-padding-medium: 84px 0 44px 0;
    --container-padding-small: 72px 0 36px 0;
    --title-subtitle-gap-large: 16px;
    --title-subtitle-gap-medium: 12px;
    --title-subtitle-gap-small: 12px;
    --title-font-size-large: 64px;
    --title-font-size-medium: 48px;
    --title-font-size-small: 32px;
    --title-max-width: 1040px;
    --image-width: 686px;
    --image-max-height: 300px;
    --subtitle-font-size-large: 20px;
    --subtitle-font-size-medium: 16px;
    --subtitle-font-size-small: 14px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .store-title-block{
    --container-padding-large: 120px 0 60px 0;
    --container-padding-medium: 100px 0 50px 0;
    --container-padding-small: 80px 0 44px 0;
    --title-subtitle-gap-large: 20px;
    --title-subtitle-gap-medium: 16px;
    --title-subtitle-gap-small: 12px;
    --title-font-size-large: 64px;
    --title-font-size-medium: 48px;
    --title-font-size-small: 32px;
    --title-max-width: 1200px;
    --image-width: 686px;
    --image-max-height: 300px;
    --subtitle-font-size-large: 20px;
    --subtitle-font-size-medium: 16px;
    --subtitle-font-size-small: 14px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .store-title-block{
    --container-padding-large: 120px 0 60px 0;
    --container-padding-medium: 100px 0 50px 0;
    --container-padding-small: 80px 0 44px 0;
    --title-subtitle-gap-large: 20px;
    --title-subtitle-gap-medium: 16px;
    --title-subtitle-gap-small: 12px;
    --title-font-size-large: 64px;
    --title-font-size-medium: 48px;
    --title-font-size-small: 32px;
    --title-max-width: 1200px;
    --image-width: 686px;
    --image-max-height: 300px;
    --subtitle-font-size-large: 20px;
    --subtitle-font-size-medium: 16px;
    --subtitle-font-size-small: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.sale-page) .store-title-block .store-title__title,
:where(.sale-page) .store-title-block .store-title__subtitle{
    opacity: 1;
    transition: none;
    transform: none;
  }
}

/* Title preset used throughout this event: centred, medium size, semibold. */
:where(.sale-page) .store-title-block{
  --text-align: var(--text-align-center);
  --align-items: var(--align-items-center);
  --margin-inline: var(--margin-inline-center);
  --title-font-size: var(--title-font-size-medium);
  --subtitle-font-size: var(--subtitle-font-size-medium);
  --title-subtitle-gap: var(--title-subtitle-gap-medium);
  --container-padding: var(--container-padding-medium);
  --title-font-weight: var(--title-font-weight-semibold);
}

/* ==========================================================================
   Event images
   ========================================================================== */

:where(.sale-page) .event-image .event-image--content{
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .event-image .event-image--content{
    max-width: none;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .event-image .event-image--content{
    max-width: none;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .event-image .event-image--content{
    max-width: 1180px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .event-image .event-image--content{
    max-width: 1400px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .event-image .event-image--content{
    max-width: 1400px;
  }
}

/* Single-column image grid with vertical breathing room. */
:where(.sale-page) .event-image{
  display: flow-root;
}

:where(.sale-page) .event-image .event-image--content{
  display: grid;
  grid-template-columns: repeat(1, auto);
  margin-top: 20px;
  margin-bottom: 20px;
}

:where(.sale-page) .event-image .event-image--content-flush{
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Text artwork rebuilt in HTML -------------------------------------------
   These replace two banner images whose content was Chinese text. Sizes are expressed in
   design pixels of the original artwork (1400px wide on desktop, 1080px on mobile) via --u,
   so the blocks scale with the page exactly like the images did. */
:where(.sale-page) .event-image .event-image--content-block{
  display: block;
  width: 100%;
  max-width: var(--max-width-1400);
  container-type: inline-size;
}

:where(.sale-page) .store-benefits,
:where(.sale-page) .voucher-cards{
  --u: calc(100cqw / 1400);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Store benefits: four perks with the original icons (cropped from the original artwork). */
:where(.sale-page) .store-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: calc(133 * var(--u));
    padding: calc(16 * var(--u)) calc(24 * var(--u));
    color: #ff6700;
    background-color: #f2f2f2;
    border-radius: calc(16 * var(--u));
}

:where(.sale-page) .store-benefits__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

:where(.sale-page) .store-benefits__icon{
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  background: url("/assets/sale-events/v1/reference/467d556c395e37ea53af92f75d849b21.jpg") no-repeat;
  /* The source image is 1080x662; each icon sits in a 110x110 square. */
  background-size: 981.818% 601.818%;
}

:where(.sale-page) .store-benefits__icon--points{ background-position: 25.258% 11.051%; }
:where(.sale-page) .store-benefits__icon--delivery{ background-position: 74.742% 11.051%; }
:where(.sale-page) .store-benefits__icon--coupon{ background-position: 25.258% 67.210%; }
:where(.sale-page) .store-benefits__icon--care{ background-position: 74.742% 67.210%; }

:where(.sale-page) .store-benefits__text{
  margin-top: calc(8 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  white-space: normal;
}

/* POCO supermarket vouchers: two cards with a ticket graphic. */
:where(.sale-page) .voucher-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--u));
  padding: calc(30 * var(--u));
  background: linear-gradient(90deg, #fff6e7, #fdf1da);
  border-radius: calc(16 * var(--u));
}

:where(.sale-page) .voucher-card{
  display: flex;
  gap: calc(16 * var(--u));
  align-items: center;
  justify-content: space-between;
  min-height: calc(218 * var(--u));
  padding: 0 calc(36 * var(--u)) 0 calc(50 * var(--u));
  background: #fff;
  border-radius: calc(16 * var(--u));
}

:where(.sale-page) .voucher-card__text{
  flex: 1;
  min-width: 0;
}

:where(.sale-page) .voucher-card__title{
  margin: 0 0 calc(12 * var(--u));
  color: #ff6900;
  font-size: calc(24 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}

:where(.sale-page) .voucher-card__schedule{
  color: #191919;
  font-size: calc(17 * var(--u));
  line-height: 1.4;
  white-space: normal;
}

:where(.sale-page) .voucher-card__note{
  max-width: calc(300 * var(--u));
  margin-top: calc(12 * var(--u));
  color: #5e5e5e;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  white-space: normal;
}

:where(.sale-page) .voucher-card__ticket{
  --notch: calc(14 * var(--u));
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(196 * var(--u));
  height: calc(112 * var(--u));
  color: #fff;
  background: linear-gradient(135deg, #ff8a34, #ff6900);
  border-radius: calc(10 * var(--u));
  transform: rotate(-12deg);
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .18));
  /* Ticket notches on both short edges. */
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}

:where(.sale-page) .voucher-card__ticket strong{
  font-size: calc(36 * var(--u));
  font-weight: 700;
  line-height: 1.1;
}

:where(.sale-page) .voucher-card__ticket span{
  font-size: calc(16 * var(--u));
  font-weight: 600;
}

@media (max-width: 720px) {
  :where(.sale-page) .store-benefits,
:where(.sale-page) .voucher-cards{
    --u: calc(100cqw / 1080);
  }

  :where(.sale-page) .store-benefits{
    grid-template-columns: 1fr 1fr;
    row-gap: calc(40 * var(--u));
    padding: calc(70 * var(--u)) calc(40 * var(--u));
    border-radius: 0;
  }

  :where(.sale-page) .store-benefits__icon{
    width: calc(110 * var(--u));
    height: calc(110 * var(--u));
  }

  :where(.sale-page) .store-benefits__text{
    margin-top: calc(24 * var(--u));
    font-size: calc(28 * var(--u));
  }

  :where(.sale-page) .voucher-cards{
    gap: calc(20 * var(--u));
    padding: calc(44 * var(--u));
    border-radius: calc(28 * var(--u));
  }

  :where(.sale-page) .voucher-card{
    gap: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(60 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u));
    text-align: center;
    border-radius: calc(24 * var(--u));
  }

  :where(.sale-page) .voucher-card__title{ font-size: calc(32 * var(--u)); }
  :where(.sale-page) .voucher-card__schedule{ font-size: calc(22 * var(--u)); }

  :where(.sale-page) .voucher-card__note{
    max-width: none;
    margin: calc(20 * var(--u)) 0 calc(40 * var(--u));
    font-size: calc(19 * var(--u));
    text-align: left;
  }

  :where(.sale-page) .voucher-card__ticket{
    width: calc(240 * var(--u));
    height: calc(130 * var(--u));
    transform: rotate(-10deg);
  }

  :where(.sale-page) .voucher-card__ticket strong{ font-size: calc(42 * var(--u)); }
  :where(.sale-page) .voucher-card__ticket span{ font-size: calc(20 * var(--u)); }
}

/* ==========================================================================
   Flash coupons
   ========================================================================== */

:where(.sale-page) .flash-coupon{
  width: 100%;
}

:where(.sale-page) .flash-coupon .flash-coupon-list{
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
}

:where(.sale-page) .flash-coupon .flash-coupon-row{
  justify-content: center;
  margin: 0 12px;
  display: flex;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
  display: flex;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
  transform: scaleX(var(--cardinal-number));
  background-size: 100% 100%;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
  word-break: break-all;
  background-position: 0;
  flex: 1;
  padding: 22px 24px 0;
  position: relative;
  -webkit-mask-image: radial-gradient(circle at 0 6px,transparent 6px,#fff 6.5px);
  mask-image: radial-gradient(circle at 0 6px,transparent 6px,#fff 6.5px);
  -webkit-mask-position: 0 -6px;
  mask-position: 0 -6px;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg{
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--cardinal-number));
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg img{
  height: 100%;
  position: absolute;
  right: 0;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere{
  z-index: 1;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere img{
  height: 100%;
  position: absolute;
  right: 0;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
  z-index: 3;
  flex-direction: column;
  justify-content: center;
  display: flex;
  position: relative;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value{
  width: 100%;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value{
  text-align: left;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value span{
  color: #191919;
  text-overflow: ellipsis;
  word-break: break-word;
  width: 100%;
  display: inline-block;
  display: box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-bottom: 4px;
  font-weight: 700;
  line-height: 1;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-name{
  color: #191919;
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-period{
  color: #5e5e5e;
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 14px;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn{
  z-index: 2;
  color: #fff;
  background: var(--event-button-coupon,#191919);
  border: unset;
  cursor: pointer;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  display: flex;
  position: relative;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn:hover{
  opacity: .9;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .mi-btn--disabled{
  opacity: .5;
  pointer-events: none;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
  color: #5e5e5e;
  align-items: center;
  font-size: 14px;
  display: flex;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text{
  -webkit-padding-end: 0;
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text:not([dir="rtl"]){
  padding-right: 0;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon{
  display: inline-block;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon .micon{
  -webkit-margin-start: 4px;
  cursor: pointer;
  font-size: 12px;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon .micon:not([dir="rtl"]){
  margin-left: 4px;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon .coupon__item-desc-modal{
  z-index: 4;
  color: #5e5e5e;
  background-color: #fff;
  border-radius: 8px;
  width: 360px;
  padding: 14px;
  font-size: 12px;
  display: none;
  position: absolute;
  left: -10px;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon .coupon__item-desc-modal p{
  margin-bottom: 8px;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon:hover .coupon__item-desc-modal{
  display: block;
}

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:last-child:not([dir="rtl"]){
  margin-right: 0;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .flash-coupon{
    margin: unset;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-list{
    box-sizing: border-box;
    width: 100%;
    padding: 0 8px;
    display: block;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row{
    width: 344px;
    max-width: 344px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row{
    width: 344px;
    height: 144px;
    margin: 0 auto;
    padding: 0 0 8px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
    -webkit-margin-end: 0;
    margin-bottom: 0;
    width: 344px;
    height: 144px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:not([dir="rtl"]){
    margin-right: 0;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    width: 40px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    -webkit-padding-end: 26px;
    padding-top: 14px;
    -webkit-padding-start: 16px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right:not([dir="rtl"]){
    padding-left: 16px;
    padding-right: 26px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg img{
    width: 325px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere img{
    width: 306px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    width: 262px;
    height: 88px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value span{
    font-size: 22px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-name{
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-period{
    height: 12px;
    margin-bottom: 10px;
    font-size: 11px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn{
    border-radius: 8px;
    width: 120px;
    height: 28px;
    font-size: 12px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
    height: 12px;
    margin-bottom: 4px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text{
    font-size: 11px;
    line-height: 12px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
    -webkit-padding-end: 0;
    margin-bottom: 4px;
    font-size: 11px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc:not([dir="rtl"]){
    padding-right: 0;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon{
    font-size: 12px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon:hover .coupon__item-desc-modal{
    display: none;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .flash-coupon .flash-coupon-row{
    width: 100%;
    max-width: 100%;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
    -webkit-margin-end: 12px;
    margin-bottom: 12px;
    width: calc(33.3333% - 9px);
    height: 158px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:not([dir="rtl"]){
    margin-right: 12px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    width: 36px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    -webkit-padding-end: 20px;
    padding-top: 20px;
    -webkit-padding-start: 16px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right:not([dir="rtl"]){
    padding-left: 16px;
    padding-right: 20px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg img{
    width: 356px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere img{
    width: 356px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    width: 252px;
    height: 90px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value span{
    font-size: 20px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-name{
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-period{
    height: 15px;
    margin-bottom: 8px;
    font-size: 12px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn{
    border-radius: 8px;
    width: 114px;
    height: 28px;
    font-size: 12px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
    height: 15px;
    margin-bottom: 4px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text{
    font-size: 12px;
    line-height: 1.25;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .flash-coupon .flash-coupon-row{
    width: 100%;
    max-width: 1180px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
    -webkit-margin-end: 16px;
    margin-bottom: 16px;
    width: calc(33.3333% - 11px);
    height: 180px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:not([dir="rtl"]){
    margin-right: 16px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    width: 48px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    -webkit-padding-end: 27px;
    padding-top: 23px;
    -webkit-padding-start: 22px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right:not([dir="rtl"]){
    padding-left: 22px;
    padding-right: 27px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg img{
    width: 406px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere img{
    width: 406px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    height: 102px;
    width: unset;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value span{
    font-size: 26px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-name{
    font-size: 16px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-period{
    height: 16px;
    margin-bottom: 8px;
    font-size: 13px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn{
    border-radius: 10px;
    width: 156px;
    height: 32px;
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
    height: 16px;
    margin-bottom: 6px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text{
    font-size: 13px;
    line-height: 1.25;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .flash-coupon .flash-coupon-row{
    width: 1400px;
    max-width: 1400px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
    -webkit-margin-end: 20px;
    margin-bottom: 20px;
    width: 454px;
    height: 180px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:not([dir="rtl"]){
    margin-right: 20px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    width: 48px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    -webkit-padding-end: 82px;
    padding-top: 20px;
    -webkit-padding-start: 24px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right:not([dir="rtl"]){
    padding-left: 24px;
    padding-right: 82px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg img{
    width: 406px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere img{
    width: 406px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    height: 108px;
    width: unset;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value span{
    font-size: 28px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-name{
    font-size: 16px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-period{
    height: 18px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn{
    border-radius: 10px;
    width: 156px;
    height: 32px;
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
    height: 18px;
    margin-bottom: 6px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text{
    font-size: 14px;
    line-height: 1.25;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .flash-coupon .flash-coupon-row{
    width: 1400px;
    max-width: 1400px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
    -webkit-margin-end: 20px;
    margin-bottom: 20px;
    width: 454px;
    height: 180px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:not([dir="rtl"]){
    margin-right: 20px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    width: 48px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    -webkit-padding-end: 82px;
    padding-top: 20px;
    -webkit-padding-start: 24px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right:not([dir="rtl"]){
    padding-left: 24px;
    padding-right: 82px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-bg img{
    width: 406px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .flash-coupon-row-item-right-atmosphere img{
    width: 406px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    height: 108px;
    width: unset;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-value span{
    font-size: 28px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-name{
    font-size: 16px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-period{
    height: 18px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-btn{
    border-radius: 10px;
    width: 156px;
    height: 32px;
    font-size: 14px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc{
    height: 18px;
    margin-bottom: 6px;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc .coupon__item-desc-text{
    font-size: 14px;
    line-height: 1.25;
  }
}

/* Order-sensitive: these must follow the breakpoint blocks above to keep the original cascade. */

:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item:last-child{
  -webkit-margin-end: 0;
}

/* Ticket-stub artwork per coupon theme. */
:where(.sale-page) .flash-coupon.event-theme--poco .flash-coupon-row-item-left{
  background-image: url("/assets/sale-events/v1/reference/0e3518aa41e12cc0edc6f1778dc16efb.png");
}

:where(.sale-page) .flash-coupon.event-theme--rose-gold .flash-coupon-row-item-left{
  background-image: url("/assets/sale-events/v1/reference/7c797a476f0304d9c16b44d305cd9bcd.png");
}

/* Keyboard users get the same details tooltip as mouse users. */
:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon:focus-within .coupon__item-desc-modal{
  display: block;
}

@media (max-width: 720px) {
  /* On phones the details open in a dialog instead (promotions.js). */
  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .coupon__item-desc-icon:focus-within .coupon__item-desc-modal{
    display: none;
  }
}

/* Tablets: Xiaomi's coupon text block is a fixed 252px, wider than a three-up tile below ~870px,
   which squeezed the ticket stub away. Keep the stub and let the text block narrow when needed. */
@media (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    flex-shrink: 0;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    min-width: 0;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    width: auto;
    max-width: 252px;
  }
}

/* Xiaomi breaks coupon text anywhere (fine for Chinese); English must break between words. */
:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Retain Xiaomi's 344px coupon at normal phone widths; fit smaller screens too. */
@media (max-width: 359px) {
  :where(.sale-page) .flash-coupon .flash-coupon-row,
:where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item{
    width: 100%;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-left{
    flex-shrink: 0;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right{
    min-width: 0;
  }

  :where(.sale-page) .flash-coupon .flash-coupon-row .flash-coupon-row-item .flash-coupon-row-item-right .coupon__item-info{
    width: 100%;
  }
}

/* ==========================================================================
   Mini banners
   ========================================================================== */

:where(.sale-page) .event-mini-banner{
  --title-font-weight-light: 300;
  --title-font-weight-semibold: 700;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__center{
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  display: block;
  position: relative;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__card{
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__card-clickable{
  cursor: pointer;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__bg{
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content{
  z-index: 2;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__title{
  color: var(--event-light-dark-text-theme);
  font-weight: var(--title-font-weight-semibold);
  white-space: pre-line;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__subtitle{
  color: var(--event-light-dark-text-on-countdown,var(--event-light-dark-text-countdown));
  white-space: pre-line;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link{
  box-sizing: border-box;
  max-width: 100%;
  color: var(--event-light-dark-text-on-tertiary);
  text-align: center;
  background-color: var(--event-light-dark-button-default);
  justify-content: center;
  align-items: center;
  font-weight: 500;
  display: inline-flex;
  overflow: hidden;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link:hover{
  opacity: .9;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link-text{
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content--layout-start{
  align-items: flex-start;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__content--layout-center{
  align-items: center;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__text-align-start{
  text-align: left;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__text-align-center{
  text-align: center;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__button{
  flex-wrap: wrap;
  display: flex;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__button.event-mini-banner__text-align-start{
  justify-content: flex-start;
}

:where(.sale-page) .event-mini-banner .event-mini-banner__button.event-mini-banner__text-align-center{
  justify-content: center;
}

:where(.sale-page) .event-mini-banner.event-mini-banner--font-weight-semibold .event-mini-banner__title{
  font-weight: var(--title-font-weight-semibold);
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .event-mini-banner{
    padding: 8px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__center{
    max-width: 100%;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__card{
    border-radius: 6px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__title{
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__subtitle{
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link{
    font-size: 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__button{
    gap: 6px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__card{
    min-height: 138px;
    max-height: 184px;
    padding: 16px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__button,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    width: 190px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title{
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 14px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    -webkit-margin-before: 4px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    margin-top: 4px;
    font-size: 12px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__link{
    -webkit-margin-before: 8px;
    border-radius: 8px;
    min-width: 87px;
    max-width: 160px;
    height: 28px;
    margin-top: 8px;
    padding: 0 16px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .event-mini-banner{
    padding: 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__center{
    max-width: 1000px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__card{
    border-radius: 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link{
    font-size: 14px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__button{
    gap: 8px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__card{
    min-height: 240px;
    max-height: 240px;
    padding: 30px 40px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__button,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    width: 550px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title{
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 24px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    -webkit-margin-before: 6px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 6px;
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__link{
    -webkit-margin-before: 18px;
    border-radius: 10px;
    min-width: 142px;
    max-width: 200px;
    height: 32px;
    margin-top: 18px;
    padding: 0 16px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .event-mini-banner{
    padding: 16px 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__center{
    max-width: 1180px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__card{
    border-radius: 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link{
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__button{
    gap: 10px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__card{
    min-height: 200px;
    max-height: 240px;
    padding: 36px 50px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__button,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    width: 600px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title{
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 28px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    -webkit-margin-before: 8px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 8px;
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__link{
    -webkit-margin-before: 12px;
    border-radius: 12px;
    min-width: 160px;
    max-width: 220px;
    height: 36px;
    margin-top: 12px;
    padding: 0 24px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .event-mini-banner{
    padding: 20px 0;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__center{
    max-width: 1400px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__card{
    border-radius: 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link{
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__button{
    gap: 12px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__card{
    min-height: 200px;
    max-height: 240px;
    padding: 34px 60px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__button,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    width: 640px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title{
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 28px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    -webkit-margin-before: 8px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 8px;
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__link{
    -webkit-margin-before: 16px;
    border-radius: 12px;
    min-width: 160px;
    max-width: 220px;
    height: 36px;
    margin-top: 16px;
    padding: 0 24px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .event-mini-banner{
    padding: 20px 0;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__center{
    max-width: 1400px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__card{
    border-radius: 12px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__content .event-mini-banner__link{
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner .event-mini-banner__button{
    gap: 12px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__card{
    min-height: 200px;
    max-height: 240px;
    padding: 34px 60px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__button,
:where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    width: 640px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__title{
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 28px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__subtitle{
    -webkit-margin-before: 8px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 8px;
    font-size: 16px;
  }

  :where(.sale-page) .event-mini-banner.event-mini-banner--mode-1 .event-mini-banner__link{
    -webkit-margin-before: 16px;
    border-radius: 12px;
    min-width: 160px;
    max-width: 220px;
    height: 36px;
    margin-top: 16px;
    padding: 0 24px;
  }
}

/* ==========================================================================
   Newsletter subscription
   ========================================================================== */

:where(.sale-page) .edm-subscribe{
  position: relative;
  overflow: hidden;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__content{
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  position: relative;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__title{
  color: var(--event-light-dark-text-theme);
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
  color: var(--event-light-dark-text-on-countdown);
  text-overflow: ellipsis;
  word-break: break-word;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  display: -webkit-box;
  overflow: hidden;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email{
  margin: 0 auto;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
  float: left;
  background-color: var(--event-light-dark-bg-hight-contrast,#fff);
  border: 1px solid var(--light-alpha10);
  height: 100%;
  padding: 0;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input{
  color: var(--event-light-dark-text-on-primary,#191919);
  caret-color: var(--event-light-dark-text-on-primary,#191919);
  background-color: transparent;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input::placeholder{
  color: var(--event-light-dark-text-tertiary,rgba(25,25,25,.35));
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input--hover,
:where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input--active{
  border: 1px solid var(--event-light-dark-border-secondary,rgba(255,255,255,.1));
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email-button{
  float: right;
  height: 100%;
  color: var(--event-light-dark-text-on-tertiary);
  background-color: var(--event-light-dark-bg-subtle,rgba(0,0,0,.9));
  border: 1px solid var(--light-alpha10);
  padding: 0;
  font-weight: 500;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email-button-disabled{
  background-color: var(--event-light-dark-bg-subtle,rgba(0,0,0,.9));
  cursor: no-drop;
  opacity: .5;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-btn.mi-btn--default:hover{
  border-color: #000;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
  margin: 0 auto;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
  justify-content: center;
  padding: 0;
  display: flex;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox-wrapper{
  color: var(--event-light-dark-text-on-countdown,#191919);
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
  -webkit-margin-end: 8px;
  color: var(--event-light-dark-text-on-countdown,#191919);
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon:not([dir="rtl"]){
  margin-right: 8px;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__content a{
  color: var(--event-light-dark-text-link);
  text-decoration: underline;
}

:where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__input:checked+.checkbox-wrapper{
  color: var(--event-light-dark-text-on-countdown,#191919);
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .edm-subscribe{
    padding: 28px 20px 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__title{
    font-size: 18px;
    line-height: 22.5px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__title{
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
    margin-top: 4px;
    font-size: 12px;
    line-height: 15px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
    text-overflow: ellipsis;
    word-break: break-word;
    display: box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email{
    width: 280px;
    height: 36px;
    margin-top: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email{
    justify-content: start;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    border-radius: 12px 0 0 12px;
    width: 190px;
    font-size: 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    flex: 1;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input{
    padding: 0 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input::placeholder{
    font-size: 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-button{
    border-radius: 0 12px 12px 0;
    width: 90px;
    font-size: 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
    width: 280px;
    margin-top: 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
    font-size: 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
    justify-content: start;
    padding: 0;
    font-size: 12px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
    -webkit-margin-end: 4px;
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon:not([dir="rtl"]){
    margin-right: 4px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__content{
    font-size: 12px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .edm-subscribe{
    padding: 60px 0 40px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__content{
    max-width: 800px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__title{
    font-size: 28px;
    line-height: 35px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
    margin-top: 8px;
    font-size: 14px;
    line-height: 17.5px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email{
    width: 560px;
    height: 48px;
    margin-top: 24px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    border-radius: 14px 0 0 14px;
    width: 400px;
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input{
    padding: 0 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input::placeholder{
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-button{
    border-radius: 0 14px 14px 0;
    width: 160px;
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
    width: 560px;
    margin-top: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
    font-size: 14px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__content{
    font-size: 14px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .edm-subscribe{
    padding: 80px 0 48px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__content{
    max-width: 1040px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__title{
    font-size: 32px;
    line-height: 40px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
    margin-top: 16px;
    font-size: 16px;
    line-height: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email{
    width: 660px;
    height: 56px;
    margin-top: 28px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    border-radius: 16px 0 0 16px;
    width: 480px;
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input{
    padding: 0 24px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input::placeholder{
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-button{
    border-radius: 0 16px 16px 0;
    width: 180px;
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
    width: 660px;
    margin-top: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
    font-size: 14px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__content{
    font-size: 14px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .edm-subscribe{
    padding: 80px 0 48px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__content{
    max-width: 1200px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__title{
    font-size: 32px;
    line-height: 40px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
    margin-top: 12px;
    font-size: 16px;
    line-height: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email{
    width: 720px;
    height: 64px;
    margin-top: 36px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    border-radius: 16px 0 0 16px;
    width: 520px;
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input{
    padding: 0 28px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input::placeholder{
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-button{
    border-radius: 0 16px 16px 0;
    width: 200px;
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
    width: 720px;
    margin-top: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
    font-size: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__content{
    font-size: 16px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .edm-subscribe{
    padding: 100px 0 60px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__content{
    max-width: 1200px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__title{
    font-size: 32px;
    line-height: 40px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__subtitle{
    margin-top: 12px;
    font-size: 16px;
    line-height: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email{
    width: 720px;
    height: 64px;
    margin-top: 36px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    border-radius: 16px 0 0 16px;
    width: 520px;
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input{
    padding: 0 28px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email .mi-input>input::placeholder{
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-button{
    border-radius: 0 16px 16px 0;
    width: 200px;
    font-size: 18px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
    width: 720px;
    margin-top: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item{
    font-size: 16px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__icon{
    font-size: 20px;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__privacy .mi-checkbox__item .checkbox__content{
    font-size: 16px;
  }
}

/* ==========================================================================
   Form controls (newsletter form)
   ========================================================================== */

:where(.sale-page) .mi-input{
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  align-items: center;
  width: 240px;
  display: flex;
  position: relative;
  overflow: hidden;
}

:where(.sale-page) .mi-input>input{
  width: 100%;
  height: 100%;
  padding: unset;
  color: #191919;
  background-color: inherit;
  border: none;
  outline: none;
  flex: 1;
}

:where(.sale-page) .mi-input>input::placeholder{
  color: #757575;
}

:where(.sale-page) .mi-checkbox__item{
  --checkbox-text-color: var(--text-base);
  --checkbox-border-color: var(--border-base);
}

:where(.sale-page) .mi-checkbox__item:focus{
  outline: none;
}

:where(.sale-page) .mi-checkbox__item:focus-visible{
  outline: 4px solid var(--outline-color);
  outline-offset: 0;
}

:where(.sale-page) .mi-checkbox__item--highlight{
  --checkbox-text-color: var(--text-primary);
  --checkbox-border-color: var(--border-primary);
}

:where(.sale-page) .mi-checkbox__item .checkbox-wrapper{
  color: var(--text-secondary);
  cursor: pointer;
  align-items: center;
  display: flex;
}

:where(.sale-page) .mi-checkbox__item .checkbox-wrapper.mi-checkbox__item--default{
  cursor: default;
}

:where(.sale-page) .mi-checkbox__item .checkbox-wrapper:hover{
  color: var(--checkbox-text-color);
}

:where(.sale-page) .mi-checkbox__item .checkbox__icon,
:where(.sale-page) .mi-checkbox__item .checkbox__content{
  cursor: pointer;
}

:where(.sale-page) .mi-checkbox__item--left .checkbox__icon{
  -webkit-margin-end: 2px;
}

:where(.sale-page) .mi-checkbox__item--left .checkbox__icon:not([dir="rtl"]){
  margin-right: 2px;
}

:where(.sale-page) .mi-checkbox__item .checkbox__input{
  display: none;
}

:where(.sale-page) .mi-checkbox__item .checkbox__input:checked+.checkbox-wrapper{
  color: var(--checkbox-text-color);
}

:where(.sale-page) .mi-checkbox__item .checkbox__input:disabled+.checkbox-wrapper{
  color: var(--brand-grey-40);
  cursor: not-allowed;
}

:where(.sale-page) .mi-checkbox__item .checkbox__input:disabled+.checkbox-wrapper .checkbox__icon,
:where(.sale-page) .mi-checkbox__item .checkbox__input:disabled+.checkbox-wrapper .checkbox__content{
  cursor: not-allowed;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .mi-input{
    border-radius: 6px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }

  :where(.sale-page) .mi-checkbox__item{
    font-size: 12px;
  }

  :where(.sale-page) .mi-checkbox__item .checkbox__icon{
    font-size: 12px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .mi-input{
    border-radius: 8px;
    height: 36px;
    padding: 0 8px;
    font-size: 14px;
  }

  :where(.sale-page) .mi-checkbox__item{
    font-size: 12px;
  }

  :where(.sale-page) .mi-checkbox__item .checkbox__icon{
    font-size: 12px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .mi-input{
    border-radius: 10px;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
  }

  :where(.sale-page) .mi-checkbox__item{
    font-size: max(1.11111vw,12px);
  }

  :where(.sale-page) .mi-checkbox__item .checkbox__icon{
    font-size: max(1.11111vw,12px);
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .mi-input{
    border-radius: 12px;
    height: 42px;
    padding: 0 14px;
    font-size: 16px;
  }

  :where(.sale-page) .mi-checkbox__item{
    font-size: max(1.25vw,12px);
  }

  :where(.sale-page) .mi-checkbox__item .checkbox__icon{
    font-size: max(1.25vw,12px);
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .mi-input{
    border-radius: 14px;
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
  }

  :where(.sale-page) .mi-checkbox__item{
    font-size: 24px;
  }

  :where(.sale-page) .mi-checkbox__item .checkbox__icon{
    font-size: 24px;
  }
}

/* ==========================================================================
   Floating toolkit
   ========================================================================== */

:where(.sale-page) .store-page-toolkit{
  z-index: 20;
  position: absolute;
  bottom: 120px;
  left: auto;
  right: 16px;
  width: unset !important;
}

:where(.sale-page) .store-page-toolkit .store-page-toolkit__main .main-item{
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-top: 28px;
  transition: background-color .2s;
  display: flex;
  position: relative;
}

:where(.sale-page) .store-page-toolkit .store-page-toolkit__main .main-item:before{
  content: "";
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0 4.27px 10.67px rgba(0,0,0,.1);
}

:where(.sale-page) .store-page-toolkit .store-page-toolkit__main .main-item .micon{
  color: var(--event-light-dark-button-toolkit-hover,#191919);
  margin: auto;
  font-size: 28px;
  transition: color .2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

:where(.sale-page) .store-page-toolkit .store-page-toolkit__main .main-item:hover .micon{
  color: var(--event-light-dark-button-toolkit,#fff);
}

:where(.sale-page) .store-page-toolkit .store-page-toolkit__main .store-page-toolkit__main--hide{
  display: none;
}

:where(.sale-page) .event-page-toolkit__icon-bg{
  width: 100%;
  height: 100%;
  position: relative;
}

:where(.sale-page) .event-page-toolkit__icon-bg img{
  width: 100%;
  height: 100%;
  transition: opacity .2s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

:where(.sale-page) .event-page-toolkit__icon-bg-base{
  opacity: 1;
}

:where(.sale-page) .event-page-toolkit__icon-bg-hover,
:where(.sale-page) .event-page-toolkit__icon-bg:hover .event-page-toolkit__icon-bg-base{
  opacity: 0;
}

:where(.sale-page) .event-page-toolkit__icon-bg:hover .event-page-toolkit__icon-bg-hover{
  opacity: 1;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .store-page-toolkit{
    bottom: 24px;
  }

  :where(.sale-page) .store-page-toolkit:not([dir="rtl"]){
    right: 12px;
  }

  :where(.sale-page) .store-page-toolkit .store-page-toolkit__main .main-item{
    width: 44px;
    height: 44px;
    margin-top: 24px;
  }

  :where(.sale-page) .store-page-toolkit .store-page-toolkit__main .main-item .micon{
    width: 22px;
    height: 22px;
    font-size: 22px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .store-page-toolkit{
    bottom: 20px;
  }

  :where(.sale-page) .store-page-toolkit:not([dir="rtl"]){
    right: 20px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .store-page-toolkit{
    bottom: 28px;
  }

  :where(.sale-page) .store-page-toolkit:not([dir="rtl"]){
    right: 28px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .store-page-toolkit{
    bottom: 32px;
  }

  :where(.sale-page) .store-page-toolkit:not([dir="rtl"]){
    right: 32px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .store-page-toolkit{
    bottom: 32px;
  }

  :where(.sale-page) .store-page-toolkit:not([dir="rtl"]){
    right: 32px;
  }
}

/* Order-sensitive: these must follow the breakpoint blocks above to keep the original cascade. */

:where(.sale-page) .store-page-toolkit .store-page-toolkit__main .store-page-toolkit__main--top{
  margin-top: 0;
}

/* Keep newsletter controls inside the content inset on the smallest supported phones. */
@media (max-width: 359px) {
  :where(.sale-page) .edm-subscribe .edm-subscribe__email,
:where(.sale-page) .edm-subscribe .edm-subscribe__privacy{
    max-width: 100%;
  }

  :where(.sale-page) .edm-subscribe .edm-subscribe__email-input{
    min-width: 0;
  }
}