/* Larger crystal rose stars surround the open palm. */
.bloom-products--star {
  display: block;
  position: absolute;
  left: 40%;
  right: 1%;
  top: 17px;
  bottom: 99px;
  width: auto;
  margin: 0;
}
.bloom-products--star > .bloom-product {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: min(46%,340px,37svh);
  height: auto;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  align-items: center;
  transform: translate(-50%,calc(-50% + (1 - var(--card,0))*28px));
  color: #fff4f8;
  text-align: center;
  text-shadow: 0 1px 8px #301326cc;
  border-radius: 12px;
  pointer-events: none;
}
.bloom-products--star > .bloom-product::before { display: none; }
/* Hit regions follow the stars, so overlapping transparent corners never steal clicks. */
.bloom-products--star > .bloom-product::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  clip-path: polygon(50% 0%,70% 28%,100% 36%,100% 45%,80% 65%,92% 100%,80% 100%,50% 82%,20% 100%,8% 100%,20% 65%,0% 45%,0% 36%,30% 28%);
}
.bloom-products--star > :nth-child(1) { --star-x: 50%; --star-y: 22%; }
/* The middle row sits lower to restore the earlier, more open star arrangement. */
.bloom-products--star > :nth-child(2) { --star-x: 17%; --star-y: 44%; z-index: 2; }
.bloom-products--star > :nth-child(3) { --star-x: 32%; --star-y: 81.5%; z-index: 1; }
.bloom-products--star > :nth-child(4) { --star-x: 68%; --star-y: 81.5%; z-index: 1; }
.bloom-products--star > :nth-child(5) { --star-x: 83%; --star-y: 44%; z-index: 2; }
/* Categories remain accessible without crowding the small thumbnail. */
.bloom-products--star .bloom-product-index {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bloom-products--star .bloom-star-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: 1;
  background: url('assets/crystal-rose-star.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 12px #38162d50);
  transition: filter .2s;
}
.bloom-products--star .bloom-star-thumbnail > img {
  flex: none;
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%);
  width: 70%;
  height: 70%;
  margin: 0;
  object-fit: contain;
}
/* Fit the artwork inside the glass opening, clear of the top facets and lower notch. */
.bloom-products--star [data-product="care"] .bloom-star-thumbnail > img { width: 66%; height: 66%; }
.bloom-products--star .bloom-promo-art > img { width: 52%; height: 52%; top: 54%; margin: 0; }
.bloom-products--star .bloom-promo-art > img:first-child { left: 42%; }
.bloom-products--star .bloom-promo-art > img:last-child { left: 58%; }
.bloom-products--star .bloom-product-caption {
  position: absolute;
  top: calc(100% - 3px);
  left: 50%;
  width: 64%;
  height: 54px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 9%;
  color: #592b3a;
  text-shadow: 0 1px 1px #fff6;
  pointer-events: auto;
  z-index: 3;
}
.bloom-products--star .bloom-product-caption::before {
  content: '';
  position: absolute;
  inset: -11px 0;
  z-index: -1;
  background: url('assets/crystal-rose-caption.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 5px #30132666);
  pointer-events: none;
}
.bloom-products--star .bloom-product-name {
  position: static;
  width: 100%;
  font-size: clamp(15px,1.3vw,19px);
  line-height: 1.1;
  min-height: 0;
  max-width: 100%;
  letter-spacing: -.3px;
  margin: 0;
  white-space: nowrap;
}
.bloom-products--star .bloom-product-bottom { position: static; width: 100%; justify-content: center; margin: 0; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.bloom-products--star .bloom-product-bottom > span { font-size: inherit; padding: 0; border: 0; }
.bloom-products--star .bloom-product:is(:hover,:focus-visible) .bloom-star-thumbnail { filter: drop-shadow(0 4px 16px #ffe3f2a6); }
/* Keep the replay control clear of the lower-right crystal point. */
.bloom-bottom { pointer-events: none; }
.bloom-bottom > * { pointer-events: auto; }
@media (min-width: 701px) {
  .bloom-bottom { right: 2%; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .bloom-products--star { left: 44%; right: 4%; }
  .bloom-products--star > :nth-child(3) { --star-x: 27%; --star-y: 85%; }
  .bloom-products--star > :nth-child(4) { --star-x: 73%; --star-y: 85%; }
  .bloom-products--star .bloom-product-caption { height: 44px; }
  .bloom-products--star .bloom-product-caption::before { inset: -9px 0; }
  .bloom-products--star .bloom-product-name { font-size: clamp(11px,1.3vw,14px); }
  .bloom-products--star .bloom-product-bottom { font-size: 10px; }
}
@media (max-width: 700px) {
  .bloom-products--star {
    position: relative;
    flex: none;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: 350px;
    margin: 10px 0 0;
  }
  .bloom-products--star > .bloom-product { width: min(46%,154px); }
  .bloom-products--star > :nth-child(3) { --star-x: 29%; }
  .bloom-products--star > :nth-child(4) { --star-x: 71%; }
  .bloom-products--star > :nth-child(1) { --star-y: 23%; }
  .bloom-products--star > :nth-child(2),.bloom-products--star > :nth-child(5) { --star-y: 39%; }
  .bloom-products--star > :nth-child(3),.bloom-products--star > :nth-child(4) { --star-y: 89%; }
  .bloom-products--star .bloom-product-caption { width: 82%; height: 44px; gap: 1px; padding: 4px 7%; }
  .bloom-products--star .bloom-product-caption::before { inset: -8px 0; }
  .bloom-products--star .bloom-product-name { font-size: 12px; min-height: 0; letter-spacing: -.25px; }
  .bloom-products--star .bloom-product-bottom { font-size: 9px; }
}
@media (max-width: 700px) and (max-height: 760px) {
  .bloom-reveal { padding-top: 22px; }
  .bloom-reveal-heading h2 { font-size: clamp(36px,10vw,44px); margin: 12px 0; }
  .bloom-products--star { height: 330px; margin-top: 8px; }
}
@media (max-width: 360px) {
  .bloom-products--star .bloom-product-name { font-size: 11px; letter-spacing: -.2px; }
  .bloom-products--star .bloom-product-bottom { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .bloom-products--star .bloom-star-thumbnail { transition: none; } }
/* The no-script fallback has no sticky timing, so keep every promotion reachable. */
body:not(.story-ready) .bloom-products--star { left: 6%; right: 6%; top: 0; bottom: auto; height: 530px; }