/* Crystal light treatment for primary actions. */
body :is(.button-primary, #bloom-reveal .fan-collection) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  border-color: #dba5bc;
  color: #fff6fa;
  background: var(--sparkle-button-fill, linear-gradient(180deg, #985f6c 0%, #78434f 50%, #aa727f 100%));
  box-shadow: inset 0 0 0 1px #e9b9cf8c, inset 0 2px 4px #fff2f326,
    inset 0 -2px 5px #f2b9d091, 0 3px 12px #37132635;
  text-shadow: 0 1px 3px #230b1bb3;
  transition: box-shadow .25s ease, border-color .25s ease;
}

body :is(.button-primary, #bloom-reveal .fan-collection)::before,
body :is(.button-primary, #bloom-reveal .fan-collection)::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: none;
  mask: none;
  transition: opacity .3s ease;
}

body :is(.button-primary, #bloom-reveal .fan-collection)::before {
  opacity: .65;
  background: radial-gradient(ellipse at var(--shine-x, 50%) 115%, #facde0b3 0%, #bc6c9470 28%, transparent 65%),
    linear-gradient(180deg, #fff3fa17, transparent 40%);
}

body :is(.button-primary, #bloom-reveal .fan-collection)::after {
  opacity: .72;
  /* Fine white pinpoints and four-point crystal glints, clipped inside the pill. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='72' viewBox='0 0 180 72'%3E%3Cg fill='white'%3E%3Ccircle cx='10' cy='9' r='.7' opacity='.7'/%3E%3Ccircle cx='35' cy='24' r='.8'/%3E%3Ccircle cx='52' cy='7' r='.6' opacity='.6'/%3E%3Ccircle cx='76' cy='43' r='.9'/%3E%3Ccircle cx='90' cy='16' r='.6'/%3E%3Ccircle cx='118' cy='31' r='.8' opacity='.65'/%3E%3Ccircle cx='146' cy='8' r='.7'/%3E%3Ccircle cx='169' cy='25' r='.9'/%3E%3Ccircle cx='22' cy='60' r='.8'/%3E%3Ccircle cx='47' cy='48' r='.6' opacity='.55'/%3E%3Ccircle cx='106' cy='63' r='.8'/%3E%3Ccircle cx='135' cy='55' r='.6' opacity='.7'/%3E%3Ccircle cx='163' cy='65' r='.65'/%3E%3Cpath d='M62 20l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M143 35l.8 3.2 3.2.8-3.2.8-.8 3.2-.8-3.2-3.2-.8 3.2-.8z'/%3E%3Cpath d='M9 37l.7 2.3 2.3.7-2.3.7-.7 2.3-.7-2.3-2.3-.7 2.3-.7z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 72px;
  background-repeat: repeat;
  animation: hush-inner-sparkles 7s linear infinite;
}

body :is(.button-primary, #bloom-reveal .fan-collection):is(:hover, .is-shining, :focus-visible, :active):not(:disabled) {
  background: var(--sparkle-button-fill, linear-gradient(180deg, #985f6c 0%, #78434f 50%, #aa727f 100%));
  border-color: #ffe5f0;
  box-shadow: inset 0 0 0 1px #ffdeefc7, inset 0 2px 5px #fff4fb30,
    inset 0 -2px 7px #ffe0f0e6, 0 3px 14px #e5a0c066, 0 6px 24px #c7799c40;
}
body :is(.button-primary, #bloom-reveal .fan-collection):is(:hover, .is-shining, :focus-visible, :active):not(:disabled)::before { opacity: 1; }
body :is(.button-primary, #bloom-reveal .fan-collection):is(:hover, .is-shining, :focus-visible, :active):not(:disabled)::after { opacity: .9; }
body :is(.button-primary, #bloom-reveal .fan-collection):disabled::after { animation: none; opacity: .16; }

body .button-plum {
  --sparkle-button-fill: linear-gradient(180deg, #593047 0%, #391b2d 50%, #63344b 100%);
}

/* Pink glass shopping actions: keep the readable centre rosy rather than plum. */
body :is(.button-primary[data-add], .button-primary#checkout-button) {
  --sparkle-button-fill: linear-gradient(180deg, #d78cae 0%, #ac4c78 42%, #ac4c78 60%, #e7a3c3 100%);
  border-color: #f0b6d0;
}

#product-dialog .product-detail-copy .button-primary[data-add] {
  font-weight: 600;
}
/* Share the pink glass edge and moving sheen across both shopping actions. */
body :is(.button-primary[data-add], .button-primary#checkout-button) {
  box-shadow: inset 0 0 0 1px #f8d8e6cc, inset 0 2px 2px #fff4f880,
    inset 0 -3px 7px #f3b6cfb3, inset 0 0 12px #efd1df33,
    0 0 0 1px #cf739c59, 0 5px 12px #99456533, 0 9px 22px #e9a0c04d;
}
body :is(.button-primary[data-add], .button-primary#checkout-button)::before {
  opacity: 1;
  background-image: linear-gradient(112deg, transparent 40%, #facde008 45%, #facde028 50%, #facde008 55%, transparent 60%),
    radial-gradient(ellipse at var(--shine-x, 50%) 115%, #ffd0e7b3 0%, #e786b170 28%, transparent 65%),
    linear-gradient(180deg, #fff3fa17 0%, transparent 40%);
  background-size: 240% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: hush-product-glass 6s ease-in-out infinite;
}
body :is(.button-primary[data-add], .button-primary#checkout-button)::after { opacity: .94; }
body :is(.button-primary[data-add], .button-primary#checkout-button):disabled::before { animation: none; }
body :is(.button-primary[data-add], .button-primary#checkout-button):disabled::after { opacity: .16; }
body :is(.button-primary[data-add], .button-primary#checkout-button):is(:hover, .is-shining, :focus-visible, :active):not(:disabled) {
  box-shadow: inset 0 0 0 1px #ffdeef, inset 0 2px 3px #fff4f899,
    inset 0 -3px 8px #ffe0f0d9, inset 0 0 12px #efd1df40,
    0 0 0 1px #cf739c70, 0 5px 14px #99456540, 0 9px 26px #e9a0c080;
}
@keyframes hush-product-glass {
  0% { background-position: 160% 0, 0 0, 0 0; }
  45%, 100% { background-position: -160% 0, 0 0, 0 0; }
}

@keyframes hush-inner-sparkles {
  from { background-position: 0 0; }
  to { background-position: 0 -72px; }
}
@media (prefers-reduced-motion: reduce) {
  body :is(.button-primary, #bloom-reveal .fan-collection)::after { animation: none; }
  body :is(.button-primary[data-add], .button-primary#checkout-button)::before {
    animation: none;
    background-position: 160% 0, 0 0, 0 0;
  }
}
