/* Quick View. The dialog is a window over the page: the dark bar stays put,
   the page behind stays visible around the edges, and listing links are unchanged. */
.qv[hidden] { display: none !important; }

.qv {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    box-sizing: border-box;
}

.qv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 12, 0.55);
}

.qv-window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    max-height: 90vh;
    background: #fffdfa;
    color: #241e18;
    border: 1px solid #241e18;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

.qv-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 10px 12px 10px 16px;
    background: #241e18;
    color: #faf7f2;
}

.qv-bar-text { min-width: 0; }

.qv-kicker {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.72;
}

.qv-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72vw;
}

button.qv-close {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid rgba(250, 247, 242, 0.55);
    border-radius: 7px;
    background: transparent;
    color: #faf7f2;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

button.qv-close:hover { background: rgba(250, 247, 242, 0.12); }

.qv-close-x { font-size: 22px; line-height: 0.8; }

.qv-scroll {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.qv-loading,
.qv-missing,
.qv-error {
    margin: 0;
    padding: 28px 22px;
    font-size: 15px;
}

.qv-lower {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 28px;
    padding: 8px 22px 8px;
}

.qv-lower:not(:has(.qv-side *)) { grid-template-columns: minmax(0, 1fr); }
.qv-side:not(:has(*)) { display: none; }

.qv-col h2,
.qv-col .title,
.qv-review-title {
    margin: 0 0 10px;
    font-size: 18px;
}

.qv-desc img,
.qv .description-content img { max-width: 100%; height: auto; }

.qv-full { padding: 4px 22px 22px; margin: 0; }
.qv-full a { font-weight: 700; }

.qv .note_box { width: 72px; max-width: 32%; }
.qv .note_box img,
.qv .note_img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}
.qv .note_text { font-size: 11px; height: auto; margin: 4px 0 8px; }
.qv .note_layer_title { font-size: 12px; }

.qv .sales-campaign-banner {
    margin: 6px 0 !important;
    padding: 6px 10px !important;
    gap: 8px;
    font-size: 12px;
    line-height: 1.3;
}
.qv .sales-promotion-banner-wrap { margin: 6px 0 !important; }

.qv .dsbp-sticky { display: none !important; }

/* The buy panel drops its side padding under 700px because the product page
   supplies that inset. Inside the dialog, match the description block. */
.qv .dsbp {
    padding-left: 22px;
    padding-right: 22px;
}

.qv .pdp-reviews-empty-cta { display: none; }

.qv-fallback { padding: 18px 22px 0; }
.qv-fallback img { max-width: 280px; height: auto; }
.qv-cart { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.qv-price { font-size: 22px; font-weight: 700; }
.qv-price-old { margin-left: 8px; opacity: 0.6; }

.product-card-plp .image,
.grid-item .image { position: relative; }

button.qv-open {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 6px 10px;
    border: 2px solid #000;
    border-radius: 7px;
    background: #fff;
    color: #000;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

button.qv-open:hover { background: #fff; transform: scale(1.03); }

@media (max-width: 980px) {
    .qv .dsbp { grid-template-columns: 1fr !important; }
}

@media (max-width: 800px) {
    .qv { padding: 10px; align-items: stretch; }
    .qv-window { width: 100%; max-height: none; height: 100%; }
    .qv-lower { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 8px 14px; }
    .qv-side { display: contents; }
    .qv-side .tab-specification { order: -1; }
    .qv .dsbp { padding-left: 14px; padding-right: 14px; }
    .qv-name { max-width: 52vw; font-size: 14px; }
    button.qv-close { padding: 8px 10px; }
    .qv-full { padding: 4px 14px 18px; }
    button.qv-open { font-size: 12px; padding: 5px 8px; left: 6px; right: 6px; bottom: 6px; }
}