/* Prism shop front: the best deal sits on a large white card, the
   product floating in a pale well with a soft wash of the accent and its
   price in the figure face; the aisle chips are rounded white tabs, the
   chosen one filled with the accent, and sale notes in the theme's
   green. */
@import url("../../../views/catalog-aisle.css");

.sp-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; }
.sp-meta span { border-radius: 999px; font-weight: 600; }
.sp-meta .sp-meta-sale { color: var(--psm-good); background: var(--psm-good-soft); }
html.dark .sp-meta .sp-meta-sale { color: var(--psm-good); }
.sp-deal { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); box-shadow: var(--shadow-md); }
.sp-deal::after { display: none; }
.sp-deal-img { position: relative; overflow: hidden; border: 0; border-radius: calc(var(--radius) - 8px); background: radial-gradient(70% 60% at 50% 45%, var(--psm-accent-soft), transparent 75%), var(--paper-3); box-shadow: none; }
.sp-deal-img img { filter: drop-shadow(0 16px 18px rgba(16, 18, 28, .18)); }
.sp-deal-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.sp-deal-price strong { font-family: var(--font-num); font-weight: 600; color: var(--ink); overflow-wrap: normal; }
.sp-deal-save { color: var(--psm-good); font-weight: 600; }
.sp-deal-cta { color: var(--psm-accent-text); font-weight: 600; }
.sp-bar { background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); box-shadow: none; }
.sp-bar::after { display: none; }
.sp-chip { border-radius: 999px; font-weight: 600; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: none; transition: transform .12s ease, border-color .2s ease; }
.sp-chip:hover { border-color: var(--psm-accent-line); }
.sp-chip:active { transform: scale(.97); }
.sp-chip.is-on { background: var(--psm-accent); color: var(--psm-on-accent); border-color: transparent; box-shadow: 0 6px 16px -8px var(--psm-accent-glow); }
html.dark .sp-chip.is-on { color: var(--psm-on-accent); }
.sp-sort select { border-radius: 999px; }
.sp-none { font-family: var(--font-ui); }