/* The product preview on partner pages (partials/quick-view.php,
   quick-view.js). It is the homepage's preview — the .lb rules in home.css
   and site.css draw it — in the partner's own accent: every partner theme
   sets --scroll-acc on <html>, and every accent in the dialog reads --acc. */
/* Its own palette, pinned: partner themes set the page's text colour (dark
   ink on KatsuRiot's cream page) and three of them redefine the site's
   colour variables, and the dialog would otherwise inherit either. */
.qv {
  --bg: #0A0A0A; --bg2: #111110; --panel: #161615; --panel2: #1D1D1B; --line: #252523; --line2: #33332F;
  --tx: #F0ECE0; --tx2: #A8A49A; --tx3: #7D7A71;
  --head: 'Anton', Impact, sans-serif; --body: 'Nunito', system-ui, sans-serif;
  --acc: var(--scroll-acc, #FF6B35);
  color: var(--tx); font-family: var(--body); text-align: left; letter-spacing: normal; text-transform: none;
}
.qv .lb-info h3 { color: var(--tx); font-family: var(--head); font-weight: 400; text-transform: uppercase; line-height: 1.05; }
.qv .lb-info .price { color: var(--tx); }
.qv .lb-meta b { color: var(--tx); }
.qv[hidden] { display: none; }

/* The page behind stays where it was while the preview is open. */
html.qv-open, html.qv-open body { overflow: hidden; }

.qv .lb-info .k { color: var(--acc); }
.qv .lb-artist { color: var(--acc); }
/* A long description scrolls in its own box and fades at the bottom, so the
   price and the button stay in view. */
.qv-desc { max-height: 9.5em; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.qv-desc::-webkit-scrollbar { width: 4px; }
.qv-desc::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.qv .qv-buy { width: 100%; }
.qv .qv-buy:disabled { opacity: .5; cursor: not-allowed; }
.qv-status { min-height: 1.2em; margin: -6px 0 0; font-weight: 800; font-size: .86rem; text-align: center; }
.qv-status:empty { display: none; }
.qv-status.is-ok { color: var(--grn, #A3E635); }
.qv-status.is-error { color: #FF8A8A; }

/* While a piece is still on its way: the box dims and waits. */
.qv.is-loading .lb-box { opacity: .55; transition: opacity .2s; }
html:not(.qv-open) .qv.is-loading { display: none; }

/* The cart in the header gives a little jump when something lands in it. */
.qv-bump { animation: qvBump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes qvBump { 40% { transform: scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
  .qv-bump { animation: none; }
}
