/* Wishlist star, index eye, "notify me" prompt, watchlist and profile tabs,
   and listing alerts in settings (item-lists.js). */
:root{--wish-color:#f6b73c}

/* Card heading: the name (two lines at most, then "…") and the star and eye,
   centred on each other. Every card's heading is the same height, so the
   image and the bar under it line up across the grid. */
html[data-theme] body .catalog-card .collectible-heading:has(>.collectible-tools){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}
html[data-theme] body .catalog-card .collectible-heading>.collectible-tools{position:static;display:flex;align-items:center;gap:6px;height:28px;margin:0}
html[data-theme] body .catalog-card .collectible-heading .item-name{display:flex;align-items:center;min-width:0;padding:0;text-align:left}
.catalog-card .item-name-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
html[data-theme] body .index-card .collectible-tools>.save-button{width:29px;height:28px;border-radius:7px}
.detail-card-tools{display:flex;align-items:center;gap:8px;flex:none}

/* The star: outline until wished, then filled gold. */
html[data-theme] body :is(.catalog-card .collectible-tools,.detail-card-tools)>.save-button.wish-button{position:relative;inset:auto;overflow:visible}
html[data-theme] body :is(.catalog-card .collectible-tools,.detail-card-tools)>.save-button.wish-button:hover{color:var(--wish-color);border-color:color-mix(in srgb,var(--wish-color) 60%,var(--theme-border));background:color-mix(in srgb,var(--wish-color) 7%,var(--theme-surface))}
html[data-theme] body :is(.catalog-card .collectible-tools,.detail-card-tools)>.save-button.wish-button.wished{color:var(--wish-color);border-color:color-mix(in srgb,var(--wish-color) 75%,var(--theme-border));background:color-mix(in srgb,var(--wish-color) 11%,var(--theme-surface))}
html[data-theme] body .save-button.wish-button .wish-star{transition:fill .16s ease}
html[data-theme] body .save-button.wish-button.wished .wish-star{fill:currentColor}
.wish-button::before,.wish-button::after{content:'';position:absolute;pointer-events:none;opacity:0}
/* A ring and six sparks burst out when an item is starred. */
.wish-button::before{left:50%;top:50%;width:4px;height:4px;border-radius:50%;box-shadow:0 -16px 0 var(--wish-color),14px -8px 0 var(--wish-color),14px 8px 0 var(--wish-color),0 16px 0 var(--wish-color),-14px 8px 0 var(--wish-color),-14px -8px 0 var(--wish-color);transform:translate(-50%,-50%) scale(.3)}
.wish-button::after{inset:-1px;border:2px solid var(--wish-color);border-radius:inherit}
.wish-button.wish-pop .wish-star{animation:wish-pop .5s cubic-bezier(.2,.9,.3,1.2)}
.wish-button.wish-pop::before{animation:wish-sparks .55s ease-out}
.wish-button.wish-pop::after{animation:wish-ring .5s ease-out}
.wish-button.wish-unpop .wish-star{animation:wish-unpop .26s ease}
@keyframes wish-pop{0%{transform:scale(1)}30%{transform:scale(1.4) rotate(-16deg)}62%{transform:scale(.9) rotate(7deg)}100%{transform:none}}
@keyframes wish-unpop{0%{transform:none}45%{transform:scale(.7)}100%{transform:none}}
@keyframes wish-sparks{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes wish-ring{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
/* The index eye gets a small blink when an item is watched. */
.watch-item-button.saved .icon{animation:watch-blink .32s ease}
@keyframes watch-blink{0%{transform:none}40%{transform:scaleY(.25)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.wish-button .wish-star,.wish-button::before,.wish-button::after,.watch-item-button.saved .icon{animation:none!important;transition:none}}

/* "Notify me when it's listed?" and the signed-out prompt. */
.item-list-prompt{position:fixed;z-index:1000;inset:auto;margin:0;box-sizing:border-box;width:300px;max-width:calc(100vw - 24px);padding:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;overflow:visible;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-raised);color:var(--text);box-shadow:0 18px 44px #0009,0 2px 6px #0004;opacity:0;transform:translateY(-6px) scale(.97);transform-origin:var(--arrow-x,90%) top;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.9,.3,1.15)}
.item-list-prompt[data-side=above]{transform:translateY(6px) scale(.97);transform-origin:var(--arrow-x,90%) bottom}
.item-list-prompt[data-side=sheet]{width:calc(100vw - 24px);transform:translateY(12px)}
.item-list-prompt.shown{opacity:1;transform:none}
.item-list-prompt.leaving{opacity:0;transform:scale(.97);transition-duration:.14s}
.item-list-prompt::before{content:'';position:absolute;top:-6px;left:calc(var(--arrow-x,90%) - 5px);width:10px;height:10px;border:1px solid var(--theme-border);border-width:1px 0 0 1px;background:var(--theme-raised);transform:rotate(45deg)}
.item-list-prompt[data-side=above]::before{top:auto;bottom:-6px;border-width:0 1px 1px 0}
.item-list-prompt[data-side=sheet]::before{display:none}
.item-list-prompt-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--theme-accent) 14%,transparent);color:var(--theme-accent)}
.item-list-prompt-icon .icon{width:18px;height:18px}
.item-list-prompt.shown .item-list-prompt-icon .icon{animation:prompt-bell .8s ease .15s;transform-origin:50% 10%}
.item-list-prompt.confirmed .item-list-prompt-icon{background:color-mix(in srgb,#3ccf6e 16%,transparent);color:#3ccf6e}
@keyframes prompt-bell{0%,100%{transform:none}20%{transform:rotate(14deg)}40%{transform:rotate(-11deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-4deg)}}
.item-list-prompt-copy h3{margin:2px 0 5px;font-size:14px;font-weight:650;line-height:1.3}
.item-list-prompt-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.item-list-prompt-copy strong{color:var(--text);font-weight:600}
.item-list-prompt-actions{grid-column:1/-1;display:flex;gap:8px}
.item-list-prompt-actions .button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 10px;font-size:12px}
.item-list-prompt-actions .button .icon{width:14px;height:14px}
.item-list-prompt-error{grid-column:1/-1;margin:0;color:#ff8080;font-size:12px}
.item-list-prompt-note{grid-column:1/-1;margin-top:-3px;color:var(--muted);font-size:11px;line-height:1.4;text-align:center}
.item-list-prompt-note a{color:var(--theme-accent);text-decoration:underline;text-underline-offset:2px}
@media(prefers-reduced-motion:reduce){.item-list-prompt{transition:opacity .12s}.item-list-prompt.shown .item-list-prompt-icon .icon{animation:none}}

/* Watchlist: saved listings or watched items. */
.watch-tabs{display:flex;width:max-content;max-width:100%;gap:4px;margin:-8px 0 20px;padding:4px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-surface);overflow-x:auto}
.watch-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 13px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.watch-tabs button:hover{color:var(--text)}
.watch-tabs button .icon{width:15px;height:15px}
html[data-theme] body .watch-tabs button[aria-selected=true]{background:var(--theme-primary);color:var(--theme-on-primary)}
.watch-tab-count{min-width:20px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:11px;line-height:18px;text-align:center}
.watch-tabs button:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}
/* The selected-tab highlight slides between Listings and Items. */
.watch-tabs{position:relative}
.watch-tabs button{position:relative;z-index:1;transition:background .15s,color .2s}
.watch-tab-indicator{position:absolute;top:0;left:0;z-index:0;border-radius:7px;background:var(--theme-primary);opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.3,.8,.25,1),width .34s cubic-bezier(.3,.8,.25,1)}
.watch-tab-indicator.is-placed{opacity:1}
.watch-tab-indicator.is-instant{transition:none}
html[data-theme] body .watch-tabs:has(.watch-tab-indicator.is-placed) button[aria-selected=true]{background:transparent}
@media(prefers-reduced-motion:reduce){.watch-tab-indicator{transition:none}}
.watch-items-note{margin:-6px 0 16px;color:var(--muted);font-size:13px}
.watch-items-note a{color:var(--theme-accent)}

/* Seller profile: stall or wishlist. */
.seller-profile-tabs{display:flex;flex-wrap:wrap;gap:6px}
.seller-profile-tab{display:inline-flex;align-items:center;gap:7px;min-height:31px;padding:5px 12px 5px 10px;border:1px solid var(--theme-border);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.seller-profile-tab:hover{color:var(--text);border-color:color-mix(in srgb,var(--theme-primary) 45%,var(--theme-border))}
.seller-profile-tab .icon{width:14px;height:14px;color:var(--theme-primary)}
.seller-profile-tab[data-profile-tab=wishlist] .icon{color:var(--wish-color)}
.seller-profile-tab[aria-selected=true]{color:var(--text);border-color:color-mix(in srgb,var(--theme-primary) 70%,var(--theme-border));background:color-mix(in srgb,var(--theme-primary) 13%,transparent)}
.seller-profile-tab[data-profile-tab=wishlist][aria-selected=true]{border-color:color-mix(in srgb,var(--wish-color) 65%,var(--theme-border));background:color-mix(in srgb,var(--wish-color) 11%,transparent)}
.seller-profile-tab[data-profile-tab=wishlist][aria-selected=true] .icon{fill:currentColor}
.seller-profile-tab:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}
/* A highlight that slides between the two tabs and takes the selected tab's colour. */
.seller-profile-tabs{position:relative}
.seller-profile-tabs .seller-profile-tab{position:relative;z-index:1}
.seller-tab-indicator{position:absolute;top:0;left:0;z-index:0;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--theme-primary) 70%,var(--theme-border));border-radius:999px;background:color-mix(in srgb,var(--theme-primary) 13%,transparent);opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.3,.8,.25,1),width .34s cubic-bezier(.3,.8,.25,1),border-color .25s,background-color .25s,opacity .3s}
.seller-tab-indicator[data-tab=wishlist]{border-color:color-mix(in srgb,var(--wish-color) 65%,var(--theme-border));background:color-mix(in srgb,var(--wish-color) 11%,transparent)}
.seller-tab-indicator.is-placed{opacity:1}
.seller-tab-indicator.is-instant{transition:opacity .3s}
html[data-theme] .seller-profile-tabs:has(.seller-tab-indicator.is-placed) .seller-profile-tab[aria-selected=true]{border-color:transparent;background:transparent}
.seller-profile-tab .icon{transition:fill .25s,color .25s}
@media(prefers-reduced-motion:reduce){.seller-tab-indicator{transition:none}}
.seller-profile-tab span{color:var(--muted);font-weight:500}
.seller-wishlist[hidden],.seller-public-stall[hidden],.seller-profile-tab[hidden],.profile-popover a[hidden]{display:none}
.seller-wishlist-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px}
.seller-wishlist-head h2{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:18px}
.seller-wishlist-head h2 .icon{width:18px;height:18px;color:var(--wish-color);fill:currentColor}
.seller-wishlist-head p{margin:0;color:var(--muted);font-size:13px}
.seller-wishlist-head>span{flex:none;padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--panel,var(--bg));color:var(--text);font-size:12px;font-weight:600}
.seller-wishlist .index-grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.seller-wishlist-empty{padding:52px 24px;text-align:center;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.seller-wishlist-empty>.icon{width:38px;height:38px;color:var(--wish-color)}
.seller-wishlist-empty h2{margin:16px 0 8px;font-size:20px}.seller-wishlist-empty p{max-width:420px;margin:0 auto;color:var(--muted);font-size:13px;line-height:1.55}
@media(max-width:760px){.seller-wishlist-head{flex-wrap:wrap}.seller-wishlist .index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Settings: listing alerts for watched items. */
.listing-alerts{padding:18px 0;border-top:1px solid var(--profile-border,var(--theme-border))}
.listing-alerts-heading h3{margin:0 0 4px;font-size:13px}
.listing-alerts-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.listing-alerts-heading a{color:var(--theme-accent)}
.listing-alerts-list{display:grid;gap:8px;margin-top:14px}
.listing-alerts-list>p{margin:0;color:var(--muted);font-size:12px}
.listing-alert-row{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 12px;border:1px solid var(--profile-border,var(--theme-border));border-radius:10px;background:var(--theme-surface)}
.listing-alert-row img{width:38px;height:38px;flex:none;object-fit:contain}
.listing-alert-row>div{flex:1;min-width:0}
.listing-alert-row h4{margin:0;overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.listing-alert-row p{margin:2px 0 0;color:var(--muted);font-size:11px}
.listing-alert-row .notification-switch{flex:none}
.listing-alert-remove{display:grid;place-items:center;width:30px;height:30px;flex:none;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.listing-alert-remove:hover{color:#ff8080;border-color:var(--theme-border)}
.listing-alert-remove .icon{width:15px;height:15px}
.listing-alerts .preference-status:empty{display:none}

/* Account menu: Wishlist */
.profile-popover .menu-star{--menu-icon:var(--wish-color)}