/*
 * Xiaomi 11.11 sale page
 * Base: reset, design tokens, event colour themes and page layout.
 *
 * Breakpoints: mobile <=720px | tablet 721-1024px | laptop 1025-1440px | desktop 1441-1920px | widescreen >=1921px
 */

/* ==========================================================================
   Reset & element defaults
   ========================================================================== */

.sale-page{
  -webkit-text-size-adjust: 100%;
  /* Keep English words intact; explicit soft hyphens remain available. */
  -webkit-hyphens: manual;
  hyphens: manual;
}

:where(.sale-page) a{
  background-color: transparent;
}

:where(.sale-page) strong{
  font-weight: bolder;
}

:where(.sale-page) small{
  font-size: 80%;
}

:where(.sale-page) img{
  border-style: none;
}

:where(.sale-page) button,
:where(.sale-page) input{
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

:where(.sale-page) button,
:where(.sale-page) input{
  overflow: visible;
}

:where(.sale-page) button{
  text-transform: none;
}

:where(.sale-page) button{
  -webkit-appearance: button;
}

:where(.sale-page) [type=button]{
  -webkit-appearance: button;
}

:where(.sale-page) [type=submit]{
  -webkit-appearance: button;
}

:where(.sale-page) button::-moz-focus-inner{
  border-style: none;
  padding: 0;
}

:where(.sale-page) [type=button]::-moz-focus-inner{
  border-style: none;
  padding: 0;
}

:where(.sale-page) [type=submit]::-moz-focus-inner{
  border-style: none;
  padding: 0;
}

:where(.sale-page) button:-moz-focusring{
  outline: 1px dotted buttontext;
}

:where(.sale-page) [type=button]:-moz-focusring{
  outline: 1px dotted buttontext;
}

:where(.sale-page) [type=submit]:-moz-focusring{
  outline: 1px dotted buttontext;
}

:where(.sale-page) [type=checkbox]{
  box-sizing: border-box;
  padding: 0;
}

:where(.sale-page) [type=search]{
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

:where(.sale-page) [type=search]::-webkit-search-decoration{
  -webkit-appearance: none;
}

:where(.sale-page) ::-webkit-file-upload-button{
  -webkit-appearance: button;
  font: inherit;
}

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

.sale-page{
  --orange-orange100: #ff6900;
  --orange-orange90: #ff7819;
  --orange-orange80: #ff8733;
  --orange-orange70: #ff964c;
  --orange-orange60: #ffa566;
  --orange-orange50: #ffb47f;
  --orange-orange40: #ffc399;
  --orange-orange30: #ffd2b2;
  --orange-orange25: #ffd9bf;
  --orange-orange20: #ffe1cc;
  --orange-orange15: #ffe8d9;
  --orange-orange10: #fff0e5;
  --orange-orange-alpha80: rgba(255,105,0,.8);
  --orange-orange-alpha30: rgba(255,105,0,.3);
  --blue-blue100: #1a77ed;
  --blue-blue95: #267ff1;
  --blue-blue80: #4893f3;
  --blue-blue70: #5fa1f5;
  --blue-blue60: #76aef6;
  --blue-blue50: #8cbbf7;
  --blue-blue40: #a3c9f9;
  --blue-blue30: #bad7fb;
  --blue-blue25: #c6ddfb;
  --blue-blue20: #d1e4fc;
  --blue-blue15: #ddebfd;
  --blue-blue10: #e8f2fe;
  --blue-line: #b7c7df;
  --red-red100: #db2e2e;
  --red-red90: #df4343;
  --red-red80: #ec5656;
  --red-red70: #e66c6c;
  --red-red60: #e98181;
  --red-red50: #ed9696;
  --red-red40: #f1abab;
  --red-red30: #f4c0c0;
  --red-red25: #f6cbcb;
  --red-red20: #f8d5d5;
  --red-red10: #fbeaea;
  --red-mipoint: #feecd6;
  --red-coupon: #ffdfb6;
  --red-line: #f3c892;
  --gold-tab-bg100: #f6dfb4;
  --gold-coupon-left100: #f0d7a8;
  --gold-line: #e0cca5;
  --gold-on-nav100: #5f4108;
  --gold-gold100: linear-gradient(94.86deg,#f3e1bf -9.99%,#e6cb9a 97.13%);
  --gold-mipoint100: linear-gradient(102.32deg,#faebcf -7.32%,#f1d9ab 97.55%);
  --gold-btn-disabled100: linear-gradient(102.32deg,rgba(250,235,207,.5) -7.32%,rgba(241,217,171,.5) 97.55%);
  --gold-new100: linear-gradient(89.4deg,#e8cda1 0.52%,#f5e6c7 99.54%);
  --gold-head-cd100: linear-gradient(94.75deg,#e0bb78 -1.59%,#e0bb78 101.06%);
  --gold-cd-bg100: linear-gradient(94.75deg,#e0be7d -1.59%,#dcb269 101.06%);
  --gold-lightning100: linear-gradient(175deg,#f4c977 4.38%,#b37d18 94.34%);
  --blackgold-bg100: #f8e6c4;
  --blackgold-claim-normal: #5f5543;
  --blackgold-claim-special: #786e58;
  --blackgold-claim100: #fffdf8;
  --blackgold-claim-bg100: #edd6af;
  --blackgold-blackgold100: linear-gradient(94.86deg,#f3e1bf -9.99%,#e6cb9a 97.13%);
  --blackgold-head-cd100: linear-gradient(95.48deg,#454851 -5.61%,#44474f 100.81%);
  --blackgold-cd-bg100: linear-gradient(95.48deg,#484b54 -5.61%,#3a3d45 100.81%);
  --blackgold-lightning100: linear-gradient(187.24deg,#ffe86f 6.44%,#ffb800 104.24%);
  --blackgold-star100: #deb674;
  --rosegold-tab-bg100: #f2d5cb;
  --rosegold-coupon-left100: #e9c4b8;
  --rosegold-line: #d8ad9f;
  --rosegold-star: #e08974;
  --rosegold-bg100: #46434f;
  --rosegold-cd-bg100: #594f5d;
  --rosegold-on-nav100: #4c3a34;
  --rosegold-claim100: #eda188;
  --rosegold-rosegold100: linear-gradient(96.38deg,#fbd9ce -7.34%,#c88c78 114.51%);
  --rosegold-mipoint100: linear-gradient(103.83deg,#f3ded7 -1.18%,#e6c4b9 105.45%);
  --rosegold-star100: #df8b78;
  --base-tag100: #fbeed5;
  --base-on-tag100: #785a25;
  --neutral-neutral100: #191919;
  --neutral-neutral90: #303030;
  --neutral-neutral80: #474747;
  --neutral-neutral70: #5e5e5e;
  --neutral-neutral60: #757575;
  --neutral-neutral55: #898989;
  --neutral-neutral50: #8c8c8c;
  --neutral-neutral40: #a3a3a3;
  --neutral-neutral30: #bababa;
  --neutral-neutral20: #d1d1d1;
  --neutral-neutral10: #e8e8e8;
  --neutral-neutral7: #f0f0f0;
  --neutral-neutral5: #f7f7f7;
  --light-alpha80: rgba(25,25,25,.8);
  --light-alpha70: rgba(25,25,25,.7);
  --light-alpha50: rgba(25,25,25,.5);
  --light-alpha40: rgba(25,25,25,.4);
  --light-alpha35: rgba(25,25,25,.35);
  --light-alpha25: rgba(25,25,25,.25);
  --light-alpha15: rgba(25,25,25,.15);
  --light-alpha10: rgba(25,25,25,.1);
  --light-alpha7: rgba(25,25,25,.05);
  --light-alpha6: rgba(25,25,25,.06);
  --light-alpha4: rgba(25,25,25,.04);
  --dark-alpha90: rgba(255,255,255,.9);
  --dark-alpha85: rgba(255,255,255,.85);
  --dark-alpha70: rgba(255,255,255,.7);
  --dark-alpha50: rgba(255,255,255,.5);
  --dark-alpha35: rgba(255,255,255,.35);
  --dark-alpha30: rgba(255,255,255,.3);
  --dark-alpha20: rgba(255,255,255,.2);
  --dark-alpha15: rgba(255,255,255,.15);
  --dark-alpha10: rgba(255,255,255,.1);
  --black-black100: #000;
  --black-black90: rgba(0,0,0,.9);
  --white-white100: #fff;
  --poco-yellow100: #ffd400;
  --poco-yellow70: #ffe14d;
  --poco-yellow50: #ffe980;
  --poco-yellow30: #fe9;
  --poco-yellow15: #fff9d9;
  --poco-yellow-alpha80: rgba(255,212,0,.8);
  --poco-yellow-alpha30: rgba(255,212,0,.3);
  --poco-line100: #eddd86;
  --poco-background90: #292b30;
  --poco-background70: #34353b;
  --poco-background60: #3a3b42;
  --poco-normal-line100: #65604d;
  --poco-special-line100: #6e643f;
}

:where(.sale-page) ul,
:where(.sale-page) li,
:where(.sale-page) p{
  margin: 0;
  padding: 0;
}

:where(.sale-page) li{
  list-style: none;
}

:where(.sale-page) p,
:where(.sale-page) span,
:where(.sale-page) strong{
  white-space: pre-line;
}

:where(.sale-page) input{
  color: var(--text-base);
  background-color: var(--background-white);
  border-color: var(--text-base);
}

.sale-page{
  --line-height: 1.25;
}

.sale-page{
  color: var(--text-base);
  scrollbar-color: #d0d0d0 #fff;
  --cardinal-number: 1;
  --grid-margin-small-special: var(--grid-gutter-width)0;
  --grid-margin-medium: var(--grid-gutter-width);
  --outline-color: rgba(255,105,0,.5);
}

:where(.sale-page) ::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}

:where(.sale-page) ::-webkit-scrollbar-thumb{
  background-color: #d0d0d0;
  border-radius: 4px;
}

:where(.sale-page) a{
  color: inherit;
  text-decoration: none;
}

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

:where(.sale-page) img{
  font-size: 12px;
  line-height: 1.2;
}

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

.sale-page{
  --swiper-theme-color: #007aff;
}

.sale-page{
  --skeleton-color: #eee;
  --brand-orange: #ff6900;
  --brand-orange-90: #ff7819;
  --brand-orange-80: #ff8733;
  --brand-orange-70: #ff964c;
  --brand-orange-60: #ffa566;
  --brand-orange-50: #ffb47f;
  --brand-orange-40: #ffc399;
  --brand-orange-30: #ffd2b2;
  --brand-orange-20: #ffe1cc;
  --brand-orange-10: #fff0e5;
  --brand-grey: #757575;
  --brand-grey-90: #949494;
  --brand-grey-80: #a1a1a1;
  --brand-grey-70: #acacac;
  --brand-grey-60: #b8b8b8;
  --brand-grey-50: #c4c4c4;
  --brand-grey-40: #d0d0d0;
  --brand-grey-30: #dbdbdb;
  --brand-grey-20: #e7e7e7;
  --brand-grey-10: #f3f3f3;
  --brand-black: #191919;
  --brand-black-90: #303030;
  --brand-black-80: #474747;
  --brand-black-70: #5e5e5e;
  --brand-black-60: #757575;
  --brand-black-50: #8c8c8c;
  --brand-black-40: #a3a3a3;
  --brand-black-30: #dbdbdb;
  --brand-black-20: #d1d1d1;
  --brand-black-10: #e8e8e8;
  --brand-reverse: #fff;
  --text-base: #191919;
  --text-reverse: #fff;
  --text-primary: #ff6900;
  --text-secondary: #757575;
  --text-black: #333;
  --text-error: #e62700;
  --background-base: #f7f7f7;
  --background-white: #fff;
  --background-grey: #dbdbdb;
  --background-light-grey: #f5f5f5;
  --background-black: #191919;
  --background-primary: #ff6900;
  --background-primary-light: #fff0e6;
  --background-disable: #ddd;
  --background-loader: #ff6900;
  --background-deep-black: #24201c;
  --border-base: #898989;
  --border-footer: #2e2e2e;
  --border-input: #b0b0b0;
  --border-primary: #ff6900;
  --border-secondary: #191919;
  --border-popover: #e0e0e0;
  --shadow-black-a2: rgba(0,0,0,.02);
  --shadow-black-a5: rgba(0,0,0,.05);
  --shadow-black-a7: rgba(0,0,0,.07);
  --shadow-black-a8: rgba(0,0,0,.08);
  --shadow-black-a10: rgba(0,0,0,.1);
  --shadow-black-a15: rgba(0,0,0,.15);
  --shadow-black-a20: rgba(0,0,0,.2);
  --shadow-black-a25: rgba(0,0,0,.25);
  --shadow-black-a30: rgba(0,0,0,.3);
  --shadow-black-a40: rgba(0,0,0,.4);
  --shadow-black-a50: rgba(0,0,0,.5);
  --shadow-black-a60: rgba(0,0,0,.6);
  --shadow-white-a10: rgba(255,255,225,.1);
  --shadow-white-a20: rgba(255,255,225,.2);
  --shadow-white-a30: rgba(255,255,225,.3);
  --shadow-white-a50: rgba(255,255,225,.5);
  --shadow-white-a80: rgba(255,255,225,.8);
  --shadow-white-a90: rgba(255,255,225,.9);
  --shadow-primary-a10: rgba(255,105,0,.1);
  --shadow-primary-a20: rgba(255,105,0,.2);
  --shadow-primary-a30: rgba(255,105,0,.3);
  --shadow-primary-a40: rgba(255,105,0,.4);
  --shadow-primary-a50: rgba(255,105,0,.5);
}

@media screen and (max-width: 720px) {
  .sale-page{
    --header-height: 48px;
    --site-horizontal-padding: 16px;
    --store-max-width: 100%;
    --support-max-width: 100%;
    --max-width-1400: 720px;
    --grid-gutter-width: 2.22222vw;
    --grid-columns: 6;
  }

  .sale-page{
    --grid-margin-small: var(--grid-gutter-width)0;
    --grid-margin-medium-special: var(--grid-gutter-width)0;
    --grid-margin-large: var(--grid-gutter-width);
    --grid-margin-large-special: var(--grid-gutter-width)0;
  }

  .sale-page{
    --text-font-size: 12px;
    --note-font-size: 10px;
    --h1-font-size: 22px;
    --h1-line-height: 30px;
    --h2-font-size: 16px;
    --h2-line-height: 22px;
    --h3-font-size: 16px;
    --h3-line-height: 22px;
    --p1-font-size: 14px;
    --p1-line-height: 20px;
    --p2-font-size: 12px;
    --p2-line-height: 16px;
    --p3-font-size: 12px;
    --p3-line-height: 16px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  .sale-page{
    --header-height: 48px;
    --site-horizontal-padding: 32px;
    --store-max-width: 945px;
    --support-max-width: 960px;
    --max-width-1400: 1000px;
    --grid-gutter-width: .78125vw;
    --grid-columns: 12;
  }

  .sale-page{
    --grid-margin-small: 0;
    --grid-margin-medium-special: var(--grid-gutter-width);
    --grid-margin-large: 32px;
    --grid-margin-large-special: 32px;
  }

  .sale-page{
    --text-font-size: 14px;
    --note-font-size: 12px;
    --h1-font-size: 20px;
    --h1-line-height: 24px;
    --h2-font-size: 20px;
    --h2-line-height: 24px;
    --h3-font-size: 18px;
    --h3-line-height: 22px;
    --p1-font-size: 16px;
    --p1-line-height: 20px;
    --p2-font-size: 16px;
    --p2-line-height: 20px;
    --p3-font-size: 14px;
    --p3-line-height: 16px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .sale-page{
    --header-height: 48px;
    --site-horizontal-padding: 32px;
    --store-max-width: 945px;
    --support-max-width: 960px;
    --max-width-1400: 1180px;
    --grid-gutter-width: 16px;
    --grid-columns: 12;
  }

  .sale-page{
    --grid-margin-small: 0;
    --grid-margin-medium-special: var(--grid-gutter-width);
    --grid-margin-large: 48px;
    --grid-margin-large-special: 48px;
  }

  .sale-page{
    --text-font-size: 18px;
    --note-font-size: 14px;
    --h1-font-size: 32px;
    --h1-line-height: 38px;
    --h2-font-size: 24px;
    --h2-line-height: 28px;
    --h3-font-size: 20px;
    --h3-line-height: 24px;
    --p1-font-size: 18px;
    --p1-line-height: 24px;
    --p2-font-size: 16px;
    --p2-line-height: 20px;
    --p3-font-size: 14px;
    --p3-line-height: 16px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  .sale-page{
    --header-height: 56px;
    --site-horizontal-padding: 32px;
    --store-max-width: 1260px;
    --support-max-width: 1260px;
    --max-width-1400: 1400px;
    --grid-gutter-width: 16px;
    --grid-columns: 12;
  }

  .sale-page{
    --grid-margin-small: 0;
    --grid-margin-medium-special: var(--grid-gutter-width);
    --grid-margin-large: 64px;
    --grid-margin-large-special: 64px;
  }

  .sale-page{
    --text-font-size: 20px;
    --note-font-size: 18px;
    --h1-font-size: 48px;
    --h1-line-height: 58px;
    --h2-font-size: 36px;
    --h2-line-height: 40px;
    --h3-font-size: 32px;
    --h3-line-height: 36px;
    --p1-font-size: 24px;
    --p1-line-height: 28px;
    --p2-font-size: 20px;
    --p2-line-height: 26px;
    --p3-font-size: 16px;
    --p3-line-height: 20px;
  }
}

@media screen and (min-width: 1921px) {
  .sale-page{
    --header-height: 56px;
    --site-horizontal-padding: 32px;
    --store-max-width: 1680px;
    --support-max-width: 1260px;
    --max-width-1400: 1400px;
    --grid-gutter-width: 16px;
    --grid-columns: 12;
  }

  .sale-page{
    --grid-margin-small: 0;
    --grid-margin-medium-special: var(--grid-gutter-width);
    --grid-margin-large: 80px;
    --grid-margin-large-special: 80px;
  }

  .sale-page{
    --text-font-size: 24px;
    --note-font-size: 20px;
    --h1-font-size: 48px;
    --h1-line-height: 58px;
    --h2-font-size: 36px;
    --h2-line-height: 40px;
    --h3-font-size: 32px;
    --h3-line-height: 36px;
    --p1-font-size: 24px;
    --p1-line-height: 28px;
    --p2-font-size: 20px;
    --p2-line-height: 26px;
    --p3-font-size: 16px;
    --p3-line-height: 20px;
  }
}

@media (min-width: 414px) and (max-width: 720px) {
  .sale-page{
    --m-scale: 1.1;
  }
}

/* --- Typeface -----------------------------------------------------------
   Xiaomi's MiSans, as on the original page. The Latin subset is the one Xiaomi's English sites
   load (i18n/fonts/MiSansLatin); the two symbol files supply the ⚡ and ⭐ glyphs used in titles.
   Variable font: one file covers every weight. */
@font-face {
  font-family: "MiSans Latin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/MiSansLatin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "MiSans Latin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/MiSans-symbol-lightning.woff2") format("woff2");
  unicode-range: U+26A1;
}

@font-face {
  font-family: "MiSans Latin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/MiSans-symbol-star.woff2") format("woff2");
  unicode-range: U+2B50;
}

.sale-page{
  font-family: "MiSans Latin", sans-serif;
}

/* ==========================================================================
   Design tokens & event themes
   ========================================================================== */

:where(.sale-page) .event-theme.event-theme--orange{
  --event-main-theme: var(--orange-orange100);
  --event-background-container: var(--neutral-neutral5);
  --event-background-primary: var(--white-white100);
  --event-background-secondary: var(--neutral-neutral100);
  --event-background-tertiary: var(--neutral-neutral90);
  --event-background-cd-dp: var(--white-white100);
  --event-background-theme: var(--orange-orange100);
  --event-background-theme-primary: var(--orange-orange100);
  --event-background-theme-primary-hover: var(--dark-alpha10);
  --event-background-theme-secondary: var(--orange-orange80);
  --event-background-theme-tertiary: var(--orange-orange30);
  --event-background-theme-cd: var(--orange-orange80);
  --event-background-theme-dp: var(--orange-orange30);
  --event-background-theme-mipoint: var(--orange-orange15);
  --event-background-new: var(--gold-new100);
  --event-background-cd-time: var(--white-white100);
  --event-background-dp-time: var(--neutral-neutral100);
  --event-background-tag: var(--base-tag100);
  --event-background-lightning: var(--orange-orange100);
  --event-background-nav-hover: var(--neutral-neutral5);
  --event-text-primary: var(--neutral-neutral100);
  --event-text-secondary: var(--neutral-neutral80);
  --event-text-dp-tab: var(--neutral-neutral80);
  --event-text-cd-dp: var(--neutral-neutral80);
  --event-text-tertiary: var(--neutral-neutral70);
  --event-text-subtle: var(--neutral-neutral50);
  --event-text-subtlest: var(--neutral-neutral20);
  --event-text-reverse: var(--white-white100);
  --event-text-cd-h: var(--white-white100);
  --event-text-cd-tab: var(--dark-alpha85);
  --event-text-dp-h: var(--neutral-neutral100);
  --event-text-theme: var(--orange-orange100);
  --event-text-theme-pop: var(--orange-orange100);
  --event-text-theme-primary: var(--orange-orange100);
  --event-text-on-tag: var(--base-on-tag100);
  --event-text-on-cd-time: var(--neutral-neutral100);
  --event-text-on-new: var(--base-on-tag100);
  --event-text-on-tab: var(--white-white100);
  --event-text-on-nav: var(--white-white100);
  --event-text-claim-ask: var(--orange-orange100);
  --event-button-default: var(--neutral-neutral100);
  --event-button-hover: var(--neutral-neutral80);
  --event-button-disabled: var(--neutral-neutral50);
  --event-button-theme: var(--neutral-neutral100);
  --event-button-theme-hover: var(--neutral-neutral80);
  --event-button-theme-disabled: var(--neutral-neutral50);
  --event-button-coupon: var(--neutral-neutral100);
  --event-button-coupon-hover: var(--neutral-neutral80);
  --event-button-coupon-disabled: var(--neutral-neutral50);
  --event-button-dp-cd: var(--neutral-neutral100);
  --event-button-dp-cd-hover: var(--neutral-neutral80);
  --event-button-dp-cd-disable: var(--neutral-neutral50);
  --event-button-claim: var(--orange-orange100);
  --event-button-claim-bg: var(--black-black100);
  --event-button-claim-mask: var(--dark-alpha10);
  --event-button-normal-bg: var(--event-light-dark-button-claim);
  --event-line-line: var(--orange-orange40);
  --event-line-claim-normal: var(--orange-orange30);
  --event-line-claim-special: var(--orange-orange50);
  --event-line-star: var(--orange-orange100);
  --event-border-tag: var(--neutral-neutral100);
}

:where(.sale-page) .event-theme.event-theme--blue{
  --event-main-theme: var(--blue-blue100);
  --event-background-container: var(--neutral-neutral5);
  --event-background-primary: var(--white-white100);
  --event-background-secondary: var(--neutral-neutral100);
  --event-background-tertiary: var(--neutral-neutral90);
  --event-background-cd-dp: var(--white-white100);
  --event-background-theme: var(--orange-orange100);
  --event-background-theme-primary: var(--blue-blue95);
  --event-background-theme-primary-hover: var(--dark-alpha10);
  --event-background-theme-secondary: var(--blue-blue80);
  --event-background-theme-tertiary: var(--blue-blue25);
  --event-background-theme-cd: var(--blue-blue80);
  --event-background-theme-dp: var(--blue-blue25);
  --event-background-theme-mipoint: var(--blue-blue15);
  --event-background-new: var(--gold-new100);
  --event-background-cd-time: var(--white-white100);
  --event-background-dp-time: var(--neutral-neutral100);
  --event-background-tag: var(--base-tag100);
  --event-background-lightning: var(--orange-orange100);
  --event-background-nav-hover: var(--neutral-neutral5);
  --event-text-primary: var(--neutral-neutral100);
  --event-text-secondary: var(--neutral-neutral80);
  --event-text-dp-tab: var(--neutral-neutral80);
  --event-text-cd-dp: var(--neutral-neutral80);
  --event-text-tertiary: var(--neutral-neutral70);
  --event-text-subtle: var(--neutral-neutral50);
  --event-text-subtlest: var(--neutral-neutral20);
  --event-text-reverse: var(--white-white100);
  --event-text-cd-h: var(--white-white100);
  --event-text-cd-tab: var(--dark-alpha85);
  --event-text-dp-h: var(--neutral-neutral100);
  --event-text-theme: var(--orange-orange100);
  --event-text-theme-pop: var(--orange-orange100);
  --event-text-theme-primary: var(--blue-blue100);
  --event-text-on-tag: var(--base-on-tag100);
  --event-text-on-cd-time: var(--neutral-neutral100);
  --event-text-on-new: var(--base-on-tag100);
  --event-text-on-tab: var(--white-white100);
  --event-text-on-nav: var(--white-white100);
  --event-text-claim-ask: var(--blue-blue80);
  --event-button-default: var(--neutral-neutral100);
  --event-button-hover: var(--neutral-neutral80);
  --event-button-disabled: var(--neutral-neutral50);
  --event-button-theme: var(--neutral-neutral100);
  --event-button-theme-hover: var(--neutral-neutral80);
  --event-button-theme-disabled: var(--neutral-neutral50);
  --event-button-coupon: var(--neutral-neutral100);
  --event-button-coupon-hover: var(--neutral-neutral80);
  --event-button-coupon-disabled: var(--neutral-neutral50);
  --event-button-dp-cd: var(--neutral-neutral100);
  --event-button-dp-cd-hover: var(--neutral-neutral80);
  --event-button-dp-cd-disable: var(--neutral-neutral50);
  --event-button-claim: var(--orange-orange100);
  --event-button-claim-bg: var(--black-black100);
  --event-button-claim-mask: var(--dark-alpha10);
  --event-button-normal-bg: var(--event-light-dark-button-claim);
  --event-line-line: var(--blue-line);
  --event-line-claim-normal: var(--blue-blue25);
  --event-line-claim-special: var(--blue-blue40);
  --event-line-star: var(--orange-orange100);
  --event-border-tag: var(--neutral-neutral100);
}

:where(.sale-page) .event-theme.event-theme--rose-gold{
  --event-main-theme: var(--rosegold-rosegold100);
  --event-background-container: var(--rosegold-bg100);
  --event-background-primary: var(--white-white100);
  --event-background-secondary: var(--rosegold-on-nav100);
  --event-background-tertiary: var(--neutral-neutral90);
  --event-background-cd-dp: var(--white-white100);
  --event-background-theme: var(--orange-orange100);
  --event-background-theme-primary: var(--rosegold-tab-bg100);
  --event-background-theme-primary-hover: var(--light-alpha10);
  --event-background-theme-secondary: var(--rosegold-cd-bg100);
  --event-background-theme-tertiary: var(--rosegold-coupon-left100);
  --event-background-theme-cd: var(--rosegold-cd-bg100);
  --event-background-theme-dp: var(--rosegold-tab-bg100);
  --event-background-theme-mipoint: var(--rosegold-mipoint100);
  --event-background-new: var(--orange-orange100);
  --event-background-cd-time: var(--rosegold-on-nav100);
  --event-background-dp-time: var(--rosegold-on-nav100);
  --event-background-tag: var(--base-tag100);
  --event-background-lightning: var(--blackgold-lightning100);
  --event-background-nav-hover: var(--neutral-neutral5);
  --event-text-primary: var(--neutral-neutral100);
  --event-text-secondary: var(--neutral-neutral80);
  --event-text-dp-tab: var(--dark-alpha70);
  --event-text-cd-dp: var(--dark-alpha70);
  --event-text-tertiary: var(--neutral-neutral100);
  --event-text-subtle: var(--neutral-neutral70);
  --event-text-subtlest: var(--neutral-neutral20);
  --event-text-reverse: var(--white-white100);
  --event-text-cd-h: var(--white-white100);
  --event-text-cd-tab: var(--dark-alpha85);
  --event-text-dp-h: var(--white-white100);
  --event-text-theme: var(--orange-orange100);
  --event-text-theme-pop: var(--orange-orange100);
  --event-text-theme-primary: var(--rosegold-on-nav100);
  --event-text-on-tag: var(--base-on-tag100);
  --event-text-on-cd-time: var(--white-white100);
  --event-text-on-new: var(--white-white100);
  --event-text-on-tab: var(--rosegold-on-nav100);
  --event-text-on-nav: var(--rosegold-on-nav100);
  --event-text-claim-ask: var(--rosegold-star100);
  --event-button-default: var(--neutral-neutral100);
  --event-button-hover: var(--neutral-neutral80);
  --event-button-disabled: var(--neutral-neutral50);
  --event-button-theme: var(--neutral-neutral100);
  --event-button-theme-hover: var(--neutral-neutral80);
  --event-button-theme-disabled: var(--neutral-neutral50);
  --event-button-coupon: var(--neutral-neutral100);
  --event-button-coupon-hover: var(--neutral-neutral80);
  --event-button-coupon-disabled: var(--neutral-neutral50);
  --event-button-dp-cd: var(--neutral-neutral100);
  --event-button-dp-cd-hover: var(--neutral-neutral80);
  --event-button-dp-cd-disable: var(--neutral-neutral50);
  --event-button-claim: var(--rosegold-claim100);
  --event-button-claim-bg: var(--black-black100);
  --event-button-claim-mask: var(--rosegold-star100);
  --event-button-normal-bg: var(--event-light-dark-button-claim);
  --event-line-line: var(--rosegold-line);
  --event-line-claim-normal: var(--rosegold-tab-bg100);
  --event-line-claim-special: var(--rosegold-line);
  --event-line-star: var(--rosegold-star100);
  --event-border-tag: var(--neutral-neutral100);
}

:where(.sale-page) .event-theme.event-theme--light{
  --event-light-dark-bg-primary: var(--white-white100);
  --event-light-dark-bg-secondary: var(--light-alpha7);
  --event-light-dark-bg-tertiary: var(--neutral-neutral100);
  --event-light-dark-bg-subtle: var(--black-black90);
  --event-light-dark-bg-subtlest: var(--light-alpha35);
  --event-light-dark-bg-countdown: var(--dark-alpha70);
  --event-light-dark-bg-hight-contrast: var(--white-white100);
  --event-light-dark-bg-product: var(--light-alpha6);
  --event-light-dark-bg-toast: var(--light-alpha80);
  --event-light-dark-bg-countdown2: var(--light-alpha7);
  --event-light-dark-bg-more: var(--light-alpha25);
  --event-light-dark-bg-bg: var(--dark-alpha10);
  --event-light-dark-bg-nav-hover: var(--neutral-neutral5);
  --event-light-dark-text-theme: var(--neutral-neutral100);
  --event-light-dark-text-on-primary: var(--neutral-neutral100);
  --event-light-dark-text-primary: var(--neutral-neutral90);
  --event-light-dark-text-secondary: var(--neutral-neutral50);
  --event-light-dark-text-tertiary: var(--light-alpha35);
  --event-light-dark-text-low-contrast: var(--neutral-neutral30);
  --event-light-dark-text-on-tertiary: var(--white-white100);
  --event-light-dark-text-on-subtle: var(--white-white100);
  --event-light-dark-text-on-countdown: var(--neutral-neutral100);
  --event-light-dark-text-link: var(--orange-orange100);
  --event-light-dark-text-number: var(--neutral-neutral100);
  --event-light-dark-text-explain: var(--light-alpha70);
  --event-light-dark-text-on-button: var(--white-white100);
  --event-light-dark-text-countdown: var(--light-alpha70);
  --event-light-dark-text-little-text: var(--light-alpha50);
  --event-light-dark-button-page-default: var(--light-alpha35);
  --event-light-dark-button-page-hover: var(--light-alpha50);
  --event-light-dark-button-page-disabled: var(--light-alpha15);
  --event-light-dark-button-page-default-mipoint: var(--light-alpha35);
  --event-light-dark-button-page-hover-mipoint: var(--light-alpha50);
  --event-light-dark-button-page-disabled-mipoint: var(--light-alpha15);
  --event-light-dark-button-on-page: var(--dark-alpha70);
  --event-light-dark-button-default: var(--neutral-neutral100);
  --event-light-dark-button-hover: var(--neutral-neutral80);
  --event-light-dark-button-disabled: var(--neutral-neutral50);
  --event-light-dark-button-nav-hover: var(--light-alpha4);
  --event-light-dark-button-claim: var(--neutral-neutral100);
  --event-light-dark-button-claim-mask: var(--dark-alpha10);
  --event-light-dark-button-toolkit: var(--white-white100);
  --event-light-dark-button-toolkit-hover: var(--neutral-neutral100);
  --event-light-dark-border-primary: var(--light-alpha6);
  --event-light-dark-border-secondary: var(--light-alpha10);
  --event-light-dark-border-share-border: var(--dark-alpha10);
  --event-light-dark-border-tertiary: var(--dark-alpha50);
  --event-light-dark-border-subtle: var(--neutral-neutral10);
  --event-light-dark-border-subtlest: var(--neutral-neutral70);
  --event-light-dark-border-subtle-hover: var(--orange-orange100);
  --event-light-dark-border-live: var(--orange-orange-alpha80);
  --event-light-dark-border-live2: var(--orange-orange-alpha30);
  --event-light-dark-line-line: var(--neutral-neutral10);
}

:where(.sale-page) .event-theme.event-theme--dark{
  --event-light-dark-bg-primary: var(--neutral-neutral100);
  --event-light-dark-bg-secondary: var(--dark-alpha10);
  --event-light-dark-bg-tertiary: var(--white-white100);
  --event-light-dark-bg-subtle: var(--dark-alpha90);
  --event-light-dark-bg-subtlest: var(--dark-alpha30);
  --event-light-dark-bg-countdown: var(--light-alpha80);
  --event-light-dark-bg-hight-contrast: var(--dark-alpha20);
  --event-light-dark-bg-product: var(--neutral-neutral70);
  --event-light-dark-bg-toast: var(--light-alpha80);
  --event-light-dark-bg-countdown2: var(--dark-alpha20);
  --event-light-dark-bg-more: var(--light-alpha5);
  --event-light-dark-bg-bg: var(--light-alpha10);
  --event-light-dark-bg-nav-hover: var(--dark-alpha10);
  --event-light-dark-text-theme: var(--white-white100);
  --event-light-dark-text-on-primary: var(--white-white100);
  --event-light-dark-text-primary: var(--neutral-neutral10);
  --event-light-dark-text-secondary: var(--neutral-neutral50);
  --event-light-dark-text-tertiary: var(--dark-alpha35);
  --event-light-dark-text-low-contrast: var(--neutral-neutral50);
  --event-light-dark-text-on-tertiary: var(--neutral-neutral100);
  --event-light-dark-text-on-subtle: var(--white-white100);
  --event-light-dark-text-on-countdown: var(--white-white100);
  --event-light-dark-text-link: var(--orange-orange100);
  --event-light-dark-text-number: var(--gold-tab-bg100);
  --event-light-dark-text-explain: var(--dark-alpha50);
  --event-light-dark-text-on-button: var(--gold-on-nav100);
  --event-light-dark-text-countdown: var(--dark-alpha70);
  --event-light-dark-text-little-text: var(--dark-alpha50);
  --event-light-dark-button-page-default: var(--dark-alpha15);
  --event-light-dark-button-page-hover: var(--dark-alpha30);
  --event-light-dark-button-page-disabled: var(--dark-alpha35);
  --event-light-dark-button-page-default-mipoint: var(--dark-alpha15);
  --event-light-dark-button-page-hover-mipoint: var(--dark-alpha30);
  --event-light-dark-button-page-disabled-mipoint: var(--dark-alpha35);
  --event-light-dark-button-on-page: var(--dark-alpha70);
  --event-light-dark-button-default: var(--white-white100);
  --event-light-dark-button-hover: var(--dark-alpha85);
  --event-light-dark-button-disabled: var(--dark-alpha50);
  --event-light-dark-button-nav-hover: var(--dark-alpha10);
  --event-light-dark-button-claim: var(--gold-gold100);
  --event-light-dark-button-claim-mask: var(--light-alpha10);
  --event-light-dark-button-toolkit: var(--white-white100);
  --event-light-dark-button-toolkit-hover: var(--neutral-neutral100);
  --event-light-dark-border-primary: var(--neutral-neutral90);
  --event-light-dark-border-secondary: var(--dark-alpha10);
  --event-light-dark-border-share-border: var(--light-alpha4);
  --event-light-dark-border-tertiary: var(--dark-alpha10);
  --event-light-dark-border-subtle: var(--neutral-neutral90);
  --event-light-dark-border-subtlest: var(--dark-alpha70);
  --event-light-dark-border-subtle-hover: var(--blackgold-bg100);
  --event-light-dark-border-live: var(--orange-orange-alpha80);
  --event-light-dark-border-live2: var(--orange-orange-alpha30);
  --event-light-dark-line-line: var(--neutral-neutral90);
}

:where(.sale-page) .event-theme.event-theme--poco{
  --event-light-dark-bg-primary: var(--poco-background70);
  --event-light-dark-bg-secondary: var(--dark-alpha10);
  --event-light-dark-bg-tertiary: var(--poco-yellow100);
  --event-light-dark-bg-subtle: var(--poco-yellow100);
  --event-light-dark-bg-subtlest: var(--dark-alpha30);
  --event-light-dark-bg-countdown: var(--light-alpha80);
  --event-light-dark-bg-hight-contrast: var(--dark-alpha20);
  --event-light-dark-bg-product: var(--neutral-neutral70);
  --event-light-dark-bg-toast: var(--light-alpha80);
  --event-light-dark-bg-countdown2: var(--dark-alpha20);
  --event-light-dark-bg-more: var(--light-alpha5);
  --event-light-dark-bg-bg: var(--light-alpha10);
  --event-light-dark-bg-nav-hover: var(--dark-alpha10);
  --event-light-dark-text-theme: var(--poco-yellow100);
  --event-light-dark-text-on-primary: var(--white-white100);
  --event-light-dark-text-primary: var(--neutral-neutral10);
  --event-light-dark-text-secondary: var(--neutral-neutral50);
  --event-light-dark-text-tertiary: var(--dark-alpha35);
  --event-light-dark-text-low-contrast: var(--neutral-neutral50);
  --event-light-dark-text-on-tertiary: var(--poco-background90);
  --event-light-dark-text-on-subtle: var(--white-white100);
  --event-light-dark-text-on-countdown: var(--white-white100);
  --event-light-dark-text-link: var(--poco-yellow100);
  --event-light-dark-text-number: var(--gold-tab-bg100);
  --event-light-dark-text-explain: var(--dark-alpha50);
  --event-light-dark-text-on-button: var(--gold-on-nav100);
  --event-light-dark-text-countdown: var(--dark-alpha70);
  --event-light-dark-text-little-text: var(--dark-alpha50);
  --event-light-dark-button-page-default: var(--dark-alpha15);
  --event-light-dark-button-page-hover: var(--dark-alpha30);
  --event-light-dark-button-page-disabled: var(--dark-alpha35);
  --event-light-dark-button-page-default-mipoint: var(--light-alpha35);
  --event-light-dark-button-page-hover-mipoint: var(--light-alpha50);
  --event-light-dark-button-page-disabled-mipoint: var(--light-alpha15);
  --event-light-dark-button-on-page: var(--dark-alpha70);
  --event-light-dark-button-default: var(--poco-yellow100);
  --event-light-dark-button-hover: var(--dark-alpha85);
  --event-light-dark-button-disabled: var(--dark-alpha50);
  --event-light-dark-button-nav-hover: var(--dark-alpha10);
  --event-light-dark-button-claim: var(--poco-yellow100);
  --event-light-dark-button-claim-mask: var(--light-alpha10);
  --event-light-dark-button-toolkit: var(--poco-yellow100);
  --event-light-dark-button-toolkit-hover: var(--poco-background90);
  --event-light-dark-border-primary: var(--neutral-neutral90);
  --event-light-dark-border-secondary: var(--dark-alpha10);
  --event-light-dark-border-share-border: var(--light-alpha4);
  --event-light-dark-border-tertiary: var(--dark-alpha10);
  --event-light-dark-border-subtle: var(--neutral-neutral90);
  --event-light-dark-border-subtlest: var(--dark-alpha70);
  --event-light-dark-border-subtle-hover: var(--blackgold-bg100);
  --event-light-dark-border-live: var(--poco-yellow-alpha80);
  --event-light-dark-border-live2: var(--poco-yellow-alpha30);
  --event-light-dark-line-line: var(--neutral-neutral90);
  --event-main-theme: var(--poco-yellow100);
  --event-main-primary: var(--poco-background90);
  --event-main-theme-tertiary: var(--poco-yellow40);
  --event-main-theme-mipoint: var(--poco-yellow15);
  --event-main-new: var(--poco-yellow100);
  --event-background-container: var(--poco-background90);
  --event-background-primary: var(--poco-background60);
  --event-background-secondary: var(--neutral-neutral100);
  --event-background-tertiary: var(--neutral-neutral90);
  --event-background-cd-dp: var(--poco-background70);
  --event-background-theme: var(--poco-yellow100);
  --event-background-theme-primary: var(--poco-background70);
  --event-background-theme-primary-hover: var(--light-alpha15);
  --event-background-theme-secondary: var(--blackgold-cd-bg100);
  --event-background-theme-tertiary: var(--poco-yellow40);
  --event-background-theme-cd: var(--poco-yellow70);
  --event-background-theme-dp: var(--poco-background70);
  --event-background-theme-mipoint: var(--poco-yellow15);
  --event-background-new: var(--poco-yellow100);
  --event-background-cd-time: var(--poco-yellow100);
  --event-background-dp-time: var(--poco-yellow100);
  --event-background-tag: var(--base-tag100);
  --event-background-lightning: var(--blackgold-lightning100);
  --event-background-nav-hover: var(--neutral-neutral5);
  --event-text-primary: var(--white-white100);
  --event-text-secondary: var(--dark-alpha70);
  --event-text-dp-tab: var(--dark-alpha70);
  --event-text-cd-dp: var(--dark-alpha70);
  --event-text-tertiary: var(--neutral-neutral100);
  --event-text-subtle: var(--neutral-neutral50);
  --event-text-subtlest: var(--neutral-neutral70);
  --event-text-reverse: var(--poco-background90);
  --event-text-cd-h: var(--white-white100);
  --event-text-cd-tab: var(--dark-alpha85);
  --event-text-dp-h: var(--white-white100);
  --event-text-theme: var(--poco-yellow100);
  --event-text-theme-pop: var(--poco-background90);
  --event-text-theme-primary: var(--poco-yellow100);
  --event-text-on-tag: var(--base-on-tag100);
  --event-text-on-cd-time: var(--poco-background90);
  --event-text-on-new: var(--poco-background90);
  --event-text-on-tab: var(--poco-yellow100);
  --event-text-on-nav: var(--poco-background90);
  --event-text-claim-ask: var(--poco-yellow100);
  --event-text-number: var(--poco-yellow100);
  --event-button-default: var(--poco-background90);
  --event-button-hover: var(--neutral-neutral80);
  --event-button-disabled: var(--neutral-neutral50);
  --event-button-theme: var(--poco-yellow100);
  --event-button-theme-hover: var(--neutral-neutral80);
  --event-button-theme-disabled: var(--neutral-neutral50);
  --event-button-coupon: var(--poco-background90);
  --event-button-coupon-hover: var(--neutral-neutral80);
  --event-button-coupon-disabled: var(--neutral-neutral50);
  --event-button-dp-cd: var(--poco-yellow100);
  --event-button-dp-cd-hover: var(--poco-yellow100);
  --event-button-dp-cd-disable: var(--poco-yellow100);
  --event-button-claim: var(--poco-yellow15);
  --event-button-claim-bg: var(--poco-yellow100);
  --event-button-claim-mask: var(--dark-alpha10);
  --event-button-normal-bg: var(--event-light-dark-button-claim);
  --event-line-line: var(--poco-line100);
  --event-line-claim-normal: var(--poco-claim-normal);
  --event-line-claim-special: var(--poco-claim-special);
  --event-line-star: var(--poco-yellow100);
  --event-border-tag: var(--poco-yellow70);
}

/* ==========================================================================
   Page layout
   ========================================================================== */

:where(.sale-page) .site-grid{
  grid-gap: var(--grid-gutter-width);
  grid-template-columns: repeat(var(--grid-columns),minmax(0,1fr));
  -webkit-hyphens: manual;
  hyphens: manual;
  display: grid;
  position: relative;
}

:where(.sale-page) .site-grid:empty{
  display: none;
}

:where(.sale-page) .site-grid.site-grid--none-sticky-bottom{
  z-index: 20;
  position: sticky;
}

:where(.sale-page) .site-grid.site-grid--none-sticky-bottom{
  bottom: 0;
}

:where(.sale-page) .site-grid.site-grid--full>*{
  grid-column: span 12;
}

.sale-page.site-main{
  width: 100%;
  max-width: 2560px;
  margin: 0 auto;
}

.sale-page.site-main.editable-event{
  background-position: top;
  background-repeat: no-repeat;
}

@media screen and (max-width: 720px) {
  .sale-page.site-main{
    --poco-bg-color: #292b30;
    --poco-nav-height: 112px;
  }

  .sale-page.site-main.editable-event{
    background-size: auto 1120px;
  }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
  .sale-page.site-main{
    --poco-bg-color: #34353b;
    --poco-nav-height: 54px;
  }

  .sale-page.site-main.editable-event{
    background-size: auto 1200px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .sale-page.site-main{
    --poco-bg-color: #34353b;
    --poco-nav-height: 60px;
  }

  .sale-page.site-main.editable-event{
    background-size: auto 1600px;
  }
}

@media screen and (min-width: 1441px) and (max-width: 1920px) {
  .sale-page.site-main{
    --poco-bg-color: #34353b;
    --poco-nav-height: 60px;
  }

  .sale-page.site-main.editable-event{
    background-size: auto 2000px;
  }
}

@media screen and (min-width: 1921px) {
  .sale-page.site-main{
    --poco-bg-color: #34353b;
    --poco-nav-height: 60px;
  }

  .sale-page.site-main.editable-event{
    background-size: auto 2000px;
  }
}

/* --- Event settings (CMS) ------------------------------------------------- */

/* Page background behind every section. */
.sale-page.site-main.editable-event{
  background-color: #ff9c3f;
}

/* Section background colours. */
:where(.sale-page) .section-bg--event{
  background-color: #ff9c3f;
}

:where(.sale-page) .section-bg--poco{
  background-color: #844d55;
}

/* Invisible scroll target after each section, offset by the header height. */
:where(.sale-page) .section-anchor{
  position: absolute;
  top: calc(-1 * var(--header-height));
  z-index: -10;
  display: block;
  height: 0;
  visibility: hidden;
}

/* This page is responsive: undo the legacy site's fixed 1226px body width (Xiaomi's value). */
body.sale-event-template-page{
  min-width: 280px;
}

/* Xiaomi's tablet product grid overhangs the viewport by a sub-pixel (rounding, also in the original).
   `clip` (not `hidden`) contains it without creating a scroll container, so sticky/fixed parts still work. */
.sale-page{
  overflow-x: clip;
}