:root {
    --qv-ink: #1E3A8A;
    --qv-muted: #767b8a;
    --qv-border: #eaebef;
    --qv-border-strong: #dcdee4;
    --qv-bg-soft: #f7f7f8;
    --qv-success: #1a8a5f;
}

/* ============================================
   MODAL SIZE FIX — proper modal-lg, no oversized stretch
   ============================================ */
.qv-modal-premium .modal-dialog,
.modal-dialog.modal-lg {
    max-width: 780px !important;
}

.qv-modal-premium .modal-content {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(20, 22, 31, 0.22);
}

.qv-modal-premium .modal-body {
    padding: 0 !important;
    max-height: 78vh;
    overflow-y: auto;
}

.quick-view-wrap {
    display: flex;
    align-items: stretch;
}

.quick-view-wrap > [class*="col-"] {
    display: flex;
}

/* ============================================
   GALLERY — smaller, compact
   ============================================ */
.product-gallery {
    padding: 20px;
    background: var(--qv-bg-soft);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-main {
    position: relative;
    width: 100%;
    height: 260px;                 /* CHANGED — much smaller than before, kills the empty-space feeling */
    background: #fff;
    border: 1px solid var(--qv-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.gallery-main-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: 14px;
    display: block;
    transition: opacity 0.15s ease, transform 0.25s ease;
}

.gallery-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(20, 22, 31, 0.75);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(3px);
}

.gallery-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.gallery-thumbs::-webkit-scrollbar { height: 4px; }
.gallery-thumbs::-webkit-scrollbar-thumb {
    background: var(--qv-border-strong);
    border-radius: 10px;
}

.gallery-thumb {
    flex: 0 0 auto;
    width: 46px;                   /* CHANGED — smaller thumbs to match compact gallery */
    height: 46px;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--qv-border-strong);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.gallery-thumb:hover { border-color: var(--qv-ink); transform: translateY(-1px); }
.gallery-thumb.is-active {
    border-color: var(--qv-ink);
    box-shadow: 0 0 0 3px rgba(20, 22, 31, 0.08);
}

/* ============================================
   INFO COLUMN — compact
   ============================================ */
.product-info-wrapper {
    padding: 20px 24px;
    width: 100%;
}

.product-header { margin-bottom: 12px; }

.d-flex.align-items-center.flex-wrap.gap-2.mb-2 {
    margin-bottom: 8px !important;
}

.category-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--qv-muted);
    background: var(--qv-bg-soft);
    border: 1px solid var(--qv-border);
    padding: 3px 10px;
    border-radius: 999px;
    min-width: 0;
}
/* Hide entirely if it ends up empty (no text) to avoid a floating blank pill */
.category-badge:empty {
    display: none;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--qv-success);
    background: rgba(26, 138, 95, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
}
.verified-badge i { font-size: 12px; }

.product-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--qv-ink);
    line-height: 1.3;
    margin: 0 0 4px !important;
}

.product-meta {
    font-size: 12px;
    color: var(--qv-muted);
    font-weight: 500;
}
.product-meta i { font-size: 13px; margin-right: 4px; }

.price-box { text-align: right; flex-shrink: 0; }
.product-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--qv-ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.price-box small {
    font-size: 10.5px;
    color: var(--qv-muted);
}

/* ---------- Description ---------- */
.product-description-wrapper {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--qv-border);
}

.product-description {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--qv-muted);
    margin: 0;
}
.product-description.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-description.expanded {
    display: block;
}

.read-more-btn {
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--qv-ink);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}
.read-more-btn i { font-size: 13px; }

/* ============================================
   SPECIFICATIONS — plain text row, NO card boxes
   ============================================ */
.specifications {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--qv-border);
}

.specifications > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.specifications span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--qv-muted);
    font-weight: 600;
}

.specifications strong {
    font-size: 13px;
    color: var(--qv-ink);
    font-weight: 700;
}

/* ---------- Options: Size / Color ---------- */
.option-row { margin-bottom: 16px; }

.option-row label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--qv-ink);
}

.size-guide-link {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qv-muted);
    text-decoration: underline;
}
.size-guide-link:hover { color: var(--qv-ink); }

.size-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--qv-ink);
    background: #fff;
    border: 1.5px solid var(--qv-border-strong);
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.size-pill:hover { border-color: var(--qv-ink); }
.size-pill.is-selected {
    background: var(--qv-ink);
    border-color: var(--qv-ink);
    color: #fff;
}

.color-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--qv-ink);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.color-item:hover { background: var(--qv-bg-soft); }
.color-item.is-selected {
    border-color: var(--qv-border-strong);
    background: var(--qv-bg-soft);
}

.color-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--qv-border-strong);
    display: inline-block;
}
.color-item.is-selected .color-circle {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--qv-ink);
}

/* ---------- Action row ---------- */
.qv-action-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
}

.qty-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--qv-border-strong);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.qty-btn {
    width: 34px;
    height: 100%;
    border: none;
    background: var(--qv-bg-soft);
    color: var(--qv-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}
.qty-btn:hover { background: var(--qv-border); }
.qty-value {
    width: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--qv-ink);
}

.btn-add-basket {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--qv-ink);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.btn-add-basket:hover { background: #2a2d3d; }
.btn-add-basket:active { transform: scale(0.98); }

/* ---------- Trust row — plain text, minimal ---------- */
.qv-trust-row {
    display: flex;
    gap: 18px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.qv-trust-row span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--qv-muted);
    font-weight: 500;
}
.qv-trust-row i { font-size: 13px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .qv-modal-premium .modal-dialog,
    .modal-dialog.modal-lg { max-width: 94vw !important; }

    .quick-view-wrap { flex-direction: column; }
    .gallery-main { height: 220px; }
    .product-info-wrapper { padding: 18px 20px; }
    .specifications { flex-wrap: wrap; gap: 14px; }
}
/* ==========================================================
   MODAL
========================================================== */

.modal-content{
    border:0;
    border-radius:18px;
    overflow:hidden;
    box-shadow:
        0 15px 45px rgba(15,23,42,.10),
        0 4px 12px rgba(15,23,42,.06);
}


/* ==========================================================
   HEADER
========================================================== */

.modal-header{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 24px;

    background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);

    border-bottom:1px solid #edf2f7;

}

.modal-icon-box{

    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    color:#fff;

    flex-shrink:0;

    box-shadow:0 8px 18px rgba(37,99,235,.20);

}

.modal-title{

    font-size:18px;

    font-weight:700;

    color:#0f172a;

    margin:0;

}

.modal-subtitle{

    margin-top:4px;

    font-size:13px;

    color:#64748b;

    line-height:1.5;

}


/* ==========================================================
   CLOSE BUTTON
========================================================== */

.custom-close-btn{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

    background:#f8fafc;

    color:#64748b;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

}

.custom-close-btn:hover{

    background:#ef4444;

    color:#fff;

    transform:rotate(90deg);

}

.custom-close-btn:focus{

    outline:none;

    box-shadow:none;

}


/* ==========================================================
   BODY
========================================================== */

.modal-body{

    padding:24px;

    background:#fff;

}


/* ==========================================================
   FOOTER
========================================================== */

.modal-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 24px;

    background:#fafbfc;

    border-top:1px solid #edf2f7;

}

.modal-footer-info{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748b;

    font-size:13px;

}

.modal-footer-info i{

    font-size:18px;

    color:#2563eb;

}

.modal-footer .btn{

    border-radius:12px;

    font-weight:600;

    padding:10px 18px;

}

.modal-footer .btn-light{

    background:#fff;

    border:1px solid #dbe2ea;

}

.modal-footer .btn-light:hover{

    background:#f8fafc;

}

.modal-footer .btn-primary{

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    border:none;

    box-shadow:0 8px 20px rgba(37,99,235,.20);

}

.modal-footer .btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(37,99,235,.25);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .modal-header{

        padding:16px;

    }

    .modal-body{

        padding:18px;

    }

    .modal-footer{

        flex-direction:column;

        align-items:stretch;

        gap:15px;

    }

    .modal-footer>div:last-child{

        display:flex;

        width:100%;

    }

    .modal-footer .btn{

        flex:1;

    }

}
.qv-action-row {
    display: flex;
    align-items: center;   /* KEY FIX: center align, stretch nahi */
    gap: 12px;
    margin: 0;              /* koi bhi inherited margin reset */
}

/* ============ Quantity Stepper ============ */
.qty-stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    height: 46px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.qty-btn {
    background: #F9FAFB;
    border: none;
    width: 38px;
    height: 100%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
}

.qty-btn i {
    display: block;
    line-height: 1;
}

.qty-value {
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1;
}

/* ============ Add to Basket Button ============ */
.btn-add-basket {
    flex: 1;
    height: 46px;
    margin: 0;               /* KEY FIX: button ka default margin reset */
    background: #1E3A8A;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 16px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;          /* KEY FIX: line-height text ko upar-niche shift karti hai */
    transition: background .2s ease;
}

.btn-add-basket i {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.btn-add-basket:hover {
    background: #16296b;
}

.btn-add-basket:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}