/* QV1: quick-view card (desktop, hover-capable pointer) and bottom sheet (touch). Markup built by public/js/quick-view.js.
   Colours come from the theme variables (theme.css), so every theme works. No layout shift: the card is fixed-position and
   never moves the page; the skeleton has the final size. */
a[data-qv] { text-decoration-skip-ink: auto; }
.qv-card {
    position: fixed; z-index: 1080; width: min(360px, calc(100vw - 16px)); max-height: min(620px, calc(100vh - 16px)); overflow: auto;
    background: var(--th-card-bg, var(--bs-body-bg)); color: var(--bs-body-color);
    border: 1px solid var(--th-card-border, var(--bs-border-color)); border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .22); padding: .875rem; font-size: .875rem; line-height: 1.4;
    overscroll-behavior: contain;
}
.qv-card[hidden], .qv-backdrop[hidden] { display: none; }
.qv-card:focus { outline: none; }
.qv-head { display: flex; align-items: flex-start; gap: .5rem; }
.qv-title { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qv-close { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; padding: .125rem .5rem; min-width: 44px; min-height: 44px; margin: -.5rem -.5rem 0 0; border-radius: .5rem; }
.qv-close:hover { background: var(--bs-tertiary-bg); }
.qv-brand { margin: 0 0 .25rem; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
.qv-media { margin: .5rem 0; }
.qv-main { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bs-tertiary-bg); border-radius: .5rem; max-height: 170px; }
.qv-thumbs { display: flex; gap: .375rem; margin-top: .375rem; }
.qv-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: .375rem; background: var(--bs-tertiary-bg); overflow: hidden; }
.qv-thumb[aria-current="true"] { border-color: var(--bs-emphasis-color); }
.qv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qv-price { font-size: 1.25rem; font-weight: 700; margin: .25rem 0 0; }
.qv-old { margin: 0; color: var(--bs-secondary-color); }
.qv-pct { display: inline-block; margin-left: .25rem; padding: 0 .375rem; border-radius: .25rem; background: var(--bs-danger); color: #fff; font-size: .75rem; font-weight: 700; }
.qv-ref { margin: 0; font-size: .75rem; color: var(--bs-secondary-color); }
.qv-stock { margin: .25rem 0; font-weight: 600; }
.qv-stock[data-status="in_stock"] { color: var(--bs-success); }
.qv-stock[data-status="partner"] { color: #7a5a00; }
.qv-stock[data-status="backorder"] { color: var(--bs-secondary-color); }
.qv-fit { margin: .25rem 0; padding: .25rem .5rem; border-radius: .375rem; font-weight: 600; background: var(--bs-tertiary-bg); }
.qv-fit[data-state="fits"] { color: var(--bs-success); }
.qv-specs { margin: .5rem 0; display: grid; grid-template-columns: auto 1fr; gap: .125rem .75rem; }
.qv-specs dt { font-weight: 400; color: var(--bs-secondary-color); }
.qv-specs dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.qv-desc { margin: .5rem 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qv-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; position: sticky; bottom: -.875rem; padding: .5rem 0 .875rem; background: var(--th-card-bg, var(--bs-body-bg)); }
.qv-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.qv-skel { min-height: 12rem; color: var(--bs-secondary-color); }
.qv-skel .qv-skel-img { aspect-ratio: 4 / 3; background: var(--bs-tertiary-bg); border-radius: .5rem; margin: .5rem 0; }
.qv-error { margin: .75rem 0 0; }

/* touch: bottom sheet */
.qv-backdrop { position: fixed; inset: 0; z-index: 1079; background: rgba(0, 0, 0, .45); }
.qv-card.qv-sheet {
    left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 1rem 1rem 0 0;
    padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom)); animation: qv-up .18s ease-out;
}
.qv-sheet .qv-main { max-height: 32vh; }
.qv-sheet .qv-actions { bottom: calc(-1rem - env(safe-area-inset-bottom)); }
.qv-grip { display: block; width: 44px; height: 5px; margin: 0 auto .5rem; border-radius: 3px; background: var(--bs-border-color); touch-action: none; }
.qv-grab { touch-action: none; padding-top: .25rem; }
@keyframes qv-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.qv-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .qv-card.qv-sheet { animation: none; } }