/* Prism box catalogue: the carousel arrows are round white buttons that
   fill with the accent, and the shine is a soft sheen passing over white. */
@import url("../../../views/catalog.css");

.swiper-button-next, .swiper-button-prev {
  width: 42px !important; height: 42px !important; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--rule);
  box-shadow: var(--shadow); color: var(--ink) !important;
  transition: transform .12s ease, background-color .2s ease, color .2s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--psm-accent); color: var(--psm-on-accent) !important; border-color: transparent; }
.swiper-button-next:active, .swiper-button-prev:active { transform: scale(.94); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 13px !important; font-weight: 700; color: inherit !important; }
.animate-shine { background-image: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); }

/* The catalogue's banners in the plugin's own markup: a white card, the
   box in a pale well with a soft wash of the accent. */
html body .bpc-mystery-card:not(.psm-bnr) {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: auto; min-height: 172px;
}
@media (min-width: 640px) { html body .bpc-mystery-card:not(.psm-bnr) { min-height: 200px; } }
@media (min-width: 1024px) { html body .bpc-mystery-card:not(.psm-bnr) { min-height: 224px; } }
html body .bpc-mystery-strip { display: none; }
html body .bpc-mystery-card:not(.psm-bnr) .bpc-mystery-body .ed-eyebrow { color: var(--psm-accent-text) !important; }
html body .bpc-mystery-headline {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
  display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: normal; text-wrap: balance;
}
html body .bpc-mystery-card:not(.psm-bnr) .bpc-mystery-image-col {
  border-left: 0;
  margin: 8px; border-radius: calc(var(--radius) - 8px);
  background: radial-gradient(70% 60% at 50% 45%, var(--psm-accent-soft), transparent 75%), var(--paper-3);
}
html body .bpc-mystery-card:not(.psm-bnr) .bpc-mystery-wash { opacity: 0 !important; }
html body .bpc-mystery-hero { width: 56%; height: 62%; filter: drop-shadow(0 14px 14px rgba(16, 18, 28, .2)); }
html body .bpc-mystery-card:hover .bpc-mystery-hero { transform: translateY(-3px); }

/* Nothing on sale: the button is the store's own, like every other */
.border-dashed a.from-purple-500 {
  background: var(--btn-face), var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}