[data-section-id="9544000000050184"] .bs-sponsor-listing .bs-image {
  background-color: transparent !important;
}

.bs-sponsor-layout .sponsor-tile .bs-image {
  box-shadow: none !important;
}

.ticket-order .meta {
  display: none;
}

.tkt-scrollable-content .details-modal-header {
  background: linear-gradient(90deg, hsl(275, 39%, 60%), #5b67ca, #9a70c3, #6773cf) !important;
}

[media-id="9544000000077075"] img {
  max-width: 300px !important;
}

[data-section-id="9544000000050184"] .sponsor-tile {
  pointer-events: none;
  cursor: default;
}

header {
  display: none !important;
}

.bs-page-container {
  padding: 0px !important;
}

[media-id="9544000000077204"] img {
  padding: 20px;
  max-width: 370px !important;
}

[data-element-id="9544000000078007"] .text-tiny {
  display: none;
}
.bs-icon-textlist .list-items .item:nth-child(1),
.bs-icon-textlist .list-items .item:nth-child(3) {
    display: none !important;
}
/* ============================================================
   TikTok BeautyFest — pink detail card
   The pink background is applied ONLY to the date / time / venue
   (and VIP) rows. The TikTok logo, tagline and ticket graphic are
   never styled or repositioned — they stay exactly where the
   platform places them.
   Scope: data-section-id + data-element-id + date-time-venue-id + classes.
   (No ember IDs are used.)
   ============================================================ */

/* Content column: center the card, full width so it has room to center.
   NO background here, so the logo / tagline / button stay clean. */
[data-section-id="9544000000005290"] .banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* center the card horizontally */
  width: 100%;
  gap: 0;
  /* the 3 detail rows must touch to form one card */
}

/* ---- The pink card = the 3 detail blocks stacked seamlessly ---- */
[data-section-id="9544000000005290"] [data-element-id="9544000000005217"],
/* date + time  */
[data-section-id="9544000000005290"] [data-element-id="9544000000005223"],
/* venue        */
[data-section-id="9544000000005290"] [data-element-id="9544000000050150"] {
  /* VIP session  */
  align-self: center;
  /* centered... */
  width: 100%;
  max-width: 460px;
  /* ...but capped, so all three match width */
  box-sizing: border-box;
  margin: 0;
  padding-left: 34px;
  padding-right: 34px;
  background: #e6197f;
  /* magenta card */
  transform: translateX(-10%);
  /* slight lean to the left */
}

/* top block: rounded top + top padding + space above the card */
[data-section-id="9544000000005290"] [data-element-id="9544000000005217"] {
  margin-top: 20px;
  padding-top: 28px;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

/* middle block spacing */
[data-section-id="9544000000005290"] [data-element-id="9544000000005223"] {
  padding-top: 16px;
}

/* bottom block: rounded bottom + bottom padding */
[data-section-id="9544000000005290"] [data-element-id="9544000000050150"] {
  padding-top: 10px;
  padding-bottom: 28px;
  border-radius: 0 0 26px 26px;
}

/* ---- Detail rows: icon + text on one line ------------------ */
[data-section-id="9544000000005290"] .banner-content .bs-dtl .items {
  margin: 0;
}

[data-section-id="9544000000005290"] .banner-content .bs-dtl .item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

/* icons: white, slightly larger (font untouched) */
[data-section-id="9544000000005290"] .banner-content .dtl-icon .theme-icon {
  color: #fff;
  font-size: 26px;
  line-height: 1;
}

/* text: white for contrast, a touch bigger + bold */
[data-section-id="9544000000005290"] .banner-content .dtl-text {
  color: #fff !important;
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 600;
  text-decoration: none;
}

/* VIP session sub-title */
[data-section-id="9544000000005290"] [data-element-id="9544000000050150"] .section-sub-title {
  margin: 0;
}

[data-section-id="9544000000005290"] [data-element-id="9544000000050150"] .section-sub-title p {
  color: #fff !important;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 500;
  margin: 0;
}

/* ============================================================
   RESPONSIVE — only the card resizes; nothing else is moved
   ============================================================ */
@media (max-width: 820px) {

  [data-section-id="9544000000005290"] [data-element-id="9544000000005217"],
  [data-section-id="9544000000005290"] [data-element-id="9544000000005223"],
  [data-section-id="9544000000005290"] [data-element-id="9544000000050150"] {
    max-width: 380px;
    padding-left: 28px;
    padding-right: 28px;
  }

  [data-section-id="9544000000005290"] .banner-content .dtl-text {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {

  [data-section-id="9544000000005290"] [data-element-id="9544000000005217"],
  [data-section-id="9544000000005290"] [data-element-id="9544000000005223"],
  [data-section-id="9544000000005290"] [data-element-id="9544000000050150"] {
    max-width: 100%;
    padding-left: 22px;
    padding-right: 22px;
    transform: none;
    /* full-width card: keep it centered, no left lean */
  }

  [data-section-id="9544000000005290"] .banner-content .dtl-text {
    font-size: 1.2rem;
  }

  [data-section-id="9544000000005290"] .banner-content .dtl-icon .theme-icon {
    font-size: 22px;
  }
}


/* ============================================================
   "Beauty For You" media-text section
   1) Show the FULL background image (size 100%).
   2) Put the copy inside a centered white rounded card.
   Scope: data-section-id 9544000000050026 + data-element-id + classes.
   (No ember IDs are used.)
   ============================================================ */

/* ---- 1. Full background image ------------------------------ */
[data-section-id="9544000000050026"]>.background-layer {
  background-size: 100% 100% !important;
  /* whole design visible, edge to edge */
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* give the section room so the card floats with artwork around it */
[data-section-id="9544000000050026"] .foreground-layer.bs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- 2. White rounded card -------------------------------- */
[data-section-id="9544000000050026"] .li-content {
  background: #ffffff;
  max-width: 620px;
  margin: 0 auto;
  padding: 46px 56px;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  text-align: center;
}

/* ---- Title copy ------------------------------------------- */
[data-section-id="9544000000050026"] .li-title.section-title {
  margin: 0;
}

[data-section-id="9544000000050026"] .li-title.section-title p {
  margin: 0 0 16px;
}

[data-section-id="9544000000050026"] .li-title.section-title p:last-child {
  margin-bottom: 0;
}

[data-section-id="9544000000050026"] .li-title.section-title span {
  color: #16426d !important;
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 500;
}

/* emphasise the opening line */
[data-section-id="9544000000050026"] .li-title.section-title p:first-child span {
  font-weight: 700;
}

/* ---- Learn More button (if shown) ------------------------- */
[data-section-id="9544000000050026"] .bs-btn-wgt {
  margin-top: 26px;
}

[data-section-id="9544000000050026"] .bs-button {
  background: #16426d !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 12px 30px !important;
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 820px) {
  [data-section-id="9544000000050026"] .foreground-layer.bs-container {
    padding: 48px 20px;
  }

  [data-section-id="9544000000050026"] .li-content {
    max-width: 520px;
    padding: 38px 40px;
  }

  [data-section-id="9544000000050026"] .li-title.section-title span {
    font-size: 1.3rem;
  }
}

@media (max-width: 600px) {
  [data-section-id="9544000000050026"] .foreground-layer.bs-container {
    padding: 32px 16px;
  }

  [data-section-id="9544000000050026"] .li-content {
    max-width: 100%;
    padding: 28px 24px;
    border-radius: 22px;
  }

  [data-section-id="9544000000050026"] .li-title.section-title span {
    font-size: 1.15rem;
    line-height: 1.4;
  }
}




/* test */

/* ============================================================
   Blend each section's background into the next
   -----------------------------------------------------------
   Each section KEEPS its own image. Instead of a hard seam,
   every section (after the first) stretches its background a
   little way up into the previous section and fades in with a
   mask — so the end of one image cross-fades into the start of
   the next.

   >>> Replace single-background.css with THIS file. <<<
   (That file blanked the per-section images; here we keep them.)

   Scope: page-id 9544000000005050 / .community-page-home
   (No ember IDs are used.)
   ============================================================ */

[page-id="9544000000005050"].community-page-home {
  --blend: 150px;
  /* how tall the cross-fade band is */
}

/* section is the positioning context; its own image sits behind content */
[page-id="9544000000005050"].community-page-home .bs-section {
  position: relative;
  background-color: transparent;
  /* let images do the work, no seam colour */
}

/* the background image layer fills the section and stays underneath */
[page-id="9544000000005050"].community-page-home .bs-section>.background-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover !important;
  background-position: center !important;
  z-index: 0;
}

/* keep all foreground content above every background layer */
[page-id="9544000000005050"].community-page-home .bs-section>.foreground-layer {
  position: relative;
  z-index: 1;
}

/* ---- THE BLEND -------------------------------------------- */
/* every section that FOLLOWS another one: pull its background up
   into the previous section and fade it in from transparent -> solid */
[page-id="9544000000005050"].community-page-home .bs-section+.bs-section>.background-layer {
  top: calc(var(--blend) * -1);
  /* extend upward into previous section */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ---- Responsive: smaller blend band on narrow screens ------ */
@media (max-width: 820px) {
  [page-id="9544000000005050"].community-page-home {
    --blend: 90px;
  }
}

@media (max-width: 600px) {
  [page-id="9544000000005050"].community-page-home {
    --blend: 60px;
  }
}

/* ============================================================
   Blend each section's background into the next
   -----------------------------------------------------------
   Each section KEEPS its own image. Instead of a hard seam,
   every section (after the first) stretches its background a
   little way up into the previous section and fades in with a
   mask — so the end of one image cross-fades into the start of
   the next.

   >>> Replace single-background.css with THIS file. <<<
   (That file blanked the per-section images; here we keep them.)

   Scope: page-id 9544000000005050 / .community-page-home
   (No ember IDs are used.)
   ============================================================ */

[page-id="9544000000005050"].community-page-home {
  --blend: 100px;
  /* how tall the cross-fade band is */
}

/* section is the positioning context; its own image sits behind content */
[page-id="9544000000005050"].community-page-home .bs-section {
  position: relative;
  background-color: transparent;
  /* let images do the work, no seam colour */
}

/* the background image layer fills the section and stays underneath */
[page-id="9544000000005050"].community-page-home .bs-section>.background-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover !important;
  background-position: center !important;
  z-index: 0;
}

/* keep all foreground content above every background layer */
[page-id="9544000000005050"].community-page-home .bs-section>.foreground-layer {
  position: relative;
  z-index: 1;
}

/* ---- THE BLEND -------------------------------------------- */
/* every section that FOLLOWS another one: pull its background up
   into the previous section and fade it in from transparent -> solid.

   z-index:1 lets this fade paint ABOVE the previous section's image
   in the overlap band. This is what makes the HERO -> next-section
   blend work: the hero's image is nested inside its foreground
   layer (it's a carousel), so without this it would sit on top and
   hide the fade. */
[page-id="9544000000005050"].community-page-home .bs-section+.bs-section>.background-layer {
  z-index: 1;
  top: calc(var(--blend) * -1);
  /* extend upward into previous section */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blend));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* ---- Responsive: smaller blend band on narrow screens ------ */
@media (max-width: 820px) {
  [page-id="9544000000005050"].community-page-home {
    --blend: 90px;
  }
}

@media (max-width: 600px) {
  [page-id="9544000000005050"].community-page-home {
    --blend: 60px;
  }
}


/* @media only screen and (max-width: 767px) {
  .bs-sponsor-layout-container .bs-sponsor-listing {
    margin: 0px !important;
  }
  [sponsor-id="9544000000042096"],
  [sponsor-id="9544000000073006"],
  [sponsor-id="9544000000073035"],
  [sponsor-id="9544000000078178"],
  [sponsor-id="9544000000073047"],
  [sponsor-id="9544000000073055"],
  [sponsor-id="9544000000073072"],
  [sponsor-id="9544000000073080"],
  [sponsor-id="9544000000073063"],
  [sponsor-id="9544000000073088"],
  [sponsor-id="9544000000078193"]{
    padding-bottom: 0px !important;
  }
} */

@media (max-width: 480px) {
  .bs-sponsor-layout {
    margin: -8px !important;
  }

  .sponsor-tile {
    padding: 8px 8px 0 !important;
  }

  .bs-image {
    height: 100px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}