/* ════════════════════════════════════════════════════════════════
   QUICK-VIEW.CSS — Quick View Modal Layout & Context Overrides
   Two-column grid mirroring .psp-main (55 / 45).
   Component styles (.psi, .psg, .psv, .psatc) live in
   pages/product.css which is loaded globally on every page.
   Prefix: qv
════════════════════════════════════════════════════════════════ */

/* ── Two-column layout: mirrors .psp-main ─────────────────── */
.qv-wrap {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 48px;
    align-items: start;
}

/* ── Gallery column ────────────────────────────────────────── */

/* De-sticky the gallery inside the modal scroll context */
.qv-gallery-col .psg { position: static; }

/* Cap gallery height so it never overflows the modal viewport;
   the psg-main aspect-ratio handles internal proportioning.   */
.qv-gallery-col .psg-main {
    max-height: 440px;
}
.qv-gallery-col .psg-main-img {
    object-fit: contain;
}

/* ── Info column ───────────────────────────────────────────── */

/* Scrollable when product content (variants, description) is tall */
.qv-info-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    max-height: 82vh;
    padding-inline-end: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--color-primary-rgb), .3) transparent;
}
.qv-info-col::-webkit-scrollbar        { width: 3px; }
.qv-info-col::-webkit-scrollbar-thumb  { background: rgba(var(--color-primary-rgb), .35); border-radius: 2px; }
.qv-info-col::-webkit-scrollbar-track  { background: transparent; }

/* ── Action stack: mirrors .psp-action-stack ───────────────── */
.qv-action-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border, var(--color-border));
}

/* ── Modal context overrides ───────────────────────────────── */

/* Hide inline breadcrumb — the PDP uses a full-page hero breadcrumb instead */
.qv-wrap .psi-breadcrumb { display: none; }

/* Remove default top padding from tabs when rendered inside modal */
.qv-wrap .pstabs { padding-top: 0; }

/* Reduce the .psi name size slightly — the modal header is more compact
   than the PDP hero which has a full-width section. Keeps visual weight
   proportional to the modal's 900px container. */
.qv-wrap .psi-name {
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
}

/* ── View full product page link ───────────────────────────── */
.qv-full-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    width: fit-content;
    transition: color 140ms;
}
.qv-full-link svg { flex-shrink: 0; transition: transform 180ms; }
.qv-full-link:hover { color: var(--color-primary-hover); }
.qv-full-link:hover svg { transform: translateX(3px); }
html[dir="rtl"] .qv-full-link svg { transform: scaleX(-1); }
html[dir="rtl"] .qv-full-link:hover svg { transform: scaleX(-1) translateX(-3px); }
.qv-full-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ── Responsive ────────────────────────────────────────────── */

/* Tablet — narrow the gap; both columns still fit in the 900px modal */
@media (max-width: 860px) {
    .qv-wrap { gap: 28px; }
    .qv-gallery-col .psg-main { max-height: 360px; }
}

/* Phablet — switch to single column (modal goes near-full-width) */
@media (max-width: 680px) {
    .qv-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .qv-info-col {
        max-height: none;
        overflow-y: visible;
        padding-inline-end: 0;
    }
    .qv-gallery-col .psg-main { max-height: none; }
    .qv-wrap .psi-name { font-size: clamp(1.25rem, 5vw, 1.55rem); }
}

/* ── Motion preferences ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .qv-full-link,
    .qv-full-link svg { transition: none !important; transform: none !important; }
}