/* Product View - three column quick view */
.quick-view-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2200; overflow-y: scroll; }
.quick-view-modal .qv-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.quick-view-modal .qv-panel { position: relative; background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg); width: 94%; max-width: 1200px; z-index: 2210; overflow: hidden; }
.quick-view-modal .qv-close { position: absolute; right: 12px; top: 8px; z-index: 2220; background: transparent; border: none; font-size: 2.2rem; line-height:1; }
.qv-three-body { display: grid; grid-template-columns: 1fr 1fr 360px; gap: 20px; padding: 22px; align-items: start; }
.qv-col { background: transparent; }
.qv-gallery { display:flex; flex-direction:column; gap:12px; }
.qv-main-image-wrap { display:flex; align-items:center; justify-content:center; border: 1px solid var(--border-light); padding: 12px; border-radius: 8px; background: var(--bg-white); }
.qv-image { max-width: 100%; max-height: 62vh; object-fit: contain; display:block; }
.qv-thumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.qv-thumbs img { width:64px; height:64px; object-fit:cover; border:1px solid var(--border-gray); border-radius:6px; cursor:pointer; }

.qv-thumb-wrap { position: relative; display: inline-block; }
.qv-thumb-wrap img { display: block; border-radius:6px; }
.qv-thumb-more { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); color: #fff; font-weight: 700; border-radius:6px; font-size: 1rem; }

.qv-details { display:flex; flex-direction:column; gap:8px; }
.qv-title { font-size: 1.7rem; font-weight: 500; color: var(--text-dark); }
.qv-rating { color: #f6b024; }
.qv-price { font-size: 3rem; color: rgb(255, 53, 53); font-weight: 700; }

/* Style the original (del) price inside quick-view to be muted and smaller */
.qv-price del {
    color: #888888; /* gray */
    font-size: 1.5rem;
    margin-left: 8px;
    font-weight: 400;
}
.qv-short-desc { color: var(--text-gray); font-size: 1.4rem; }
.qv-variants { margin-top: 2px; }
.qv-full-desc { margin-top: 8px; font-size: 1.5rem; color: var(--text-gray); max-height: 220px; overflow:auto; }

.qv-actions-panel { padding: 12px; border-left: 1px dashed var(--border-light); display:flex; flex-direction:column; gap:12px; }
.qv-seller { font-size: 1.3rem; color: var(--text-gray); }
.qv-shipping { font-size: 1.2rem; color: var(--text-gray); }
.qv-availability { font-size: 1.2rem; color: var(--text-gray); }
.qv-qty label { font-size: 1.2rem; color: var(--text-dark); }
.qv-qty-value { min-width:40px; text-align:center; font-size: 1.3rem; }
.qv-actions-row { display:flex; gap:8px; }
.qv-add-cart { flex:1; padding: 10px 16px; font-size: 1.3rem; }
.qv-view-product { flex:1; padding: 10px 16px; font-size: 1.3rem; background: #000; color: var(--bg-white); }

@media (max-width: 980px) {
    .qv-three-body { grid-template-columns: 1fr; }
    .qv-actions-panel { border-left: none; }
}

/* small tweaks */
.qv-thumbs img.active { outline: 2px solid var(--primary-orange); }

/* Mobile: keep the quick view panel centered but constrained so the close button remains visible
   and the panel content can scroll when taller than the viewport. */
@media (max-width: 768px) {
    .quick-view-modal {
        align-items: center; /* keep vertically centered where possible */
        padding: 18px; /* small page padding so panel doesn't touch edges */
        overflow-y: auto; /* allow page-level scrolling if panel is taller */
    }

    .quick-view-modal .qv-panel {
        width: 96%;
        max-width: 720px;
        /* limit panel height so it never completely covers viewport and allow internal scrolling */
        max-height: calc(100vh - 36px);
        overflow: auto; /* enable internal scroll inside panel */
        border-radius: 10px;
    }

    /* slightly reduce image height on small screens */
    .quick-view-modal .qv-image {
        max-height: 40vh;
    }

    /* ensure body content inside the panel can wrap into a single column cleanly */
    .qv-three-body {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
        align-items: stretch;
    }

    /* keep the close button visible within the panel (it is absolutely positioned relative to .qv-panel) */
    .quick-view-modal .qv-close {
        top: 8px;
        right: 12px;
        font-size: 2rem;
    }
}