/* LumaGlow product pages: app download section and stock-state guard. */

/* Hide purchase controls until live availability is known, so the page never
   shows "Buy now" and "Back soon" at the same time. A <noscript> override in the
   page shows the default buttons when scripts are off. */
[data-stock-pending] .luma-scroll-hero-actions,
[data-stock-pending] .luma-scroll-order-actions > button,
[data-stock-pending] .luma-scroll-sticky-buy {
  visibility: hidden;
}

/* Store badges */
.luma-app-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.luma-app-badge {
  display: inline-flex;
  border-radius: 9px;
  line-height: 0;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.luma-app-badge img {
  display: block;
  width: auto;
  height: 48px;
}

.luma-app-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(122, 76, 255, 0.28);
}

.luma-app-badge:focus-visible {
  outline: 2px solid #c8a7ff;
  outline-offset: 3px;
}

.luma-app-note {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(226, 216, 255, 0.72);
}

/* App feature list: icon rows instead of boxed cards */
.luma-app-points-list {
  gap: 0.9rem;
}

body.luma-scroll-refresh-page .luma-scroll-control-section .luma-scroll-control-points.luma-app-points-list article,
body .luma-edge-control-section .luma-edge-control-points.luma-app-points-list article {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

body.luma-scroll-refresh-page .luma-scroll-control-section .luma-app-points-list article div,
body .luma-edge-control-section .luma-app-points-list article div {
  display: grid;
  gap: 0.15rem;
}

.luma-app-point-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: #c8a7ff;
  background: rgba(155, 109, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(200, 167, 255, 0.28);
}

.luma-app-point-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.luma-app-lede-short {
  display: none;
}

@media (max-width: 760px) {
  .luma-app-badge img {
    height: 44px;
  }

  body .luma-scroll-control-copy .luma-app-lede-long,
  body .luma-scroll-control-copy .luma-app-note,
  body .luma-edge-control-copy .luma-app-lede-long,
  body .luma-edge-control-copy .luma-app-note,
  body .luma-edge-control-copy .luma-app-points-list {
    display: none;
  }

  body .luma-scroll-control-copy .luma-app-lede-short,
  body .luma-edge-control-copy .luma-app-lede-short {
    display: block;
  }

  .luma-app-badges {
    justify-content: center;
    margin-top: 6px;
  }
}

/* Beat page-specific point styles (Edge sets display/margins on every span/strong). */
body .luma-app-points-list.luma-app-points-list > article > span.luma-app-point-icon {
  display: grid;
  margin: 0;
}

body .luma-app-points-list.luma-app-points-list > article > div > strong {
  margin: 0;
}

body .luma-app-points-list.luma-app-points-list > article > div > span {
  margin: 0;
}

/* The app hand shot was photographed for the Scroll page; fade its edges so its
   background blends in. !important beats the bundle's "mask-image: none !important". */
body.luma-edge-refresh-page .luma-edge-phone-wrap img[src*="/assets/products/lumaglow/app/app-hand-edge"] {
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 56% 52%, #000 58%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 62% 68% at 56% 52%, #000 58%, transparent 100%) !important;
}