/* ==================== Premium Quick View Modal ==================== */

#quickViewModal .modal-dialog {
    max-width: 1000px;
}

#quickViewModal.fade .modal-dialog {
    transform: scale(.96) translateY(10px);
    transition: transform .3s ease, opacity .3s ease;
}

#quickViewModal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

.qv-modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25);
    background: #fff;
}

.qv-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .9);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .15);
    transition: all .25s ease;
}

.qv-close-btn:hover {
    background: var(--theme-color);
    color: #fff;
    transform: rotate(90deg);
}

/* Loading state */

.qv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    gap: 16px;
}

.qv-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(var(--theme-color-rgb), .15);
    border-top-color: var(--theme-color);
    border-radius: 50%;
    animation: qvSpin .8s linear infinite;
}

@keyframes qvSpin {
    to { transform: rotate(360deg); }
}

.qv-loading p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* Layout */

.qv-content {
    display: flex;
    align-items: stretch;
    animation: qvFadeIn .35s ease;
}

@keyframes qvFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Gallery (left, ~55%) ---------- */

.qv-gallery {
    flex: 0 0 55%;
    max-width: 55%;
    padding: 28px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qv-main-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 1 / 1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.qv-main-image .qv-img-frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
}

.qv-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

.qv-main-image .qv-img-frame:hover img {
    transform: scale(1.18);
}

/* Floating action icons over the image */

.qv-float-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;
}

.qv-float-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    cursor: pointer;
    transition: all .25s ease;
    border: none;
}

.qv-float-btn:hover {
    background: var(--theme-color);
    color: #fff;
    transform: translateY(-2px) scale(1.06);
}

.qv-float-btn.active i {
    font-weight: 900;
}

.qv-float-btn.wishlist-active {
    background: #e11d48;
    color: #fff;
}

/* Badges */

.qv-badge-wrap {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.qv-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.qv-badge-discount { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.qv-badge-new      { background: linear-gradient(135deg, #22c55e, #16a34a); }
.qv-badge-hot      { background: linear-gradient(135deg, #f97316, #ea580c); }
.qv-badge-best     { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.qv-badge-top      { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.qv-badge-out      { background: linear-gradient(135deg, #64748b, #475569); }

/* Thumbnails */

.qv-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.qv-thumbs::-webkit-scrollbar { height: 6px; }
.qv-thumbs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.qv-thumbs::-webkit-scrollbar-track { background: transparent; }

.qv-thumb-item {
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qv-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}

.qv-thumb-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(15, 23, 42, .12);
}

.qv-thumb-item:hover img { transform: scale(1.08); }

.qv-thumb-item.active {
    border-color: var(--theme-color);
    box-shadow: 0 6px 14px rgba(var(--theme-color-rgb), .25);
}

.qv-video-thumb {
    background: #0f172a;
    color: #fff;
    font-size: 20px;
}

.qv-video-thumb:hover { background: var(--theme-color); }

/* ---------- Info (right, ~45%) ---------- */

.qv-info {
    flex: 1;
    padding: 32px 32px 0;
    max-height: 620px;
    overflow-y: auto;
}

/* Sticky quantity/actions bar - always reachable no matter how long the
   highlight list or description above it grows */
.qv-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    margin: 8px -32px 0;
    padding: 12px 32px 18px;
    box-shadow: 0 -12px 16px -12px rgba(15, 23, 42, .1);
}

.qv-info::-webkit-scrollbar { width: 6px; }
.qv-info::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.qv-info::-webkit-scrollbar-track { background: transparent; }

.qv-meta-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.qv-category {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
    text-decoration: none;
    transition: color .2s ease;
}

.qv-category:hover { color: var(--theme-color); }

.qv-brand {
    font-size: 12px;
    font-weight: 700;
    color: var(--theme-color);
    background: rgba(var(--theme-color-rgb), .1);
    padding: 3px 10px;
    border-radius: 20px;
}

.qv-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.qv-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.qv-stars i {
    color: #fbbf24;
    font-size: 14px;
    margin-right: 1px;
}

.qv-stars i.empty { color: #e2e8f0; }

.qv-review-count {
    font-size: 13px;
    color: #64748b;
}

.qv-review-count span { font-weight: 700; color: #334155; }

/* Price */

.qv-price-section {
    background: linear-gradient(135deg, rgba(var(--theme-color-rgb), .06), rgba(var(--theme-color-rgb), .02));
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.qv-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.qv-current-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--theme-color);
    line-height: 1;
}

.qv-old-price {
    font-size: 16px;
    color: #94a3b8;
    text-decoration: line-through;
}

.qv-save-badge {
    background: #16a34a;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Stock */

.qv-stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.qv-stock.in-stock { background: rgba(22, 163, 74, .1); color: #16a34a; }
.qv-stock.out-stock { background: rgba(220, 38, 38, .1); color: #dc2626; }

/* Description */

.qv-description {
    position: relative;
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
    max-height: 66px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height .3s ease;
}

.qv-description::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
    transition: opacity .2s ease;
}

.qv-description.expanded {
    max-height: 500px;
}

.qv-description.expanded::after {
    opacity: 0;
    pointer-events: none;
}

.qv-desc-toggle {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 18px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--theme-color);
    cursor: pointer;
}

.qv-desc-toggle:hover { text-decoration: underline; }

/* Highlights */

.qv-highlights {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.qv-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: #334155;
}

.qv-highlights i {
    color: #16a34a;
    margin-top: 2px;
    font-size: 13px;
}

.qv-highlights strong { color: #0f172a; font-weight: 700; }

/* Variant pills (read-only) */

.qv-variant-block { margin-bottom: 18px; }

.qv-variant-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 8px;
}

.qv-variant-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qv-variant-pill {
    padding: 6px 14px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

/* Quantity */

.qv-qty-section {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.qv-qty-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.qv-qty-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.qv-qty-btn {
    width: 38px;
    height: 38px;
    border: none;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qv-qty-btn:hover { background: var(--theme-color); color: #fff; }

.qv-qty-input {
    width: 48px;
    height: 38px;
    border: none;
    border-left: 1.5px solid #e2e8f0;
    border-right: 1.5px solid #e2e8f0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    -moz-appearance: textfield;
}

.qv-qty-input::-webkit-outer-spin-button,
.qv-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qv-qty-input:focus { outline: none; background: #f8fafc; }

/* Actions */

.qv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.qv-btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all .25s ease;
    white-space: nowrap;
}

.qv-btn-cart {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color-dark, var(--theme-color)));
    color: #fff;
    box-shadow: 0 8px 20px rgba(var(--theme-color-rgb), .3);
    min-width: 160px;
}

.qv-btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(var(--theme-color-rgb), .38);
    color: #fff;
}

.qv-btn-cart:active { transform: translateY(0); }

.qv-btn-cart.disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
}

.qv-btn-buynow {
    background: #fff;
    color: #0f172a;
    border: 1.5px solid #0f172a;
    min-width: 140px;
}

.qv-btn-buynow:hover {
    background: #0f172a;
    color: #fff;
    transform: translateY(-2px);
}

.qv-btn-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #334155;
    font-size: 16px;
}

.qv-btn-icon:hover {
    background: var(--theme-color);
    color: #fff;
}

.qv-btn-icon.wishlist-active {
    background: #e11d48;
    color: #fff;
}

/* Trust / delivery / return */

.qv-trust {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
}

.qv-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.qv-trust-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(var(--theme-color-rgb), .08);
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.qv-trust-text h6 {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
}

.qv-trust-text p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* View full details */

.qv-view-details {
    text-align: center;
    padding: 14px 0 28px;
    border-top: 1px solid #f1f5f9;
}

.qv-view-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--theme-color);
    text-decoration: none;
    transition: gap .2s ease;
}

.qv-view-link:hover {
    gap: 11px;
    color: var(--theme-color);
}

/* Responsive */

@media (max-width: 991px) {
    #quickViewModal .modal-dialog { max-width: 96%; margin: 20px auto; }

    .qv-content { flex-direction: column; }

    .qv-gallery,
    .qv-info {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .qv-info { max-height: none; padding: 24px; }
    .qv-sticky-bar { margin: 8px -24px 0; padding: 12px 24px 18px; position: static; box-shadow: none; }
}

@media (max-width: 768px) {
    .qv-gallery { padding: 18px; }
    .qv-info { padding: 20px; }
    .qv-sticky-bar { margin: 8px -20px 0; padding: 12px 20px 18px; }
    .qv-title { font-size: 20px; }
    .qv-current-price { font-size: 24px; }
    .qv-actions { flex-direction: column; }
    .qv-btn-cart,
    .qv-btn-buynow { width: 100%; }
    .qv-btn-icon { width: 100%; flex: 1 1 auto; }
    .qv-close-btn { top: 10px; right: 10px; width: 34px; height: 34px; }
}