/**
 * UNOSKREATIVOS — PRODUCT QUICK VIEW
 * Archivo: /modules/product-quickview/quick-view.css
 * Versión: 1.2.0
 *
 * Responsabilidad:
 * - Overlay y modal de producto
 * - Galería principal y miniaturas
 * - Información, precio y descripción
 * - Variantes de color y talla
 * - Cantidad
 * - CTA "Agregar al pedido" y "Comprar ahora"
 * - Beneficios / confianza
 * - Responsive desktop, tablet y mobile
 *
 * Reutiliza la identidad visual global:
 * --bg, --bg2, --card, --card2, --line, --white, --muted,
 * --accent, --accent2, --accent-soft, --accent-glow, --green
 */

/* =========================================================
   01. ROOT / OVERLAY
========================================================= */

.product-quickview{
    --pq-bg:#080808;
    --pq-panel:#0d0d0d;
    --pq-panel-2:#111111;
    --pq-line:rgba(255,255,255,.10);
    --pq-line-strong:rgba(204,255,0,.34);
    --pq-text:#f4f4f4;
    --pq-muted:#8e8e8e;
    --pq-accent:var(--accent,#ccff00);
    --pq-accent-2:var(--accent2,#b3e600);
    --pq-green:var(--green,#25d366);
    --pq-shadow:0 34px 110px rgba(0,0,0,.72);
    --pq-radius:24px;
    --pq-radius-sm:14px;
    --pq-focus:0 0 0 3px rgba(204,255,0,.22);

    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.76);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    overscroll-behavior:contain;
}

.product-quickview.is-open{
    display:flex;
}

.product-quickview[hidden]{
    display:none !important;
}

.product-quickview *,
.product-quickview *::before,
.product-quickview *::after{
    box-sizing:border-box;
}

/* =========================================================
   02. DIALOG
========================================================= */

.product-quickview__dialog{
    position:relative;
    width:min(1180px,94vw);
    max-height:min(920px,92vh);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--pq-radius);
    background:
        radial-gradient(circle at 78% 0%,rgba(204,255,0,.035),transparent 28%),
        linear-gradient(145deg,rgba(255,255,255,.018),transparent 38%),
        var(--pq-bg);
    box-shadow:var(--pq-shadow);
    color:var(--pq-text);
    transform:translateY(14px) scale(.992);
    opacity:0;
    transition:
        opacity .24s ease,
        transform .24s cubic-bezier(.2,.7,.2,1);
}

.product-quickview.is-open .product-quickview__dialog{
    transform:translateY(0) scale(1);
    opacity:1;
}

.product-quickview__dialog::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%);
    opacity:.32;
}

.product-quickview__scroll{
    position:relative;
    z-index:1;
    max-height:min(920px,92vh);
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--pq-accent) #111;
}

.product-quickview__scroll::-webkit-scrollbar{
    width:7px;
}

.product-quickview__scroll::-webkit-scrollbar-track{
    background:#111;
}

.product-quickview__scroll::-webkit-scrollbar-thumb{
    background:var(--pq-accent);
    border-radius:999px;
}

/* =========================================================
   03. CLOSE / HANDLE
========================================================= */

.product-quickview__close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:20;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:rgba(10,10,10,.86);
    color:var(--pq-accent);
    cursor:pointer;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:.2s ease;
}

.product-quickview__close:hover,
.product-quickview__close:focus-visible{
    color:#050505;
    border-color:var(--pq-accent);
    background:var(--pq-accent);
    outline:none;
    box-shadow:var(--pq-focus);
}

.product-quickview__close svg{
    width:20px;
    height:20px;
}

.product-quickview__handle{
    display:none;
}

/* =========================================================
   04. MAIN GRID
========================================================= */

.product-quickview__main{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:28px;
    padding:24px 24px 18px;
}

/* =========================================================
   05. GALLERY
========================================================= */

.product-quickview__gallery{
    min-width:0;
}

.product-quickview__stage{
    position:relative;
    overflow:hidden;
    aspect-ratio:1 / 1;
    border:1px solid var(--pq-line);
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 28%,rgba(204,255,0,.06),transparent 33%),
        #111;
}

.product-quickview__main-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
}

.product-quickview__badge{
    position:absolute;
    top:14px;
    left:14px;
    z-index:3;
    min-height:28px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:var(--pq-accent);
    color:#050505;
    font-size:9px;
    font-weight:950;
    letter-spacing:.75px;
    text-transform:uppercase;
}

.product-quickview__gallery-arrow{
    position:absolute;
    top:50%;
    z-index:4;
    width:44px;
    height:44px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    border:1px solid var(--pq-accent);
    border-radius:50%;
    background:rgba(5,5,5,.76);
    color:var(--pq-accent);
    cursor:pointer;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:.2s ease;
}

.product-quickview__gallery-arrow:hover,
.product-quickview__gallery-arrow:focus-visible{
    color:#050505;
    background:var(--pq-accent);
    outline:none;
    box-shadow:var(--pq-focus);
}

.product-quickview__gallery-arrow--prev{
    left:14px;
}

.product-quickview__gallery-arrow--next{
    right:14px;
}

.product-quickview__gallery-arrow svg{
    width:18px;
    height:18px;
}

.product-quickview__zoom{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:4;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--pq-accent);
    border-radius:50%;
    background:rgba(5,5,5,.78);
    color:var(--pq-accent);
    cursor:pointer;
    transition:.2s ease;
}

.product-quickview__zoom:hover,
.product-quickview__zoom:focus-visible{
    color:#050505;
    background:var(--pq-accent);
    outline:none;
}

.product-quickview__zoom svg{
    width:18px;
    height:18px;
}

.product-quickview__thumbs-wrap{
    position:relative;
    margin-top:14px;
}

.product-quickview__thumbs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:2px 2px 6px;
    scrollbar-width:thin;
    scrollbar-color:var(--pq-accent) #111;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
}

.product-quickview__thumbs::-webkit-scrollbar{
    height:5px;
}

.product-quickview__thumb{
    flex:0 0 86px;
    width:86px;
    aspect-ratio:1 / 1;
    padding:0;
    overflow:hidden;
    border:1px solid var(--pq-line);
    border-radius:12px;
    background:#111;
    cursor:pointer;
    scroll-snap-align:start;
    transition:.2s ease;
}

.product-quickview__thumb:hover,
.product-quickview__thumb:focus-visible,
.product-quickview__thumb.is-active{
    border-color:var(--pq-accent);
    outline:none;
    box-shadow:0 0 0 2px rgba(204,255,0,.10);
}

.product-quickview__thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================================================
   06. INFO
========================================================= */

.product-quickview__info{
    min-width:0;
    padding:10px 8px 0 0;
}

.product-quickview__eyebrow{
    display:block;
    margin-bottom:8px;
    color:var(--pq-accent);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.product-quickview__title{
    margin:0 46px 10px 0;
    color:#fff;
    font-size:clamp(2rem,3vw,3rem);
    line-height:.98;
    font-weight:950;
    letter-spacing:-1.5px;
}

.product-quickview__rating{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
}

.product-quickview__stars{
    display:flex;
    gap:2px;
    color:var(--pq-accent);
}

.product-quickview__stars svg{
    width:16px;
    height:16px;
}

.product-quickview__rating-text{
    color:#9a9a9a;
    font-size:11px;
}

.product-quickview__price-block{
    margin:0 0 16px;
}

.product-quickview__price-caption{
    display:block;
    margin-bottom:5px;
    color:#777;
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.product-quickview__price-detail{
    display:block;
    margin-top:6px;
    color:#9b9b9b;
    font-size:10px;
    line-height:1.4;
}

.product-quickview__price{
    margin:0;
    color:var(--pq-accent);
    font-size:clamp(1.8rem,3vw,2.45rem);
    line-height:1;
    font-weight:950;
    letter-spacing:-1px;
}

.product-quickview__description{
    margin:0;
    color:#d0d0d0;
    font-size:13px;
    line-height:1.62;
}

.product-quickview__divider{
    height:1px;
    margin:20px 0;
    background:var(--pq-line);
}

/* =========================================================
   07. OPTIONS / LABELS
========================================================= */

.product-quickview__group{
    margin:0 0 18px;
}

.product-quickview__group[hidden]{
    display:none !important;
}

.product-quickview__label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.product-quickview__label{
    color:#f2f2f2;
    font-size:11px;
    font-weight:950;
    letter-spacing:.55px;
    text-transform:uppercase;
}

.product-quickview__selection{
    color:#a9a9a9;
    font-size:11px;
    font-weight:700;
}

.product-quickview__selection strong{
    color:#fff;
}

/* =========================================================
   08. COLOR + TALLA / MEDIDA — SELECTORES
========================================================= */

.product-quickview__variant-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:2px;
}

.product-quickview__variant-grid .product-quickview__group{
    min-width:0;
}

.product-quickview__select-wrap{
    position:relative;
}

.product-quickview__select-wrap::after{
    content:"";
    position:absolute;
    top:50%;
    right:16px;
    width:8px;
    height:8px;
    border-right:2px solid var(--pq-accent);
    border-bottom:2px solid var(--pq-accent);
    transform:translateY(-68%) rotate(45deg);
    pointer-events:none;
}

.product-quickview__select{
    width:100%;
    min-height:48px;
    padding:0 44px 0 14px;
    border:1px solid #343434;
    border-radius:10px;
    background:#0b0b0b;
    color:#f1f1f1;
    font:inherit;
    font-size:11px;
    font-weight:800;
    outline:none;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.product-quickview__select:hover{
    border-color:rgba(204,255,0,.46);
}

.product-quickview__select:focus{
    border-color:var(--pq-accent);
    box-shadow:var(--pq-focus);
    background:#0f0f0f;
}

.product-quickview__select:disabled{
    color:#777;
    cursor:not-allowed;
    background:#090909;
    border-color:#292929;
}

.product-quickview__select-wrap:has(.product-quickview__select:disabled)::after{
    opacity:.35;
}

.product-quickview__select option{
    color:#f2f2f2;
    background:#0b0b0b;
}

/* =========================================================
   10. QUANTITY
========================================================= */

.product-quickview__qty-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.product-quickview__qty{
    display:inline-grid;
    grid-template-columns:44px 54px 44px;
    min-height:44px;
    overflow:hidden;
    border:1px solid #333;
    border-radius:10px;
    background:#0b0b0b;
}

.product-quickview__qty button{
    border:0;
    background:#101010;
    color:var(--pq-accent);
    font:inherit;
    font-size:18px;
    cursor:pointer;
    transition:.2s ease;
}

.product-quickview__qty button:hover,
.product-quickview__qty button:focus-visible{
    background:var(--pq-accent);
    color:#050505;
    outline:none;
}

.product-quickview__qty button:disabled{
    opacity:.3;
    cursor:not-allowed;
}

.product-quickview__qty-value{
    display:grid;
    place-items:center;
    border-inline:1px solid #292929;
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.product-quickview__stock{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#9f9f9f;
    font-size:10px;
}

.product-quickview__stock::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#6e6e6e;
}

.product-quickview__stock.is-available{
    color:#bfcfbf;
}

.product-quickview__stock.is-available::before{
    background:#42c961;
    box-shadow:0 0 0 3px rgba(66,201,97,.12);
}

.product-quickview__stock.is-low{
    color:#e8d493;
}

.product-quickview__stock.is-low::before{
    background:#e0b22b;
}

.product-quickview__stock.is-out{
    color:#e49b9b;
}

.product-quickview__stock.is-out::before{
    background:#dc4d4d;
}

/* =========================================================
   11. VALIDATION MESSAGE
========================================================= */

.product-quickview__message{
    display:none;
    margin:12px 0 0;
    padding:11px 13px;
    border:1px solid rgba(204,255,0,.24);
    border-radius:10px;
    background:rgba(204,255,0,.055);
    color:#d9e8a6;
    font-size:10px;
    line-height:1.45;
}

.product-quickview__message.is-visible{
    display:block;
}

.product-quickview__message.is-error{
    border-color:rgba(255,92,92,.28);
    background:rgba(255,92,92,.055);
    color:#efb1b1;
}

.product-quickview__message.is-success{
    border-color:rgba(37,211,102,.32);
    background:rgba(37,211,102,.06);
    color:#bdeacb;
}

/* =========================================================
   12. ACTIONS
========================================================= */

.product-quickview__actions{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.product-quickview__cta{
    width:100%;
    min-height:56px;
    padding:0 18px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font:inherit;
    font-size:11px;
    font-weight:950;
    letter-spacing:.7px;
    text-transform:uppercase;
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.product-quickview__cta svg{
    width:19px;
    height:19px;
}

.product-quickview__cta:hover{
    transform:translateY(-1px);
}

.product-quickview__cta:focus-visible{
    outline:none;
    box-shadow:var(--pq-focus);
}

.product-quickview__cta--add{
    border:1px solid var(--pq-accent);
    background:var(--pq-accent);
    color:#050505;
    box-shadow:0 12px 34px rgba(204,255,0,.12);
}

.product-quickview__cta--add:hover{
    background:var(--pq-accent-2);
    border-color:var(--pq-accent-2);
}

.product-quickview__cta--buy{
    border:1px solid rgba(255,255,255,.17);
    background:#0b0b0b;
    color:#fff;
}

.product-quickview__cta--buy:hover{
    border-color:rgba(204,255,0,.42);
    color:var(--pq-accent);
    background:#101010;
}

.product-quickview__cta:disabled{
    opacity:.34;
    transform:none;
    cursor:not-allowed;
}

/* =========================================================
   13. BENEFITS
========================================================= */

.product-quickview__benefits{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    margin:4px 24px 24px;
    border:1px solid var(--pq-line);
    border-radius:14px;
    background:#0b0b0b;
    overflow:hidden;
}

.product-quickview__benefit{
    min-width:0;
    padding:15px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    color:#d4d4d4;
    font-size:9px;
    line-height:1.35;
}

.product-quickview__benefit + .product-quickview__benefit{
    border-left:1px solid var(--pq-line);
}

.product-quickview__benefit-icon{
    flex:0 0 auto;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    color:var(--pq-accent);
}

.product-quickview__benefit-icon svg{
    width:23px;
    height:23px;
}

/* =========================================================
   14. FULLSCREEN IMAGE VIEWER
========================================================= */

.product-quickview__lightbox{
    position:fixed;
    inset:0;
    z-index:10020;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(0,0,0,.94);
}

.product-quickview__lightbox.is-open{
    display:flex;
}

.product-quickview__lightbox img{
    max-width:min(1200px,92vw);
    max-height:88vh;
    object-fit:contain;
}

.product-quickview__lightbox-close{
    position:absolute;
    top:20px;
    right:20px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:#0b0b0b;
    color:var(--pq-accent);
    cursor:pointer;
}

/* =========================================================
   15. TABLET
========================================================= */

@media (max-width:980px){
    .product-quickview{
        padding:16px;
    }

    .product-quickview__dialog{
        width:min(920px,96vw);
    }

    .product-quickview__main{
        grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
        gap:20px;
        padding:20px 20px 16px;
    }

    .product-quickview__title{
        font-size:2rem;
    }

    .product-quickview__benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .product-quickview__benefit:nth-child(3){
        border-left:0;
        border-top:1px solid var(--pq-line);
    }

    .product-quickview__benefit:nth-child(4){
        border-top:1px solid var(--pq-line);
    }
}

/* =========================================================
   16. MOBILE / BOTTOM SHEET
========================================================= */

@media (max-width:760px){
    .product-quickview{
        align-items:flex-end;
        padding:0;
        background:rgba(0,0,0,.70);
        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px);
    }

    .product-quickview__dialog{
        width:100%;
        max-height:96dvh;
        border-radius:26px 26px 0 0;
        border-inline:1px solid rgba(255,255,255,.13);
        border-bottom:0;
        transform:translateY(32px);
    }

    .product-quickview.is-open .product-quickview__dialog{
        transform:translateY(0);
    }

    .product-quickview__scroll{
        max-height:96dvh;
    }

    .product-quickview__handle{
        position:sticky;
        top:0;
        z-index:18;
        display:flex;
        justify-content:center;
        padding:11px 0 2px;
        background:
            linear-gradient(180deg,#0b0b0b 74%,rgba(11,11,11,0));
    }

    .product-quickview__handle::before{
        content:"";
        width:48px;
        height:5px;
        border-radius:999px;
        background:#555;
    }

    .product-quickview__close{
        position:fixed;
        top:auto;
        right:14px;
        margin-top:8px;
        width:42px;
        height:42px;
    }

    .product-quickview__main{
        grid-template-columns:1fr;
        gap:18px;
        padding:12px 14px 14px;
    }

    .product-quickview__gallery{
        padding-top:2px;
    }

    .product-quickview__stage{
        border-radius:15px;
    }

    .product-quickview__info{
        padding:0;
    }

    .product-quickview__title{
        margin-right:48px;
        font-size:clamp(1.8rem,8vw,2.45rem);
        line-height:1;
    }

    .product-quickview__price{
        font-size:2rem;
    }

    .product-quickview__description{
        font-size:12px;
        line-height:1.55;
    }

    .product-quickview__variant-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .product-quickview__select{
        min-height:50px;
        font-size:12px;
    }

    .product-quickview__thumb{
        flex-basis:78px;
        width:78px;
    }

    .product-quickview__gallery-arrow{
        width:40px;
        height:40px;
    }

    .product-quickview__zoom{
        width:40px;
        height:40px;
    }

    .product-quickview__benefits{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin:0 14px 18px;
        border-radius:12px;
    }

    .product-quickview__benefit{
        padding:13px 10px;
        font-size:8.5px;
    }

    .product-quickview__cta{
        min-height:56px;
        font-size:10.5px;
    }
}

/* =========================================================
   17. MOBILE PEQUEÑO
========================================================= */

@media (max-width:430px){
    .product-quickview__main{
        padding-inline:12px;
    }

    .product-quickview__stage{
        aspect-ratio:1 / 1.06;
    }

    .product-quickview__title{
        font-size:1.85rem;
    }

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

    .product-quickview__group{
        margin-bottom:16px;
    }

    .product-quickview__size{
        min-width:47px;
        min-height:40px;
    }

    .product-quickview__qty{
        grid-template-columns:42px 50px 42px;
    }

    .product-quickview__benefit{
        align-items:flex-start;
        gap:7px;
    }

    .product-quickview__benefit-icon{
        width:24px;
        height:24px;
    }

    .product-quickview__benefit-icon svg{
        width:20px;
        height:20px;
    }
}

/* =========================================================
   18. ACCESSIBILITY / USER PREFERENCES
========================================================= */

.product-quickview__visually-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

body.product-quickview-lock{
    overflow:hidden !important;
    touch-action:none;
}

@media (prefers-reduced-motion:reduce){
    .product-quickview *,
    .product-quickview *::before,
    .product-quickview *::after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}

@media (prefers-contrast:more){
    .product-quickview__dialog,
    .product-quickview__stage,
    .product-quickview__benefits,
    .product-quickview__size,
    .product-quickview__qty{
        border-color:#5a5a5a;
    }

    .product-quickview__cta--add,
    .product-quickview__color.is-active,
    .product-quickview__size.is-active{
        border-color:var(--pq-accent);
    }
}


/* =========================================================
   19. FALLBACK DE IMAGEN + MEJORAS UX v1.2
========================================================= */

.product-quickview__main-image[src^="data:image/svg+xml"],
.product-quickview__thumb img[src^="data:image/svg+xml"]{
    object-fit:cover;
    background:#0b0b0b;
}

.product-quickview__price-detail{
    min-height:1.4em;
}

.product-quickview__group[hidden]{
    display:none !important;
}

@media(max-width:760px){
    .product-quickview__price-detail{
        font-size:10px;
    }
}