/* =========================================================
   LuxeBeautyCompass Help Me Pick
   Fixed compact quiz; only results area scrolls.
========================================================= */

.lbcq-root,
.lbcq-root *{
    box-sizing:border-box !important;
}

.lbcq-root{
    position:fixed !important;
    inset:0 !important;
    z-index:999998 !important;
    pointer-events:none !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    color:#34272e !important;
}

.lbcq-root button,
.lbcq-root a,
.lbcq-root p,
.lbcq-root span,
.lbcq-root small,
.lbcq-root em{
    font-family:"DM Sans",Arial,sans-serif !important;
}

.lbcq-root h2,
.lbcq-root h3{
    font-family:"Cormorant Garamond",Georgia,serif !important;
}

.lbcq-backdrop{
    position:fixed !important;
    inset:0 !important;
    background:rgba(52,39,46,.48) !important;
    pointer-events:auto !important;
}

.lbcq-modal{
    --lbcq-plum:#4c263b;
    --lbcq-dark:#3c1f30;
    --lbcq-soft:#75435c;
    --lbcq-ivory:#f7f1eb;
    --lbcq-cream:#fffaf6;
    --lbcq-rose:#e7d5dc;
    --lbcq-border:#e2d6cf;
    --lbcq-text:#34272e;
    --lbcq-muted:#75646d;

    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(92vw,720px) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fffaf6 !important;
    border:1px solid #cdbcc3 !important;
    border-radius:18px !important;
    box-shadow:0 24px 70px rgba(52,39,46,.25) !important;
    color:#34272e !important;
    pointer-events:auto !important;
}

.lbcq-modal--results{
    width:min(94vw,920px) !important;
}

.lbcq-close{
    position:absolute !important;
    z-index:20 !important;
    top:10px !important;
    right:10px !important;
    width:34px !important;
    height:34px !important;
    margin:0 !important;
    padding:0 0 2px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fffaf6 !important;
    border:1px solid #d8c8cf !important;
    border-radius:50% !important;
    color:#4c263b !important;
    font-size:23px !important;
    line-height:1 !important;
    font-weight:400 !important;
    box-shadow:none !important;
    cursor:pointer !important;
}

.lbcq-close:hover,
.lbcq-close:focus{
    background:#e7d5dc !important;
    border-color:#c8abb8 !important;
    color:#3c1f30 !important;
    outline:none !important;
}

/* =========================================================
   INTRO
========================================================= */

.lbcq-intro{
    padding:30px 32px 28px !important;
    text-align:left !important;
    background:#f7f1eb !important;
}

.lbcq-kicker{
    display:inline-flex !important;
    align-items:center !important;
    min-height:25px !important;
    margin:0 0 8px !important;
    padding:0 10px !important;
    background:#fffaf6 !important;
    border:1px solid #d8c2cc !important;
    border-radius:999px !important;
    color:#75435c !important;
    font-size:8.5px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.11em !important;
    text-transform:uppercase !important;
}

.lbcq-intro h2,
.lbcq-question h2,
.lbcq-loading h2,
.lbcq-resultHead h2{
    margin:0 !important;
    padding:0 !important;
    color:#3c1f30 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
}

.lbcq-intro h2{
    max-width:610px !important;
    font-size:38px !important;
    line-height:1.02 !important;
}

.lbcq-sub{
    max-width:620px !important;
    margin:9px 0 0 !important;
    padding:0 !important;
    color:#75646d !important;
    font-size:13px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
}

.lbcq-badges{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin:15px 0 0 !important;
    padding:0 !important;
}

.lbcq-badges span{
    min-height:27px !important;
    display:inline-flex !important;
    align-items:center !important;
    padding:0 10px !important;
    background:#fffaf6 !important;
    border:1px solid #e2d6cf !important;
    border-radius:999px !important;
    color:#4c263b !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:600 !important;
}

.lbcq-introActions{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:17px 0 0 !important;
    padding:0 !important;
}

/* =========================================================
   BUTTONS
========================================================= */

.lbcq-btn,
.lbcq-done,
.lbcq-back,
.lbcq-link{
    min-height:39px !important;
    margin:0 !important;
    padding:0 16px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    font-size:10.5px !important;
    line-height:1 !important;
    font-weight:700 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:background-color .16s ease,border-color .16s ease,color .16s ease !important;
}

.lbcq-btn{
    background:#4c263b !important;
    border:1px solid #4c263b !important;
    color:#ffffff !important;
}

.lbcq-btn:hover,
.lbcq-btn:focus{
    background:#3c1f30 !important;
    border-color:#3c1f30 !important;
    color:#ffffff !important;
    outline:none !important;
}

.lbcq-link,
.lbcq-back,
.lbcq-done{
    background:#fffaf6 !important;
    border:1px solid #cdbcc3 !important;
    color:#4c263b !important;
}

.lbcq-link:hover,
.lbcq-link:focus,
.lbcq-back:hover,
.lbcq-back:focus,
.lbcq-done:hover,
.lbcq-done:focus{
    background:#e7d5dc !important;
    border-color:#c8abb8 !important;
    color:#3c1f30 !important;
    outline:none !important;
}

.lbcq-back:disabled{
    opacity:.38 !important;
    cursor:not-allowed !important;
}

/* =========================================================
   QUESTIONS — COMPACT / NO SCROLL
========================================================= */

.lbcq-progress{
    width:100% !important;
    height:4px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#e7d5dc !important;
}

.lbcq-progress span{
    display:block !important;
    height:100% !important;
    background:#4c263b !important;
    border-radius:0 !important;
    transition:width .2s ease !important;
}

.lbcq-question{
    padding:24px 28px 25px !important;
    background:#fffaf6 !important;
}

.lbcq-question h2{
    max-width:620px !important;
    font-size:31px !important;
    line-height:1.04 !important;
}

.lbcq-answers{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:14px 0 0 !important;
    padding:0 !important;
}

.lbcq-answer{
    min-width:0 !important;
    min-height:69px !important;
    margin:0 !important;
    padding:11px 12px !important;
    display:block !important;
    text-align:left !important;
    background:#f7f1eb !important;
    border:1px solid #e2d6cf !important;
    border-radius:11px !important;
    color:#34272e !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:background-color .15s ease,border-color .15s ease !important;
}

.lbcq-answer:hover,
.lbcq-answer:focus{
    background:#f1e4e7 !important;
    border-color:#ba9ead !important;
    color:#34272e !important;
    outline:none !important;
}

.lbcq-answer span{
    display:block !important;
    margin:0 !important;
    color:#3c1f30 !important;
    font-size:11.5px !important;
    line-height:1.28 !important;
    font-weight:700 !important;
}

.lbcq-answer small{
    display:block !important;
    margin:4px 0 0 !important;
    color:#75646d !important;
    font-size:9.5px !important;
    line-height:1.35 !important;
    font-weight:400 !important;
}

.lbcq-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    margin:15px 0 0 !important;
    padding:0 !important;
}

/* =========================================================
   LOADING — COMPACT / NO SCROLL
========================================================= */

.lbcq-loading{
    min-height:255px !important;
    padding:34px 32px 30px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    background:#f7f1eb !important;
}

.lbcq-spinner{
    width:34px !important;
    height:34px !important;
    margin:0 0 12px !important;
    border:3px solid #e7d5dc !important;
    border-top-color:#4c263b !important;
    border-radius:50% !important;
    animation:lbcq-spin .8s linear infinite !important;
}

@keyframes lbcq-spin{
    to{transform:rotate(360deg)}
}

.lbcq-loading h2{
    font-size:32px !important;
    line-height:1.04 !important;
}

.lbcq-loading > p:not(.lbcq-kicker){
    max-width:590px !important;
    margin:8px 0 0 !important;
    color:#75646d !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
}

/* =========================================================
   RESULTS — THIS IS THE ONLY SCROLLING VIEW
========================================================= */

.lbcq-resultsScroll{
    width:100% !important;
    max-height:min(84vh,760px) !important;
    margin:0 !important;
    padding:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    background:#fffaf6 !important;
    scrollbar-width:thin !important;
    scrollbar-color:#c5aeb8 #f7f1eb !important;
}

.lbcq-resultsScroll::-webkit-scrollbar{
    width:7px !important;
}

.lbcq-resultsScroll::-webkit-scrollbar-track{
    background:#f7f1eb !important;
}

.lbcq-resultsScroll::-webkit-scrollbar-thumb{
    background:#c5aeb8 !important;
    border-radius:999px !important;
}

.lbcq-resultHead{
    padding:24px 30px 15px !important;
    background:#f7f1eb !important;
    border-bottom:1px solid #e2d6cf !important;
}

.lbcq-resultHead h2{
    max-width:760px !important;
    font-size:35px !important;
    line-height:1.02 !important;
}

.lbcq-resultHead > p:not(.lbcq-kicker){
    max-width:760px !important;
    margin:7px 0 0 !important;
    color:#75646d !important;
    font-size:11.5px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
}

.lbcq-sectionHead{
    margin:0 !important;
    padding:14px 30px 8px !important;
}

.lbcq-sectionHead--guides{
    padding-top:8px !important;
}

.lbcq-sectionHead h3{
    margin:0 !important;
    color:#3c1f30 !important;
    font-size:21px !important;
    line-height:1.05 !important;
    font-weight:600 !important;
}

.lbcq-sectionHead p{
    margin:3px 0 0 !important;
    color:#75646d !important;
    font-size:9.5px !important;
    line-height:1.4 !important;
    font-weight:400 !important;
}

.lbcq-products{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 30px 13px !important;
}

.lbcq-product{
    min-width:0 !important;
    min-height:101px !important;
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
    margin:0 !important;
    padding:9px !important;
    background:#ffffff !important;
    border:1px solid #e2d6cf !important;
    border-radius:11px !important;
    color:#34272e !important;
    text-decoration:none !important;
    box-shadow:none !important;
    transition:border-color .15s ease,background-color .15s ease !important;
}

.lbcq-product:hover,
.lbcq-product:focus{
    background:#fffaf6 !important;
    border-color:#ba9ead !important;
    color:#34272e !important;
    text-decoration:none !important;
    outline:none !important;
}

.lbcq-product__image{
    width:72px !important;
    height:72px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#fffaf6 !important;
    border:1px solid #eee4e7 !important;
    border-radius:9px !important;
}

.lbcq-product__image img{
    display:block !important;
    width:92% !important;
    height:92% !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    border:0 !important;
    box-shadow:none !important;
}

.lbcq-product__content{
    min-width:0 !important;
    display:block !important;
}

.lbcq-product em,
.lbcq-guide em{
    display:inline-flex !important;
    min-height:20px !important;
    align-items:center !important;
    margin:0 0 5px !important;
    padding:0 7px !important;
    background:#e7d5dc !important;
    border-radius:999px !important;
    color:#4c263b !important;
    font-style:normal !important;
    font-size:7.5px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
}

.lbcq-product h3{
    display:-webkit-box !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    margin:0 !important;
    color:#3c1f30 !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:10.5px !important;
    line-height:1.28 !important;
    font-weight:700 !important;
}

.lbcq-price{
    display:block !important;
    margin:3px 0 0 !important;
    color:#4c263b !important;
    font-size:9.5px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
}

.lbcq-product small{
    display:block !important;
    margin:3px 0 0 !important;
    color:#75646d !important;
    font-size:8.5px !important;
    line-height:1.3 !important;
    font-weight:400 !important;
}

.lbcq-guides{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 30px 15px !important;
}

.lbcq-guide{
    min-width:0 !important;
    display:block !important;
    margin:0 !important;
    padding:11px 12px !important;
    background:#f7f1eb !important;
    border:1px solid #e2d6cf !important;
    border-radius:11px !important;
    color:#34272e !important;
    text-decoration:none !important;
    box-shadow:none !important;
    transition:border-color .15s ease,background-color .15s ease !important;
}

.lbcq-guide:hover,
.lbcq-guide:focus{
    background:#f1e4e7 !important;
    border-color:#ba9ead !important;
    color:#34272e !important;
    text-decoration:none !important;
    outline:none !important;
}

.lbcq-guide h3{
    display:-webkit-box !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    margin:0 !important;
    color:#3c1f30 !important;
    font-size:17px !important;
    line-height:1.08 !important;
    font-weight:600 !important;
}

.lbcq-guide p{
    display:-webkit-box !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    margin:5px 0 0 !important;
    color:#75646d !important;
    font-size:9px !important;
    line-height:1.4 !important;
    font-weight:400 !important;
}

.lbcq-guide small{
    display:block !important;
    margin:5px 0 0 !important;
    color:#4c263b !important;
    font-size:8.5px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
}

.lbcq-resultActions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 30px 22px !important;
}

/* =========================================================
   FLOATING BUTTON
========================================================= */

.lbcq-floating{
    position:fixed !important;
    z-index:999997 !important;
    right:22px !important;
    bottom:24px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 16px 0 30px !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    background:#4c263b !important;
    border:1px solid #3c1f30 !important;
    border-radius:999px !important;
    color:#ffffff !important;
    font-size:10.5px !important;
    line-height:1 !important;
    font-weight:700 !important;
    box-shadow:0 10px 26px rgba(52,39,46,.20) !important;
    cursor:pointer !important;
    pointer-events:auto !important;
}

.lbcq-floating::before{
    content:"" !important;
    position:absolute !important;
    left:14px !important;
    width:7px !important;
    height:7px !important;
    background:#e7d5dc !important;
    border-radius:50% !important;
}

.lbcq-floating.is-visible{
    display:inline-flex !important;
}

.lbcq-floating:hover,
.lbcq-floating:focus{
    background:#3c1f30 !important;
    color:#ffffff !important;
    outline:none !important;
}

body.lbcq-lock{
    overflow:hidden !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .lbcq-modal,
    .lbcq-modal--results{
        width:min(94vw,560px) !important;
        border-radius:15px !important;
    }

    .lbcq-close{
        top:8px !important;
        right:8px !important;
        width:31px !important;
        height:31px !important;
        font-size:21px !important;
    }

    .lbcq-intro{
        padding:23px 18px 20px !important;
    }

    .lbcq-intro h2{
        padding-right:22px !important;
        font-size:31px !important;
        line-height:1.02 !important;
    }

    .lbcq-sub{
        font-size:11.5px !important;
        line-height:1.5 !important;
    }

    .lbcq-badges{
        gap:5px !important;
        margin-top:12px !important;
    }

    .lbcq-badges span{
        min-height:24px !important;
        padding:0 8px !important;
        font-size:7.8px !important;
    }

    .lbcq-introActions{
        margin-top:14px !important;
    }

    .lbcq-question{
        padding:18px 14px 16px !important;
    }

    .lbcq-question h2{
        padding-right:22px !important;
        font-size:26px !important;
        line-height:1.03 !important;
    }

    .lbcq-answers{
        grid-template-columns:1fr !important;
        gap:6px !important;
        margin-top:11px !important;
    }

    .lbcq-answer{
        min-height:53px !important;
        padding:8px 10px !important;
        border-radius:9px !important;
    }

    .lbcq-answer span{
        font-size:10.5px !important;
    }

    .lbcq-answer small{
        margin-top:3px !important;
        font-size:8.6px !important;
        line-height:1.28 !important;
    }

    .lbcq-actions{
        margin-top:11px !important;
    }

    .lbcq-btn,
    .lbcq-done,
    .lbcq-back,
    .lbcq-link{
        min-height:36px !important;
        padding:0 13px !important;
        font-size:9.5px !important;
    }

    .lbcq-loading{
        min-height:225px !important;
        padding:27px 20px 23px !important;
    }

    .lbcq-loading h2{
        padding-right:20px !important;
        font-size:27px !important;
    }

    .lbcq-resultsScroll{
        max-height:86dvh !important;
    }

    .lbcq-resultHead{
        padding:20px 15px 13px !important;
    }

    .lbcq-resultHead h2{
        padding-right:24px !important;
        font-size:29px !important;
    }

    .lbcq-resultHead > p:not(.lbcq-kicker){
        font-size:10.5px !important;
    }

    .lbcq-sectionHead{
        padding:12px 15px 7px !important;
    }

    .lbcq-sectionHead h3{
        font-size:19px !important;
    }

    .lbcq-products,
    .lbcq-guides{
        grid-template-columns:1fr !important;
        gap:7px !important;
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .lbcq-product{
        min-height:91px !important;
        grid-template-columns:64px minmax(0,1fr) !important;
        gap:9px !important;
        padding:8px !important;
    }

    .lbcq-product__image{
        width:64px !important;
        height:64px !important;
    }

    .lbcq-guide{
        padding:10px 11px !important;
    }

    .lbcq-guide h3{
        font-size:16px !important;
    }

    .lbcq-resultActions{
        padding:0 15px 17px !important;
    }

    .lbcq-floating{
        right:14px !important;
        bottom:16px !important;
        min-height:38px !important;
        padding-right:14px !important;
        font-size:10px !important;
    }
}

@media(max-width:390px){
    .lbcq-introActions,
    .lbcq-actions{
        align-items:stretch !important;
        flex-direction:column !important;
    }

    .lbcq-introActions .lbcq-btn,
    .lbcq-introActions .lbcq-link,
    .lbcq-actions .lbcq-back,
    .lbcq-actions .lbcq-link{
        width:100% !important;
    }
}