/* ==========================================================================
   PDP "Ask a question" drawer enhancements (pairs with pdpAskQuestion.js)
   ========================================================================== */

:root {
    --paq-thumbSize: 64px;
    --paq-closeSize: 40px;
    --paq-textColor: var(--detail-textColor, #1f2419);
    --paq-borderColor: #dcdcdc;
    --paq-radius: var(--detail-radius, 4px);
    --paq-hoverBg: #f2f2f2;
    --paq-focusRing: #1f2419;
}

/* Backdrop is clickable to close */
.modular-review-faq-slidein[data-slideintype="question"] {
    cursor: pointer;
}

.modular-review-faq-slidein[data-slideintype="question"] .modular-review-faq-slidein-inner {
    cursor: auto;
}

/* Stop the page scrolling behind the open drawer */
html.paq-open,
html.paq-open body {
    overflow: hidden;
}

/* ---------- X button ---------- */
.modular-review-faq-slidein .paq-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: var(--paq-closeSize);
    height: var(--paq-closeSize);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--paq-textColor);
    cursor: pointer;
    transition: background-color .15s ease;
}

.modular-review-faq-slidein .paq-close:hover {
    background: var(--paq-hoverBg);
}

.modular-review-faq-slidein .paq-close:focus-visible {
    outline: 2px solid var(--paq-focusRing);
    outline-offset: 2px;
}

/* ---------- Header: thumbnail + title ---------- */
.modular-review-faq-slidein .paq-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-right: calc(var(--paq-closeSize) - 8px); /* keep clear of the X */
    padding-bottom: 16px;
    box-sizing: border-box;
}

.modular-review-faq-slidein .paq-thumb {
    flex: 0 0 var(--paq-thumbSize);
    width: var(--paq-thumbSize);
    height: var(--paq-thumbSize);
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--paq-borderColor);
    border-radius: var(--paq-radius);
}

.modular-review-faq-slidein .paq-thumb[hidden] {
    display: none;
}

.modular-review-faq-slidein .paq-header .paq-title {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.modular-review-faq-slidein .paq-product-name {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.35;
}

@media (max-width: 767px) {
    .modular-review-faq-slidein .paq-close {
        top: 8px;
        right: 8px;
    }

    :root {
        --paq-thumbSize: 56px;
    }

    .modular-review-faq-slidein .paq-header .paq-title {
        font-size: 18px;
    }
}