/* The home edit keeps the art in the banner and the Wix product in its own stage. */
.editorial-storefront[data-page="home"] {
  --edit-background: #0b0811;
  --edit-rule: #33253e;
  --edit-lavender: #d7b9ff;
  --edit-mint: #aef6dc;
}

.editorial-storefront[data-page="home"] > main {
  background: radial-gradient(ellipse at 54% 4%, #29123870, transparent 58%);
}

.editorial-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-block: clamp(12px, 1.6vw, 23px) 16px;
}

.prism-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(332px, 37vw, 475px);
  overflow: hidden;
  border: 1px solid #503565;
  border-radius: clamp(16px, 2vw, 27px);
  background: #0d0717;
  box-shadow: 0 23px 65px #05030888, inset 0 1px #f0bdff31;
}

.prism-art,
.prism-image,
.prism-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.prism-art {
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at 77% 42%, #4c168374, #090510 72%);
}

.prism-image {
  inset: 0 0 0 16%;
  background: url("assets/vybe-prism.jpg") right center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 4%, #000 42%);
  transform: scale(1.01);
}

.prism-art::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #0c0716 3%, #0c0716d9 31%, transparent 65%),
    linear-gradient(0deg, #0b0615a6 0%, transparent 40%);
}

.prism-light {
  z-index: 1;
  opacity: 0;
  background: radial-gradient(ellipse 31% 44% at var(--experience-x, 72%) var(--experience-y, 32%), #d7aaff45, transparent 75%);
}

.prism-orbit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(63%, 880px);
  height: 100%;
  color: #e8c7ff;
  opacity: .66;
}

.prism-orbit path {
  stroke: currentColor;
  stroke-opacity: .33;
}

.prism-orbit .prism-orbit-pulse {
  stroke: #aef6dc;
  stroke-opacity: .9;
  stroke-dasharray: 6 94;
  stroke-linecap: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px #aef6dc);
}

.prism-orbit circle {
  fill: #d4ffe9;
  filter: drop-shadow(0 0 6px #aef6dc);
}

.prism-banner .editorial-hero-copy {
  width: min(65%, 790px);
  padding: clamp(26px, 5vw, 78px);
}

.prism-banner .editorial-kicker {
  width: max-content;
  margin-bottom: 17px;
  padding: 7px 11px;
  border: 1px solid #bd91f357;
  border-radius: 99px;
  background: #1c1028cc;
  color: #efdeff;
  letter-spacing: .15em;
}

.prism-banner .editorial-mark {
  box-shadow: 0 0 12px #aef6dc88;
}

.editorial-hero .prism-banner h1 {
  font-size: clamp(48px, 7.5vw, 102px);
  /* Leave room for letter descenders at every size, including the entrance animation. */
  line-height: 1.08;
  letter-spacing: -.087em;
}

.prism-banner h1 > span {
  display: block;
  width: max-content;
  max-width: 100%;
}

.prism-banner h1 em {
  padding-inline-end: .09em;
  color: #ddbbff;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .editorial-hero .prism-banner h1 em {
    background: linear-gradient(108deg, #f3b7ff 5%, #b696ff 38%, #b5f7ed 66%, #f3b7ff 97%) 0 0 / 220% 100%;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.prism-banner .editorial-hero-copy > p:not(.editorial-kicker) {
  max-width: 37ch;
  margin-top: 19px;
  color: #e0d1ec;
}

.prism-banner .editorial-actions {
  gap: 8px 18px;
  margin-top: 20px;
}

.prism-banner .editorial-button {
  min-height: 48px;
  padding-inline: 17px;
  border-radius: 9px;
  background: linear-gradient(115deg, #e3fff3, #a6f3d9 64%, #a5d6ff);
  color: #0e211e;
}

.prism-index,
.collection-index {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #dfc7f8;
  font: 750 10px/1 var(--heading);
  letter-spacing: .15em;
  white-space: nowrap;
}

.prism-index {
  position: absolute;
  right: clamp(14px, 2.6vw, 37px);
  bottom: 20px;
  padding: 8px 9px;
  border: 1px solid #e9c6ff3d;
  border-radius: 5px;
  background: #0c0716be;
}

.prism-index > span,
.collection-index > span {
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, #d391ff, #aef6dc);
  box-shadow: 0 0 7px #c297ff9a;
}

.editorial-hero .daily-spotlight {
  display: grid;
  grid-template-columns: clamp(86px, 14.5vw, 182px) minmax(0, 1fr);
  min-height: 94px;
  border-color: #4e3563;
  border-radius: 13px;
  background: radial-gradient(ellipse at 22% 0, #38204b, transparent 76%), #16101e;
}

.editorial-hero .daily-spotlight[hidden] {
  display: none;
}

.editorial-hero .daily-media {
  min-height: 88px;
  border-right: 1px solid #cda5ff47;
}

.editorial-hero .daily-media img {
  padding: 4px;
}

.editorial-hero .daily-media--lifestyle img {
  padding: 0;
  object-position: center 48%;
}

.editorial-hero .daily-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 16px;
  padding: 11px clamp(11px, 2vw, 25px);
}

.editorial-hero .daily-label,
.editorial-hero .daily-title,
.editorial-hero .daily-benefit,
.editorial-hero .daily-price {
  margin: 0;
}

.editorial-hero .daily-label,
.editorial-hero .daily-benefit {
  grid-column: 1;
}

.editorial-hero .daily-title {
  grid-column: 1;
  font-size: clamp(15px, 2vw, 27px);
  text-wrap: initial;
}

.editorial-hero .daily-price,
.editorial-hero .daily-link {
  grid-row: 2;
  align-self: center;
}

.editorial-hero .daily-price {
  grid-column: 2;
  white-space: nowrap;
}

.editorial-hero .daily-link {
  grid-column: 3;
  min-height: 38px;
  padding-inline: 11px;
  border: 1px solid #b7e8d64c;
  border-radius: 7px;
  white-space: nowrap;
}

.editorial-hero .daily-link:hover {
  background: #aef6dc16;
}

.editorial-storefront[data-page="home"] :is(.editorial-shelf, .editorial-collections) {
  padding-block: 17px 20px;
}

.editorial-collection-grid {
  gap: 8px;
}

.editorial-collection {
  min-height: 115px;
  padding: 10px 13px 12px;
  border-color: color-mix(in srgb, var(--collection-accent) 28%, #2f2138);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--collection-accent) 16%, #20122b), #160f20 72%);
}

.editorial-collection .collection-number {
  align-self: flex-end;
  color: var(--collection-accent, #d7b9ff);
  font: 800 10px/1 var(--heading);
  letter-spacing: .15em;
}

.editorial-collection-top .editorial-collection-icon {
  box-sizing: content-box;
  padding: 6px;
  border: 1px solid #d6b1f64d;
  border-radius: 7px;
  background: #0e071d70;
}

.editorial-collection > span:last-child {
  color: #dfd0ed;
  font-size: 12px;
}

.editorial-shelf-grid .curated-card {
  border-color: #493459;
  background: linear-gradient(150deg, #271836, #17101f 68%);
  transition: translate .27s var(--ease), border-color .27s, box-shadow .3s;
}

.editorial-shelf-grid .curated-card:is(:hover, :focus-within) {
  border-color: var(--collection-accent, #cda5ff);
  box-shadow: 0 10px 24px #05030980, 0 0 20px #b778e622;
  translate: 0 -4px;
}

.editorial-storefront .newsletter-prism {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  padding: clamp(15px, 2.5vw, 29px);
  border: 1px solid #4e3563;
  border-radius: 13px;
  background: linear-gradient(90deg, #21162bee, #170e23e3), url("assets/vybe-prism.jpg") right 54% / cover;
}

@media (prefers-reduced-motion: no-preference) {
  .prism-banner .editorial-kicker,
  .prism-banner h1 > span,
  .prism-banner .editorial-hero-copy > p:not(.editorial-kicker),
  .prism-banner .editorial-actions,
  .prism-index {
    animation: prism-arrive .64s cubic-bezier(.2,.72,.24,1) both;
  }

  .prism-banner h1 > span:first-child { animation-delay: .06s; }
  .prism-banner h1 > span:last-child { animation-delay: .13s; }
  .prism-banner .editorial-hero-copy > p:not(.editorial-kicker) { animation-delay: .21s; }
  .prism-banner .editorial-actions,
  .prism-index { animation-delay: .27s; }

  .prism-banner .prism-image {
    animation: prism-image-in 1.3s cubic-bezier(.17,.63,.2,1) both;
  }

  .prism-banner h1 em {
    animation: prism-type 4.2s .15s cubic-bezier(.24,.58,.35,1) both;
  }

  .prism-orbit-pulse {
    animation: prism-path 2.3s .4s cubic-bezier(.22,.7,.24,1) both;
  }

  .prism-light {
    transition: opacity .45s ease;
  }

  .prism-banner.experience-pointed .prism-light {
    opacity: .8;
  }

  .prism-banner .editorial-button:active,
  .daily-link:active,
  .editorial-collection:active {
    scale: .97;
  }
}

@keyframes prism-arrive {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0; }
}

@keyframes prism-image-in {
  from { opacity: .34; transform: scale(1.13) translateX(3%); }
  to { opacity: 1; transform: scale(1.01); }
}

@keyframes prism-type {
  from { background-position: 94% 0; }
  to { background-position: 5% 0; }
}

@keyframes prism-path {
  from { stroke-dashoffset: 100; opacity: 0; }
  20% { opacity: 1; }
  to { stroke-dashoffset: 3; opacity: .68; }
}

@media (max-width: 820px) {
  .editorial-collection {
    min-height: 99px;
  }
}

@media (max-width: 620px) {
  .prism-banner {
    min-height: 0;
  }

  .prism-banner .editorial-hero-copy {
    width: 100%;
    padding: 28px 17px 56px;
  }

  .editorial-hero .prism-banner h1 {
    font-size: clamp(35px, 11.5vw, 70px);
  }

  .prism-image {
    inset: 0;
    background-position: 57% 50%;
    mask-image: none;
    opacity: .7;
  }

  .prism-art::after {
    background: linear-gradient(90deg, #0c0716ed, #0c071655 83%),
      linear-gradient(0deg, #0b0615ee 2%, transparent 80%);
  }

  .prism-orbit {
    width: 100%;
    opacity: .45;
  }

  .prism-index {
    right: 14px;
    bottom: 13px;
  }

  .prism-banner .editorial-hero-copy > p:not(.editorial-kicker) {
    margin-top: 13px;
  }

  .prism-banner .editorial-actions {
    margin-top: 12px;
  }

  .editorial-hero .daily-copy {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 7px;
  }

  .editorial-hero .daily-label,
  .editorial-hero .daily-title {
    grid-column: 1 / -1;
  }

  .editorial-hero .daily-benefit {
    grid-column: 1 / -1;
    font-size: 12px;
  }

  .editorial-hero .daily-price,
  .editorial-hero .daily-link {
    grid-row: 4;
  }

  .editorial-hero .daily-price {
    grid-column: 1;
    white-space: normal;
  }

  .editorial-hero .daily-link {
    grid-column: 2;
    gap: 5px;
    padding-inline: 7px;
    font-size: 12px;
  }

  .editorial-collection {
    padding-inline: 9px;
  }

  .editorial-collection-top {
    flex-wrap: wrap;
  }

  .editorial-collection-top strong {
    width: 100%;
    order: 1;
  }

  .editorial-collection .collection-number {
    position: absolute;
    right: 10px;
    bottom: 8px;
    opacity: .65;
  }

  .editorial-collection > span:last-child {
    padding-bottom: 9px;
  }

  .editorial-storefront .newsletter-prism {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-shelf-grid .curated-card {
    transition: none;
  }

  .editorial-shelf-grid .curated-card:is(:hover, :focus-within) {
    translate: none;
  }
}