/* Shop (web/includes/vue/shop.js): the storefront grid, the receipt panel on the right (tabs across its
   top for staff), and on phones the receipt opening from a bar at the bottom */
/* The Store doesn't scroll as a page: no rubber-band bounce (this file loads on the Store only), and the
   grid, receipt and sheet keep their own scrolling from pulling the page along */
html, body { overscroll-behavior: none; }
.sp-main, .sp-lines, .sp-pick-list, .sp-panel, .sp-view { overscroll-behavior: contain; }
/* Staff see the Shop while it's off for everyone else */
.sp-off-note { padding: 8px 16px; background: #fff7e0; border-bottom: 1px solid #f0dfa8; color: #7a5b00; font-size: 13px; text-align: center; }
.sp-off-note a { font-weight: 700; color: #4a3a78; }
.page.sp-page { max-width: none; padding: 0; margin-top: 0; text-align: left; }
.sp { display: flex; align-items: flex-start; min-height: calc(100vh - 98px); background: #f3f3f6; }
.sp-main { flex: 1; min-width: 0; padding: 14px 16px 100px; }
.sp a { cursor: pointer; text-decoration: none; }
.sp button { margin: 0; }

/* Categories + search */
.sp-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sp-cats { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sp-cats a { padding: 6px 14px; border-radius: 999px; background: #fff; color: #555; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sp-cats a.sp-on { background: var(--sp-brand, #4a3a78); color: #fff; }
.sp-more { padding: 6px 14px; border-radius: 999px; border: 1px dashed #b9b2d3; color: #4a3a78; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sp-more.sp-on { border-style: solid; background: #ede9fe; }
.sp-more-short { display: none; }
.sp-search-btn { display: none; }
.sp-search { width: 220px; max-width: 100%; margin: 0; height: 34px; border-radius: 999px; padding: 0 14px; }
.sp-empty { padding: 60px 16px; text-align: center; color: #888; }

/* Item tiles */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.sp-tile { background: #fff; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
.sp-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.sp-tile-pic { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.sp-tile-initial { color: rgba(255,255,255,.85); font-size: 44px; font-weight: 800; }
.sp-tile-staff { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.sp-tile-count { position: absolute; bottom: 8px; right: 8px; padding: 1px 7px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; }
.sp-tile-info { padding: 10px 12px 12px; }
.sp-tile-title { font-size: 14px; font-weight: 700; color: #222; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.sp-tile-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.sp-tile-price { font-size: 15px; font-weight: 800; color: #1e7a44; }
.sp-tile-add:hover { background: #178049; }
.sp-tile-add { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1e9a5a; color: #fff !important; font-size: 20px; font-weight: 400; line-height: 1; }

/* The receipt panel */
.sp-panel { position: sticky; top: 0; width: 340px; flex: none; height: calc(100vh - 98px); display: flex; flex-direction: column; background: #fff; border-left: 1px solid #e3e3e8; box-sizing: border-box; }
.sp-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 8px 8px 0; background: #ecebf2; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex: none; }
.sp-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 7px 8px 7px 12px; border-radius: 8px 8px 0 0; background: #dcdae6; color: #555; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-tab.sp-on { background: #fff; color: #222; }
.sp-tab-name { overflow: hidden; text-overflow: ellipsis; }
.sp-tab-count { padding: 0 6px; border-radius: 8px; background: #4a3a78; color: #fff; font-size: 10px; line-height: 16px; }
.sp-tab-x { color: #999; font-size: 15px; line-height: 1; padding: 0 2px; }
.sp-tab-x:hover { color: #c0392b; }
.sp-tab-new { padding: 7px 12px; font-size: 16px; line-height: 1; background: transparent; color: #4a3a78; }
.sp-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; font-size: 13px; font-weight: 800; color: #333; letter-spacing: .03em; flex: none; }
.sp-panel-close { display: none; font-size: 26px; color: #888; line-height: 1; }

.sp-buyer { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid #eee; flex: none; }
.sp-buyer-pic { width: 34px; height: 34px; border-radius: 50%; background: #e6e3ef center / cover no-repeat; flex: none; }
.sp-buyer-name { flex: 1; min-width: 0; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-buyer-change { font-size: 12px; font-weight: 700; color: #4a3a78; }
.sp-pick { flex: 1; min-width: 0; }
.sp-pick input { margin: 0 0 6px; height: 34px; }
.sp-pick-list { max-height: 220px; overflow-y: auto; }
.sp-pick-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; color: #333; font-size: 13px; }
.sp-pick-row:hover { background: #f4f2fa; }
.sp-pick-pic { width: 24px; height: 24px; border-radius: 50%; background: #e6e3ef center / cover no-repeat; flex: none; }
.sp-muted { color: #999; }
.sp-pick-who { min-width: 0; }
.sp-pick-who small { display: block; font-size: 11px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px; }
.sp-lines-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #999; font-size: 13px; padding: 20px; text-align: center; }
.sp-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f0f0; }
.sp-line-pic { width: 44px; height: 44px; border-radius: 8px; background-size: cover; background-position: center; flex: none; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-weight: 800; }
.sp-line-info { flex: 1; min-width: 0; }
.sp-line-title { font-size: 13px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-line-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; background: #f2f1f6; border-radius: 999px; }
.sp-line-qty a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; color: #4a3a78; font-size: 16px; font-weight: 700; }
.sp-line-qty span { min-width: 18px; text-align: center; font-size: 13px; font-weight: 700; }
.sp-line-price { font-weight: 800; color: #222; font-size: 14px; }

.sp-total { display: flex; justify-content: space-between; padding: 12px 16px 2px; font-size: 16px; font-weight: 800; color: #222; border-top: 1px solid #eee; flex: none; }
.sp-note { padding: 0 16px 10px; font-size: 11px; color: #999; flex: none; }
.sp-checkout { margin: 0 16px 16px !important; width: calc(100% - 32px) !important; flex: none; }
.sp-open-panel { display: none; }

/* An item */
.sp-view { width: calc(100% - 30px); max-width: 560px; padding: 0 !important; overflow: visible; text-align: left; } /* visible: the title icons' hints show above the box */
.sp-view .title { padding: 14px 18px; }
/* The item popup's title bar: the camera (more photos) and pencil (edit price) beside the close */
.sp-view .title { display: flex; align-items: center; gap: 4px; }
.sp-view .title > span { order: -1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-view .title .close { order: 3; float: none; margin-left: 4px; }
.sp-view-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; flex: none; }
.sp-view-icon:hover { background: #f1eff7; }
.sp-view-icon img { width: 15px; height: 15px; object-fit: contain; opacity: .7; }
.sp-view-icon input { display: none; }
/* Receipt: staff tap an amount to change it */
.sp-line-price-edit { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin-right: -6px; text-align: right; }
.sp-line-price-edit:hover { background: #f1eff7; }
.sp-line-price small { display: block; font-size: 11px; font-weight: 600; color: #aaa; text-decoration: line-through; }
.sp-line-price-changed { color: #1e7a44; }
.sp-line-input { width: 84px; height: 32px; margin: 0; padding: 0 8px; text-align: right; font-size: 14px; font-weight: 800; box-sizing: border-box; }
/* Managers: add photos to a product that has none (a big drop area) */
.sp-view-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 4 / 3; margin: 0 14px; border: 2px dashed #c9c5d6; border-radius: 12px; background: #f7f6fa; color: #4a3a78; text-align: center; cursor: pointer; padding: 16px; box-sizing: border-box; transition: background .15s, border-color .15s; }
.sp-view-upload:hover { background: #efecf7; border-color: #4a3a78; }
.sp-view-upload svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sp-view-upload svg { width: 44px; height: 44px; }
.sp-view-upload strong { font-size: 16px; }
.sp-view-upload span { max-width: 300px; font-size: 13px; color: #777; line-height: 1.4; }
.sp-view-upload input { display: none; }
.sp-view-upload small { font-size: 12px; color: #999; }
.sp-view-upload.sp-drag { background: #efecf7; border-color: #4a3a78; border-style: solid; }
.sp-view-pics { position: relative; }
.sp-busy { opacity: .6; pointer-events: none; }
.sp-view-pic { aspect-ratio: 4 / 3; background: #222 center / contain no-repeat; cursor: pointer; }
.sp-view-thumbs { display: flex; gap: 6px; padding: 8px 12px 4px; overflow-x: auto; }
.sp-view-thumbs a { width: 54px; height: 54px; border-radius: 6px; background: #eee center / cover no-repeat; flex: none; opacity: .65; }
.sp-view-thumbs a.sp-on { opacity: 1; box-shadow: 0 0 0 2px #4a3a78; }
.sp-view-body { padding: 14px 18px 18px; }
.sp-view-price { font-size: 20px; font-weight: 800; color: #1e7a44; }
.sp-view-desc { margin-top: 8px; color: #555; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.sp-view-add { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.sp-view-add .sp-line-qty { margin: 0; }
.sp-view-add .sp-line-qty a { width: 34px; height: 34px; font-size: 18px; }

/* Desktop: a screen of its own under the bars. The page never scrolls; the item grid scrolls by itself
   and the receipt stays put beside it (a sticky panel rode up with the page on short windows) */
@media (min-width: 821px) {
	.sp { height: calc(100vh - 98px); height: calc(100dvh - 98px); min-height: 0; overflow: hidden; align-items: stretch; }
	.sp-main { height: 100%; overflow-y: auto; box-sizing: border-box; padding-bottom: 24px; }
	.sp-panel { position: static; height: 100%; }
}

/* Phones: the receipt is a sheet over the page, opened from a bar at the bottom */
@media (max-width: 820px) {
	.sp-main { padding: 12px 12px 90px; }
	.sp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
	/* Search sits behind an icon at the end of the chip row; the bar opens under it */
	.sp-bar { flex-wrap: wrap; row-gap: 8px; }
	.sp-search-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
	.sp-search-btn svg { width: 17px; height: 17px; fill: none; stroke: #4a3a78; stroke-width: 2.4; stroke-linecap: round; }
	.sp-search-btn.sp-on { background: #4a3a78; }
	.sp-search-btn.sp-on svg { stroke: #fff; }
	.sp-search { display: none; width: 100%; }
	.sp-searching .sp-search { display: block; order: 10; }
	.sp-more-long { display: none; }
	.sp-more-short { display: inline; }
	.sp-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: auto; max-height: 62vh; max-height: 62dvh; min-height: 38vh; min-height: 38dvh; z-index: 60; border-left: none; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.2); transform: translateY(105%); transition: transform .25s ease; }
	.sp-panel-open .sp-panel { transform: none; }
	.sp-panel-close { display: inline; }
	/* The sheet is as tall as its receipt (up to most of the screen); long receipts scroll */
	.sp-lines { flex: 0 1 auto; }
	.sp-lines-empty { flex: 0 0 auto; padding: 30px 20px; }
	.sp-checkout { width: calc(100% - 96px) !important; } /* the chat bubble sits at the bottom right */
	.sp-open-panel { display: flex; position: fixed; left: 12px; right: 80px; bottom: 16px; z-index: 50; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 12px; background: #4a3a78; color: #fff !important; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
}
/* Tap a count to type it: the box matches the number (same size and weight, as wide as the digits) */
/* The number and its box take the same space (min 18px, or as wide as the digits), so nothing moves */
.sp-line-qty .sp-qty-n { display: inline-block; cursor: text; border-radius: 4px; }
.sp-line-qty .sp-qty-n:hover { background: #fff; }
.sp-line-qty .sp-qty-n, .sp-line-qty input.sp-qty-input { box-sizing: border-box; min-width: 18px; height: 20px; padding: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 20px; text-align: center; }
.sp-line-qty input.sp-qty-input { margin: 0; border: none; border-radius: 4px; background: #fff; color: #222; font-family: inherit; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
.sp-view-add .sp-line-qty .sp-qty-n, .sp-view-add .sp-line-qty input.sp-qty-input { font-size: 16px; height: 24px; line-height: 24px; }
/* The cart's coupon code / discount (the shopping cart's CartCoupon), under the subtotal */
.sp-coupon { padding: 8px 16px 2px; flex: none; }
.sp-coupon .cart-coupon { margin: 0; }
.sp-coupon .cart-coupon-input { display: flex; align-items: center; }
.sp-coupon .cart-coupon-input input { flex: 1; min-width: 0; }
.sp-discount-row { color: #1e7a44; border-top: none; padding-top: 6px; font-size: 14px; }
.sp-coupon .cart-coupon-input { justify-content: flex-end; gap: 4px; }
.sp-coupon .cart-coupon-input button, .sp-coupon .cart-coupon-input button.cart-discount-btn { margin: 0; }
.sp-coupon .cart-coupon-item { display: flex; align-items: center; gap: 8px; margin: 0; }
/* Picking who's buying: the search field and its results are one box, the results dropping down under the
   field (Guest first, as an option like the members) */
.sp-pick-box { border: 1px solid #cfcbe0; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(30,20,60,.14); overflow: hidden; }
.sp-pick-field { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border-bottom: 1px solid #eee; color: #888; }
.sp-pick .sp-pick-field input { flex: 1; min-width: 0; height: 38px; margin: 0 !important; padding: 0; border: none !important; box-shadow: none !important; background: transparent; outline: none; font-size: 14px; }
.sp-pick-close { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #999; font-size: 20px; cursor: pointer; }
.sp-pick-close:hover { background: #f2f1f6; color: #555; }
.sp-pick-box .sp-pick-list { padding: 4px; }
.sp-pick-box .sp-pick-row { padding: 7px 8px; cursor: pointer; }
.sp-pick-guest .sp-pick-pic, .sp-buyer-pic.sp-guest-pic { background: #e6e3ef url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23b8b2cc"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z"/></svg>') center / 70% no-repeat; }
.sp-pick .sp-pick-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
/* The ticket spreads out: its name on the left, the amount in between, the × on the right, and what it takes off
   on a line of its own under them, on the right (as the shopping cart's ticket shows it) */
.sp-coupon .cart-coupon-item { justify-content: space-between; flex-wrap: wrap; row-gap: 2px; }
.sp-coupon .cart-coupon-off-line { flex-basis: 100%; text-align: right; font-size: 14px; font-weight: 800; color: #222; }
/* Desktop: the chat bubble (and its preview and window) sits over the products, left of the cart panel, so it
   doesn't cover the Charge button (phones make room for it in the button instead) */
@media (min-width: 821px) {
	.shop-page .chat-bubble, .shop-page .chat-preview, .shop-page .chat-panel { right: 364px; }
}
/* Subtotal at 15px; the Total under the discount like it, at 18px */
.sp-total { font-size: 15px; }
.sp-total.sp-total-due { font-size: 18px; border-top: none; padding-top: 8px; }
/* Sales tax: a T by each taxable item's price, and the Tax row with staff's on/off switch */
.sp-tax-t { display: inline-block; margin-right: 5px; padding: 0 4px; border-radius: 4px; background: #efedf5; color: #6b6290; font-size: 10px; font-weight: 800; line-height: 15px; vertical-align: 1px; }
.sp-total.sp-tax-row { border-top: none; padding-top: 8px; font-size: 14px; font-weight: 700; color: #444; align-items: center; }
.sp-tax-label { display: inline-flex; align-items: center; gap: 8px; }
.sp-tax-off > span:last-child { color: #aaa; text-decoration: line-through; }
.sp-tax-switch { position: relative; display: inline-block; width: 30px; height: 17px; margin: 0; cursor: pointer; }
.sp-tax-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.sp-tax-switch span { position: absolute; inset: 0; border-radius: 17px; background: #ccc; transition: background .15s; }
.sp-tax-switch span::before { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sp-tax-switch input:checked + span { background: #1e9a5a; }
.sp-tax-switch input:checked + span::before { transform: translateX(13px); }
.sp-total.sp-total-due { padding-bottom: 12px; }
.sp-panel > .sp-total:not(.sp-total-due):not(.sp-tax-row):last-of-type { padding-bottom: 12px; }
/* The coupon box straight above Checkout (no tax or total rows between) gets a gap */
.sp-coupon + .sp-checkout { margin-top: 12px !important; }
/* The coupon field and its search button sit together (the % button keeps its own space) */
.sp-coupon .cart-coupon-input { gap: 0; }
.sp-coupon .cart-coupon-input input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sp-coupon .cart-coupon-input input + button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sp-coupon .cart-coupon-input button.cart-discount-btn { margin-left: 6px; }
/* Taller coupon field, with its search and % buttons the same height */
.sp-coupon .cart-coupon-input { align-items: stretch; }
.sp-coupon .cart-coupon-input input { height: 40px; box-sizing: border-box; margin: 0; font-size: 15px; }
.sp-coupon .cart-coupon-input button, .sp-coupon .cart-coupon-input button.cart-discount-btn { height: 40px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.sp-coupon .cart-coupon-input button.cart-discount-btn { font-size: 16px; }
/* Options in the item popup (size, color...): a row of choices per group, the picked one in the brand color,
   out-of-stock ones greyed out; the cart line names what was picked */
.sp-opt-group { margin: 14px 0 0; }
.sp-opt-label { font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #666; text-transform: uppercase; margin-bottom: 6px; }
.sp-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-opt { min-width: 40px; padding: 7px 12px; border: 1px solid #d6d3df; border-radius: 8px; background: #fff; color: #333; font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; user-select: none; }
.sp-opt:hover { border-color: #4a3a78; }
.sp-opt.sp-on { background: #4a3a78; border-color: #4a3a78; color: #fff; }
.sp-opt.sp-off { color: #bbb; border-style: dashed; background: #f7f7f9; cursor: not-allowed; text-decoration: line-through; }
.sp-opt-stock { margin-top: 10px; font-size: 13px; font-weight: 700; color: #1e7a44; }
.sp-opt-stock.sp-low { color: #c0392b; }
.sp-view-add .btn-green[disabled] { opacity: .55; cursor: not-allowed; }
.sp-line-tags { font-size: 12px; color: #777; margin: -2px 0 4px; }
/* Out of stock: the + buttons go grey and can't be tapped; a sold-out tile says so */
.sp-tile-add.sp-disabled { background: #c9c7d1 !important; cursor: not-allowed; }
.sp-line-qty a.sp-disabled { color: #ccc !important; cursor: not-allowed; }
.sp-tile-out { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; background: rgba(192,57,43,.92); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .4px; }
/* The website Store's animations, here: the flying photo, the hop-off, the shooting star and its tail */
.sp-fly { position: fixed; z-index: 2147483000; pointer-events: none; border-radius: 12px; background: #eee center / cover no-repeat; box-shadow: 0 10px 28px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; will-change: transform, opacity; }
.sp-fly span { color: rgba(255,255,255,.9); font-size: 40px; font-weight: 800; }
.sp-fly.sp-drop { border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.sp-fly.sp-drop span { font-size: 22px; }
.sp-fly.sp-star { border-radius: 10px; box-shadow: 0 0 14px 4px rgba(255,225,120,.85), 0 0 34px 10px rgba(255,190,60,.45); }
.sp-fly.sp-star-tail { border-radius: 50%; filter: blur(3px) saturate(1.3); box-shadow: 0 0 18px 6px rgba(255,210,100,.6); }