/*
 * Xiaomi 11.11 sale page
 * Components: shared UI primitives (images, buttons, price, countdown, form controls, carousel, modal, toast).
 *
 * Breakpoints: mobile <=720px | tablet 721-1024px | laptop 1025-1440px | desktop 1441-1920px | widescreen >=1921px
 */

/* ==========================================================================
   Typography
   ========================================================================== */

:where(.sale-page) .mi-h2{
  color: var(--text-base);
  font-weight: 700;
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
}

/* Visually hidden but still announced by screen readers. */
:where(.sale-page) .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Icons
   ========================================================================== */

:where(.sale-page) body .micon{
  line-height: 1;
}

/* ==========================================================================
   Images
   ========================================================================== */

:where(.sale-page) .mi-image{
  --mi-image-width: 100%;
  --mi-image-height: 100%;
  display: flex;
}

:where(.sale-page) .mi-image .mi-image__img{
  width: var(--mi-image-width);
  height: var(--mi-image-height);
  object-fit: cover;
  object-position: center;
}

@media (min-width: 721px) {
  :where(.sale-page) .event-image .event-image--content .mi-image .mi-image__img {
    border-radius: 12px;
  }
}

:where(.sale-page) .responsive-image{
  display: block;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

:where(.sale-page) .mi-btn{
  --btn-padding: var(--btn-padding-vertical)var(--btn-padding-horizontal);
  --btn-text-base: var(--text-base);
  --btn-background-white: var(--background-white);
  --btn-background-black: var(--background-black);
  --btn-background-primary: var(--background-primary);
  --btn-ellipsis-lines: 1;
  --btn-ellipsis-direction: vertical;
  --btn-background-color: transparent;
  --link-text-decoration: underline;
  padding: var(--btn-padding);
  color: var(--btn-text-base);
  font-size: var(--btn-font-size);
  background-color: var(--btn-background-color);
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  border: none;
  display: inline-block;
}

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

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

:where(.sale-page) .mi-btn.mi-btn--default{
  --btn-background-color: transparent;
  border: 1px solid var(--border-secondary);
}

:where(.sale-page) .mi-btn.mi-btn--default:hover{
  --btn-text-base: #666;
  border-color: #666;
}

:where(.sale-page) .mi-btn.mi-btn--default:focus-visible{
  outline: 2px solid var(--background-base);
  outline-offset: 0;
}

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

:where(.sale-page) .mi-btn.mi-btn--primary{
  --btn-text-base: var(--text-reverse);
  --btn-background-color: var(--btn-background-black);
  border: 1px solid transparent;
}

:where(.sale-page) .mi-btn.mi-btn--primary:hover{
  --btn-background-color: #444;
}

:where(.sale-page) .mi-btn:disabled,
:where(.sale-page) .mi-btn.mi-btn--disabled{
  --btn-text-base: var(--text-reverse);
  --btn-background-color: var(--brand-grey-40);
  cursor: not-allowed;
  border: 1px solid transparent;
}

:where(.sale-page) .mi-btn:disabled:hover,
:where(.sale-page) .mi-btn.mi-btn--disabled:hover{
  --btn-background-color: var(--brand-grey-40);
  --btn-text-base: var(--text-reverse);
  border-color: transparent;
}

:where(.sale-page) .mi-btn:disabled:focus-visible{
  outline: none !important;
}

:where(.sale-page) .mi-btn.mi-btn--disabled:focus-visible{
  outline: none !important;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .mi-btn{
    --btn-padding-vertical: 8px;
    --btn-padding-horizontal: 20px;
    --btn-font-size: 12px;
    --btn-border-radius: 8px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .mi-btn{
    --btn-padding-vertical: 10px;
    --btn-padding-horizontal: 16px;
    --btn-font-size: 1.5625vw;
    --btn-border-radius: 8px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .mi-btn{
    --btn-padding-vertical: .833333vw;
    --btn-padding-horizontal: 1.66667vw;
    --btn-font-size: 16px;
    --btn-border-radius: 8px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .mi-btn{
    --btn-padding-vertical: .625vw;
    --btn-padding-horizontal: 2.08333vw;
    --btn-font-size: 1.25vw;
    --btn-border-radius: 12px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .mi-btn{
    --btn-padding-vertical: 12px;
    --btn-padding-horizontal: 40px;
    --btn-font-size: 24px;
    --btn-border-radius: 14px;
  }
}

/* ==========================================================================
   Price
   ========================================================================== */

:where(.sale-page) .mi-price{
  word-break: keep-all;
}

:where(.sale-page) .mi-price span{
  font-weight: 400;
}

:where(.sale-page) .mi-price strong{
  -webkit-margin-end: 8px;
  white-space: nowrap;
  font-weight: 400;
  display: inline-block;
}

:where(.sale-page) .mi-price strong:not([dir="rtl"]){
  margin-right: 8px;
}

:where(.sale-page) .mi-price strong small{
  font-size: 70%;
}

:where(.sale-page) .mi-price del{
  font-style: normal;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
  display: inline-block;
}

:where(.sale-page) .mi-price.mi-price--inline{
  line-height: initial;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: inline-flex;
}

:where(.sale-page) .mi-price.mi-price--inline *{
  display: inline-flex;
}

:where(.sale-page) .mi-price.mi-price--inline small{
  font-size: 100%;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .mi-price.mi-price--inline{
    justify-content: center;
  }
}

/* ==========================================================================
   Countdown
   ========================================================================== */

:where(.sale-page) .mi-count-down{
  --icon-background: #191919;
  --icon-text-color: #fff;
}

:where(.sale-page) .mi-count-down--icon{
  direction: ltr;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

:where(.sale-page) .mi-count-down--icon .mi-count-down__time{
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--icon-text-color);
  font-size: var(--font-size);
  background-color: var(--icon-background);
  -webkit-clip-path: url(#saleEventClipPath);
  clip-path: url(#saleEventClipPath);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

:where(.sale-page) .mi-count-down--icon .mi-count-down__colon{
  height: var(--icon-size);
  padding: 0 var(--colon-margin);
  color: var(--icon-background);
  font-weight: 700;
  font-size: var(--font-size);
  opacity: .6;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .mi-count-down{
    --icon-size: 22px;
    --font-size: 12px;
    --colon-margin: 5px;
    --icon-text-icon-size: 28px;
    --icon-text-font-size: 12px;
    --bottom-text: 10px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .mi-count-down{
    --icon-size: 22px;
    --font-size: 12px;
    --colon-margin: 5px;
    --icon-text-icon-size: 36px;
    --icon-text-font-size: 14px;
    --bottom-text: 12px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .mi-count-down{
    --icon-size: 2.22222vw;
    --font-size: 1.38889vw;
    --colon-margin: .416667vw;
    --icon-text-icon-size: 46px;
    --icon-text-font-size: 20px;
    --bottom-text: 12px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .mi-count-down{
    --icon-size: 2.08333vw;
    --font-size: 1.25vw;
    --colon-margin: .416667vw;
    --icon-text-icon-size: 56px;
    --icon-text-font-size: 24px;
    --bottom-text: 16px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .mi-count-down{
    --icon-size: 40px;
    --font-size: 24px;
    --colon-margin: 8px;
    --icon-text-icon-size: 56px;
    --icon-text-font-size: 24px;
    --bottom-text: 16px;
  }
}

/* ==========================================================================
   Carousel arrow buttons
   ========================================================================== */

:where(.sale-page) .carouse-button{
  transform: scaleX(var(--cardinal-number));
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

:where(.sale-page) .carouse-button:focus{
  outline: none;
}

:where(.sale-page) .carouse-button .carouse-button__dark{
  fill: var(--event-light-dark-button-page-default,rgba(25,25,25,.35));
}

:where(.sale-page) .carouse-button .carouse-button__arrow{
  fill: transparent;
}

:where(.sale-page) .carouse-button:hover .carouse-button__dark{
  fill: var(--event-light-dark-button-page-hover,rgba(25,25,25,.5));
}

:where(.sale-page) .carouse-button:focus-visible .carouse-button__dark{
  fill: var(--event-light-dark-button-page-hover,rgba(25,25,25,.5));
}

:where(.sale-page) .carouse-button.disabled{
  pointer-events: none;
}

:where(.sale-page) .carouse-button.disabled .carouse-button__dark{
  fill: var(--event-light-dark-button-page-disabled,rgba(25,25,25,.15));
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .carouse-button{
    width: 18px;
    height: 18px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .carouse-button{
    width: 36px;
    height: 36px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .carouse-button{
    width: 36px;
    height: 36px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .carouse-button{
    width: 36px;
    height: 36px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .carouse-button{
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   Swiper core
   ========================================================================== */

:where(.sale-page) .swiper-container{
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  list-style: none;
  position: relative;
  overflow: hidden;
}

:where(.sale-page) .swiper-wrapper{
  z-index: 1;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  transition-property: transform;
  display: flex;
  position: relative;
}

:where(.sale-page) .swiper-wrapper{
  transform: translate(0,0);
}

:where(.sale-page) .swiper-container-free-mode>.swiper-wrapper{
  margin: 0 auto;
  transition-timing-function: ease-out;
}

:where(.sale-page) .swiper-container-pointer-events{
  touch-action: pan-y;
}

:where(.sale-page) .swiper-slide{
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
  position: relative;
}

/* ==========================================================================
   Modal
   ========================================================================== */

:where(.sale-page) .mi-modal .ReactModal__Overlay{
  background-color: transparent;
  transition: background-color .25s ease-in-out;
}

:where(.sale-page) .mi-modal .ReactModal__Overlay--after-open.mi-modal__overlay{
  background-color: rgba(0,0,0,.6);
}

:where(.sale-page) .mi-modal .ReactModal__Overlay--before-close.mi-modal__overlay{
  background-color: transparent;
}

:where(.sale-page) .mi-modal .ReactModal__Content{
  opacity: 0;
  transition-property: opacity,transform;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  transform: translateY(-65%);
}

:where(.sale-page) .mi-modal .ReactModal__Content--after-open.mi-modal__content{
  opacity: 1;
  transform: translateY(-50%);
}

:where(.sale-page) .mi-modal .ReactModal__Content--before-close.mi-modal__content{
  opacity: 0;
  transform: translateY(-65%);
}

:where(.sale-page) .mi-modal .mi-modal__overlay{
  z-index: 30;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

:where(.sale-page) .mi-modal .mi-modal__content{
  top: 50%;
  right: 0;
  bottom: unset;
  box-sizing: border-box;
  width: fit-content;
  min-width: var(--modal-min-width);
  max-width: var(--modal-max-width);
  background-color: var(--background-white);
  --modal-footer-padding-vertical: var(--content-padding);
  --modal-footer-padding-horizontal: var(--content-padding);
  border-radius: 4px;
  outline: none;
  flex-flow: column;
  height: auto;
  max-height: min(80%,900px);
  margin: auto;
  display: flex;
  position: absolute;
  left: 0;
  overflow: hidden;
}

:where(.sale-page) .mi-modal .mi-modal__header{
  box-sizing: border-box;
  width: 100%;
  padding: var(--content-padding);
  color: var(--text-base);
  flex-flow: column;
  flex-shrink: 0;
  flex-basis: auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

:where(.sale-page) .mi-modal .mi-modal__header:empty{
  display: none;
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__title-wrap{
  box-sizing: border-box;
  color: var(--text-base);
  width: 100%;
  margin: 0;
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__title-wrap--center{
  padding: 0 var(--close-button-size);
  text-align: center;
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__title-wrap .mi-modal__title{
  font-weight: 500;
  font-size: var(--font-size-heading);
  -webkit-hyphens: manual;
  hyphens: manual;
  margin: 0;
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__close{
  top: var(--close-button-position);
  color: var(--brand-black-40);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  --icon-font-size: var(--close-button-size);
  --close-button-position: var(--content-padding);
  right: var(--close-button-position);
  left: unset;
  position: absolute;
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__close:hover{
  color: var(--brand-black-50);
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__close .micon{
  display: block;
}

:where(.sale-page) .mi-modal .mi-modal__main{
  box-sizing: border-box;
  width: 100%;
  min-height: var(--font-size-heading);
  max-height: 70vh;
  margin: var(--modal-footer-padding-vertical)auto;
  padding: 0 var(--content-padding);
  white-space: pre-line;
  word-break: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-grow: 1;
  display: block;
  overflow: auto;
}

:where(.sale-page) .mi-modal .mi-modal__footer{
  box-sizing: border-box;
  width: 100%;
  padding: var(--modal-footer-padding-vertical)var(--modal-footer-padding-horizontal);
  flex-flow: column;
  flex-basis: auto;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  display: flex;
}

:where(.sale-page) .mi-modal .mi-modal__footer:empty{
  display: none;
}

:where(.sale-page) .mi-modal .mi-modal__footer .mi-modal__action{
  grid-gap: calc(var(--modal-footer-padding-horizontal)/2);
  gap: calc(var(--modal-footer-padding-horizontal)/2);
  grid-template-columns: repeat(2,1fr);
  width: 100%;
  display: grid;
}

:where(.sale-page) .mi-modal .mi-modal__footer .mi-modal__button{
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  --btn-font-size: var(--font-size-button);
  --btn-padding-vertical: var(--button-padding);
  --btn-padding-horizontal: var(--button-padding);
  flex: auto;
  justify-content: center;
  align-items: center;
  margin: 0;
  display: flex;
}

:where(.sale-page) .mi-modal .mi-modal__header:not(:empty)+.mi-modal__main{
  margin-top: 0;
  padding-top: 0;
}

:where(.sale-page) .mi-modal .mi-modal__main+.mi-modal__footer{
  margin-top: calc(-1*var(--modal-footer-padding-vertical));
}

:where(.sale-page) .mi-modal.mi-modal--dialog .mi-modal__content{
  box-shadow: 0 6px 12px rgba(25,25,25,.08);
}

body.sale-event-template-page.mi-modal__body--overflow-hidden{
  overflow: hidden;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .mi-modal .mi-modal__content{
    --content-padding: 16px;
    --drawer-content-padding: 16px;
    --close-button-size: 20px;
    --modal-min-width: 240px;
    --modal-max-width: 80%;
    --font-size-heading: 16px;
    --font-size-subtitle: 12px;
    --font-size-button: 12px;
    --button-padding: 10px;
  }

  :where(.sale-page) .mi-modal .mi-modal__header{
    padding-bottom: calc(var(--content-padding) + 4px);
  }

  :where(.sale-page) .mi-modal.mi-modal--bottom .ReactModal__Content--before-close.mi-modal__content{
    opacity: 1;
    transform: translateY(100%);
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .mi-modal .mi-modal__content{
    --content-padding: 20px;
    --drawer-content-padding: 40px;
    --close-button-size: 20px;
    --modal-min-width: 270px;
    --modal-max-width: 480px;
    --font-size-heading: 16px;
    --font-size-subtitle: 12px;
    --font-size-button: 14px;
    --button-padding: 10px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .mi-modal .mi-modal__content{
    --content-padding: 24px;
    --drawer-content-padding: 48px;
    --close-button-size: 24px;
    --modal-min-width: 360px;
    --modal-max-width: 560px;
    --font-size-heading: 20px;
    --font-size-subtitle: 16px;
    --font-size-button: 16px;
    --button-padding: 12px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .mi-modal .mi-modal__content{
    --content-padding: 30px;
    --drawer-content-padding: 60px;
    --close-button-size: 24px;
    --modal-min-width: 420px;
    --modal-max-width: 640px;
    --font-size-heading: 24px;
    --font-size-subtitle: 18px;
    --font-size-button: 18px;
    --button-padding: 12px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .mi-modal .mi-modal__content{
    --content-padding: 30px;
    --drawer-content-padding: 60px;
    --close-button-size: 24px;
    --modal-min-width: 420px;
    --modal-max-width: 640px;
    --font-size-heading: 24px;
    --font-size-subtitle: 18px;
    --font-size-button: 18px;
    --button-padding: 12px;
  }
}

/* Close button rendered by ui.js as a real <button>: drop the browser's button chrome. */
:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__close{
  padding: 0;
  font-size: var(--close-button-size, 24px);
  line-height: 1;
  background: none;
  border: 0;
}

:where(.sale-page) .mi-modal .mi-modal__header .mi-modal__close .micon{
  font-size: inherit;
}

/* ==========================================================================
   Toast
   ========================================================================== */

:where(.sale-page) .mi-toast .mi-toast__wrapper-enter,
:where(.sale-page) .mi-toast .mi-toast__wrapper-exit{
  opacity: 1;
}

:where(.sale-page) .mi-toast .mi-toast__wrapper-exit-active{
  opacity: 0;
  transition: opacity .5s;
}

:where(.sale-page) .mi-toast .mi-toast__main{
  z-index: 50;
  box-sizing: border-box;
  color: var(--text-reverse);
  min-width: 318px;
  max-width: 520px;
  text-align: center;
  background: rgba(25,25,25,.8);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 4px 8px rgba(25,25,25,.08);
}

:where(.sale-page) .mi-toast .mi-toast__content{
  word-wrap: break-word;
  width: 100%;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .mi-toast .mi-toast__main{
    border-radius: 8px;
    min-width: 60%;
    max-width: 80%;
    padding: 16px 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Social share
   ========================================================================== */

:where(.sale-page) .social-share{
  flex-flow: row;
  flex-basis: auto;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

:where(.sale-page) .social-share .social-share__item{
  flex-flow: column;
  flex-basis: auto;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  display: flex;
  position: relative;
}

:where(.sale-page) .social-share .social-share__item i{
  box-sizing: border-box;
  color: var(--text-base);
  font-size: var(--social-icon-size);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  line-height: 1;
  display: inline-flex;
}

:where(.sale-page) .social-share .social-share__item span{
  white-space: nowrap;
  text-align: center;
}

@media screen and (max-width: 720px) {
  :where(.sale-page) .social-share{
    --social-icon-size: 36px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  :where(.sale-page) .social-share{
    --social-icon-size: 48px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  :where(.sale-page) .social-share{
    --social-icon-size: 48px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  :where(.sale-page) .social-share{
    --social-icon-size: 48px;
  }
}

@media screen and (min-width: 1921px) {
  :where(.sale-page) .social-share{
    --social-icon-size: 48px;
  }
}

/* Share dialog (toolkit "Share"): links and the copy button look alike. */
:where(.sale-page) .sale-share-modal .social-share{
  --social-icon-size: 40px;
  gap: 24px;
  padding-bottom: 8px;
}

:where(.sale-page) .sale-share-modal .social-share__item{
  gap: 8px;
  padding: 0;
  color: var(--text-base);
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  cursor: pointer;
}