:root{
    --sq-accent:#6c5ce7;--sq-a2:#a29bfe;--sq-ar:108,92,231;
    --sq-gold:#f0a500;--sq-ok:#00b894;--sq-err:#d63031;--sq-warn:#e17055;
    --sq-bg:#fff;--sq-soft:#f8f7ff;--sq-img:#f3f2ff;
    --sq-border:#e8e6ff;--sq-b2:#ede9fe;
    --sq-txt:#1a1a2e;--sq-mid:#4a4a6a;--sq-sub:#8888aa;--sq-muted:#b8b8cc;
    --sq-r:22px;--sq-font:"Vazirmatn","Tahoma",sans-serif;
    --sq-ease:cubic-bezier(.4,0,.2,1);
    --sq-spring:cubic-bezier(.34,1.45,.64,1);
    --sq-bounce:cubic-bezier(.68,-0.55,.27,1.55);
}


@keyframes sqOrb{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-16px) scale(1.06);}
}
@keyframes sqPop{
    0%{transform:scale(0) rotate(-15deg);opacity:0;}
    60%{transform:scale(1.12) rotate(3deg);opacity:1;}
    100%{transform:scale(1) rotate(0deg);opacity:1;}
}
@keyframes sqFU{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes sqFD{
    from{opacity:0;transform:translateY(-8px);}
    to{opacity:1;transform:translateY(0);}
}
@keyframes sqPP{
    0%{opacity:0;transform:translateY(8px) scale(.96);}
    100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes sqPulse{
    0%{box-shadow:0 0 0 0 rgba(0,184,148,.5);}
    70%{box-shadow:0 0 0 8px rgba(0,184,148,0);}
    100%{box-shadow:0 0 0 0 rgba(0,184,148,0);}
}
@keyframes sqSpin{to{transform:rotate(360deg);}}
@keyframes sqShim{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
}
@keyframes sqRipple{
    0%{transform:translate(-50%,-50%) scale(0);opacity:.5;}
    100%{transform:translate(-50%,-50%) scale(4);opacity:0;}
}
@keyframes sqGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(var(--sq-ar),0);}
    50%{box-shadow:0 0 0 6px rgba(var(--sq-ar),.15);}
}
@keyframes sqSlideIn{
    from{opacity:0;transform:translateX(10px);}
    to{opacity:1;transform:translateX(0);}
}


#spqv-ov{
    display:none;position:fixed;inset:0;z-index:999990;
    background:rgba(15,10,40,.55);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    opacity:0;transition:opacity .3s var(--sq-ease);
    align-items:center;justify-content:center;
}
#spqv-ov.sq-on{display:flex;}
#spqv-ov.sq-vis{opacity:1;}

#spqv-modal{
    position:relative;width:96%;max-width:1000px;max-height:90vh;
    background:var(--sq-bg);border-radius:var(--sq-r);
    border:1px solid var(--sq-border);
    box-shadow:
        0 32px 80px rgba(var(--sq-ar),.18),
        0 8px 24px rgba(0,0,0,.08),
        0 0 0 1px rgba(var(--sq-ar),.06);
    display:flex;flex-direction:column;overflow:hidden;
    transform:translateY(32px) scale(.95);opacity:0;
    transition:transform .42s var(--sq-spring),opacity .28s var(--sq-ease);
    will-change:transform,opacity;font-family:var(--sq-font);
}
#spqv-modal.sq-open{transform:translateY(0) scale(1);opacity:1;}
body.rtl #spqv-modal,[dir=rtl] #spqv-modal{direction:rtl;text-align:right;}


#spqv-x{
    position:absolute;top:14px;right:14px;z-index:200;
    width:34px;height:34px;border-radius:50%;
    background:var(--sq-soft);
    border:1.5px solid var(--sq-border);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--sq-sub);padding:0;
    transition:
        background .22s var(--sq-ease),
        border-color .22s var(--sq-ease),
        color .22s var(--sq-ease),
        transform .32s var(--sq-spring),
        box-shadow .22s var(--sq-ease);
    outline:none;
}
#spqv-x:hover{
    background:rgba(var(--sq-ar),.1);
    border-color:rgba(var(--sq-ar),.4);
    color:var(--sq-accent);
    transform:rotate(90deg) scale(1.12);
    box-shadow:0 0 0 5px rgba(var(--sq-ar),.1);
}
#spqv-modal #spqv-x:focus-visible{
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 5px rgba(var(--sq-ar),.42);
    border-color:var(--sq-accent);
}
body.rtl #spqv-x,[dir=rtl] #spqv-x{right:auto;left:14px;}


#spqv-inner{
    display:grid;grid-template-columns:1.05fr 1fr;
    min-height:500px;overflow:hidden;
}


#spqv-img-col{
    background:var(--sq-img);
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
}
#spqv-img-col::before{
    content:"";position:absolute;top:-60px;right:-60px;
    width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(var(--sq-ar),.12),transparent 70%);
    pointer-events:none;
    animation:sqOrb 7s ease-in-out infinite;
}
#spqv-img-col::after{
    content:"";position:absolute;bottom:-50px;left:-50px;
    width:220px;height:220px;border-radius:50%;
    background:radial-gradient(circle,rgba(240,165,0,.1),transparent 70%);
    pointer-events:none;
    animation:sqOrb 9s ease-in-out infinite reverse;
}


#spqv-badge{
    position:absolute;top:16px;left:16px;
    background:linear-gradient(135deg,var(--sq-gold),#ffcc5c);
    color:#fff;border-radius:30px;padding:4px 14px;
    font-size:10px;font-weight:900;letter-spacing:1.5px;
    text-transform:uppercase;display:none;z-index:10;
    box-shadow:0 4px 16px rgba(240,165,0,.4);
    animation:sqPop .4s var(--sq-spring);
}
body.rtl #spqv-badge,[dir=rtl] #spqv-badge{left:auto;right:16px;}


#spqv-img-wrap{
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:36px 30px 14px;position:relative;z-index:1;
    min-height:290px;cursor:zoom-in;overflow:hidden;
}
#spqv-img{
    max-width:100%;max-height:340px;object-fit:contain;display:block;
    transition:
        transform .4s var(--sq-ease),
        opacity .24s ease,
        filter .4s var(--sq-ease);
    filter:drop-shadow(0 12px 32px rgba(var(--sq-ar),.14));
    will-change:transform;
}
#spqv-img-wrap:hover #spqv-img{
    transform:scale(1.06) translateY(-5px);
    filter:drop-shadow(0 22px 48px rgba(var(--sq-ar),.22));
}


#spqv-thumbs{
    z-index:1;display:flex;gap:8px;
    padding:0 18px 18px;justify-content:center;flex-wrap:wrap;
}
.sq-thumb{
    width:54px;height:54px;object-fit:cover;border-radius:10px;
    cursor:pointer;flex-shrink:0;background:#fff;
    border:2px solid transparent;padding:2px;opacity:.55;
    transition:
        transform .28s var(--sq-spring),
        border-color .22s var(--sq-ease),
        box-shadow .22s var(--sq-ease),
        opacity .22s var(--sq-ease);
    outline:none;
}
#spqv-modal .sq-thumb:hover{
    border-color:var(--sq-a2);opacity:.95;
    transform:translateY(-4px) scale(1.1);
    box-shadow:
        0 10px 22px rgba(var(--sq-ar),.24),
        0 0 0 1px rgba(var(--sq-ar),.08);
}
#spqv-modal .sq-thumb:focus-visible{
    border-color:var(--sq-accent);opacity:1;
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 4px rgba(var(--sq-ar),.35);
}
#spqv-modal .sq-thumb.sq-active{
    border-color:var(--sq-accent);opacity:1;
    transform:translateY(-4px) scale(1.1);
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 4px var(--sq-accent),
        0 10px 24px rgba(var(--sq-ar),.3);
}


#spqv-info-col{
    display:flex;flex-direction:column;overflow:hidden;
    background:var(--sq-bg);
    border-left:1px solid var(--sq-border);
}
body.rtl #spqv-info-col,[dir=rtl] #spqv-info-col{
    border-left:none;border-right:1px solid var(--sq-border);
}

#spqv-scroll{
    flex:1;overflow-y:auto;padding:32px 26px 16px;
    display:flex;flex-direction:column;gap:14px;
    scrollbar-width:thin;scrollbar-color:var(--sq-border) transparent;
}
#spqv-scroll::-webkit-scrollbar{width:3px;}
#spqv-scroll::-webkit-scrollbar-thumb{
    background:var(--sq-border);border-radius:10px;
    transition:background .2s;
}
#spqv-scroll::-webkit-scrollbar-thumb:hover{background:var(--sq-a2);}


#spqv-title{
    font-size:1.16rem;font-weight:800;color:var(--sq-txt);
    line-height:1.5;margin:0;padding-top:4px;
    animation:sqFU .34s var(--sq-ease) both;
}


#spqv-rating{
    display:flex;align-items:center;gap:7px;min-height:20px;
    animation:sqFU .34s .05s var(--sq-ease) both;
}
.spqv-stars{display:flex;gap:3px;}
.spqv-star{
    font-size:13px;
    transition:transform .22s var(--sq-spring),color .18s;
    cursor:default;
}
.spqv-star:hover{transform:scale(1.4) rotate(-5deg);}
.spqv-star.filled{color:var(--sq-gold);}
.spqv-star.empty{color:var(--sq-border);}
.spqv-rc{font-size:11px;color:var(--sq-muted);font-weight:600;}


#spqv-price-block{
    background:linear-gradient(135deg,var(--sq-soft),#f0eeff);
    border:1.5px solid var(--sq-b2);border-radius:16px;
    padding:12px 20px;min-height:64px;
    display:flex;flex-direction:column;
    align-items:flex-start;justify-content:center;
    position:relative;overflow:hidden;
    animation:sqFU .34s .08s var(--sq-ease) both;
    transition:
        border-color .25s var(--sq-ease),
        box-shadow .25s var(--sq-ease),
        transform .25s var(--sq-spring);
}
#spqv-price-block::before{
    content:"";position:absolute;top:0;right:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--sq-accent),var(--sq-a2));
    border-radius:0 16px 16px 0;
    transition:width .25s var(--sq-ease);
}
#spqv-price-block:hover{
    border-color:rgba(var(--sq-ar),.35);
    box-shadow:0 4px 20px rgba(var(--sq-ar),.1);
    transform:translateY(-1px);
}
#spqv-price-block:hover::before{width:5px;}
body.rtl #spqv-price-block::before,[dir=rtl] #spqv-price-block::before{
    right:auto;left:0;border-radius:16px 0 0 16px;
}
.sq-price-lbl{
    font-size:9px;color:var(--sq-muted);font-weight:800;
    letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;
}
#spqv-price{
    font-size:1.36rem;font-weight:800;color:var(--sq-accent);
    line-height:1.4;display:block;overflow-wrap:break-word;
}
#spqv-price ins{text-decoration:none;color:var(--sq-accent);}
#spqv-price del{
    font-size:.7em;font-weight:500;color:var(--sq-muted);
    text-decoration:line-through;margin-inline-start:4px;
}
#spqv-price.sq-pp{animation:sqPP .32s var(--sq-ease);}


#spqv-stock{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12px;font-weight:700;padding:5px 13px;
    border-radius:30px;width:fit-content;
    animation:sqFU .34s .1s var(--sq-ease) both;
    transition:transform .22s var(--sq-spring),box-shadow .22s;
}
#spqv-stock::before{
    content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
#spqv-stock.sq-ok{
    background:rgba(0,184,148,.09);color:#00876a;
    border:1px solid rgba(0,184,148,.22);
}
#spqv-stock.sq-ok::before{
    background:var(--sq-ok);
    animation:sqPulse 2s ease-in-out infinite;
}
#spqv-stock.sq-no{
    background:rgba(214,48,49,.07);color:var(--sq-err);
    border:1px solid rgba(214,48,49,.2);
}
#spqv-stock.sq-no::before{background:var(--sq-err);}


#spqv-desc{
    font-size:13px;color:var(--sq-mid);line-height:1.85;
    border-top:1px solid var(--sq-border);padding-top:12px;
    animation:sqFU .34s .12s var(--sq-ease) both;
}
#spqv-desc p{margin:0 0 5px;}


#spqv-meta{
    display:flex;flex-direction:column;gap:5px;
    animation:sqFU .34s .14s var(--sq-ease) both;
}
.sq-mr{
    display:flex;align-items:center;gap:9px;font-size:12px;
    padding:3px 0;
    transition:transform .2s var(--sq-ease);
}
.sq-mr:hover{transform:translateX(-3px);}
body.rtl .sq-mr:hover,[dir=rtl] .sq-mr:hover{transform:translateX(3px);}
.sq-ml{color:var(--sq-muted);font-weight:700;min-width:72px;}
.sq-mv{color:var(--sq-mid);font-weight:500;}

.sq-div{
    height:1px;
    background:linear-gradient(90deg,transparent,var(--sq-border),transparent);
    margin:2px 0;
}


#spqv-form{
    display:flex;flex-direction:column;gap:16px;
    animation:sqFU .34s .16s var(--sq-ease) both;
}


.sq-attr{display:flex;flex-direction:column;gap:9px;}
.sq-attr-hdr{display:flex;align-items:center;justify-content:space-between;}
.sq-attr-tw{display:flex;align-items:center;gap:8px;}
.sq-attr-lbl{
    font-size:10px;font-weight:900;color:var(--sq-mid);
    text-transform:uppercase;letter-spacing:1px;
}
.sq-attr-cur{
    font-size:11px;font-weight:700;color:var(--sq-accent);
    background:rgba(var(--sq-ar),.08);
    border:1px solid rgba(var(--sq-ar),.2);
    padding:2px 10px;border-radius:20px;display:none;
    animation:sqSlideIn .22s var(--sq-spring);
}
.sq-rst{
    font-size:11px;color:var(--sq-muted);
    text-decoration:none;border:none;background:none;
    cursor:pointer;padding:2px 6px;border-radius:6px;
    display:none;
    transition:color .18s,background .18s,transform .2s var(--sq-spring);
    outline:none;
}
.sq-rst:hover{
    color:var(--sq-err);
    background:rgba(214,48,49,.08);
    transform:scale(1.05);
}
.sq-rst:focus-visible{
    box-shadow:0 0 0 2px rgba(214,48,49,.3);
    border-radius:6px;
}


.sq-sw{display:flex;flex-wrap:wrap;gap:8px;}


.sq-btn{
    min-width:44px;height:40px;padding:0 14px;
    border:1.5px solid var(--sq-border);border-radius:11px;
    cursor:pointer;font-size:13px;font-weight:700;
    background:var(--sq-bg);color:var(--sq-mid);
    font-family:var(--sq-font);
    display:inline-flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;outline:none;
    box-shadow:0 1px 2px rgba(20,15,60,.05);
    transition:
        border-color .22s var(--sq-ease),
        background .22s var(--sq-ease),
        color .22s var(--sq-ease),
        transform .28s var(--sq-spring),
        box-shadow .28s var(--sq-ease);
}

.sq-btn::before{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:0;height:0;
    background:rgba(var(--sq-ar),.15);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:width .4s var(--sq-ease),height .4s var(--sq-ease),opacity .4s;
    opacity:0;
    pointer-events:none;
}
.sq-btn:active::before{
    width:200px;height:200px;opacity:0;
    transition:width .5s var(--sq-ease),height .5s var(--sq-ease),opacity .5s;
}

.sq-btn::after{
    content:"";
    position:absolute;top:-30%;bottom:-30%;left:-80%;width:50%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.65),transparent);
    transform:skewX(-18deg);
    transition:left .5s var(--sq-ease);
    pointer-events:none;
}

#spqv-modal .sq-btn:hover{
    border-color:rgba(var(--sq-ar),.6);
    color:var(--sq-accent);
    background:linear-gradient(135deg,rgba(var(--sq-ar),.12),rgba(var(--sq-ar),.03));
    transform:translateY(-3px) scale(1.03);
    box-shadow:
        0 12px 26px rgba(var(--sq-ar),.22),
        0 3px 8px rgba(var(--sq-ar),.1),
        0 0 0 1px rgba(var(--sq-ar),.16);
}
#spqv-modal .sq-btn:hover::after{left:130%;}

#spqv-modal .sq-btn:focus-visible{
    border-color:var(--sq-accent);
    color:var(--sq-accent);
    transform:translateY(-2px);
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 5px rgba(var(--sq-ar),.45),
        0 6px 16px rgba(var(--sq-ar),.2);
    outline:none;
}

#spqv-modal .sq-btn:active{
    transform:translateY(0) scale(.94);
    box-shadow:0 0 0 1px rgba(var(--sq-ar),.18);
    transition-duration:.1s;
}

#spqv-modal .sq-btn.sq-sel{
    border-color:var(--sq-accent);
    background:linear-gradient(135deg,rgba(var(--sq-ar),.18),rgba(var(--sq-ar),.06));
    color:var(--sq-accent);
    transform:translateY(-2px);
    box-shadow:
        0 0 0 1.5px var(--sq-accent),
        inset 0 1px 0 rgba(255,255,255,.5),
        0 10px 24px rgba(var(--sq-ar),.28);
}
#spqv-modal .sq-btn.sq-sel:hover{
    box-shadow:
        0 0 0 1.5px var(--sq-accent),
        inset 0 1px 0 rgba(255,255,255,.5),
        0 14px 30px rgba(var(--sq-ar),.34);
}
.sq-btn.sq-dis{
    opacity:.28;cursor:not-allowed;
    text-decoration:line-through;
    transform:none!important;box-shadow:none!important;
}


.sq-clr-wrap{
    display:inline-flex;flex-direction:column;align-items:center;gap:6px;
}
.sq-clr-name{
    font-size:11px;font-weight:600;color:var(--sq-sub);
    max-width:80px;line-height:1.3;text-align:center;
    transition:color .2s var(--sq-ease);
    font-family:var(--sq-font);
}
#spqv-modal .sq-clr-wrap:hover .sq-clr-name{color:var(--sq-accent);}
#spqv-modal .sq-clr-wrap.sq-sel .sq-clr-name{color:var(--sq-accent);font-weight:700;}

/* سواچ دایره‌ای ساده ولی خاص: حلقه‌ای که با هاور از لبه باز می‌شود */
.sq-clr{
    min-width:unset!important;
    width:44px!important;height:44px!important;
    padding:0!important;
    border:1px solid rgba(0,0,0,.06)!important;
    border-radius:50%!important;
    background:#fff!important;
    overflow:visible!important;
    position:relative;
    box-shadow:none!important;
    transition:
        border-color .2s var(--sq-ease),
        transform .25s var(--sq-spring);
}
/* حلقه‌ی دور سواچ */
.sq-clr::before{
    content:"";
    position:absolute;
    inset:1px;
    width:auto;height:auto;
    background:transparent;
    border:2px solid transparent;
    border-radius:50%;
    opacity:1;
    transform:scale(1);
    transition:
        transform .3s var(--sq-spring),
        border-color .2s var(--sq-ease),
        box-shadow .25s var(--sq-ease);
    pointer-events:none;
}
.sq-clr::after{content:none!important;}
.sq-ci{
    display:block;position:absolute;inset:0;
    border-radius:50%;
    background:#e0e0ea;
    transition:filter .2s var(--sq-ease);
    pointer-events:none;
}

#spqv-modal .sq-clr:hover{
    background:#fff!important;
    border-color:transparent!important;
    box-shadow:none!important;
    transform:scale(1.06)!important;
}
#spqv-modal .sq-clr:hover::before{
    border-color:var(--sq-a2);
    transform:scale(1.18);
    box-shadow:0 0 0 1px rgba(var(--sq-ar),.12);
}
#spqv-modal .sq-clr:hover .sq-ci{filter:brightness(1.06);}

#spqv-modal .sq-clr:active{
    transform:scale(.95)!important;
    background:#fff!important;
    box-shadow:none!important;
}
#spqv-modal .sq-clr:active::before{
    width:auto;height:auto;
    transform:scale(1.05);
}
#spqv-modal .sq-clr:active .sq-ci{filter:brightness(.95);}

#spqv-modal .sq-clr:focus-visible{
    border-color:transparent!important;
    box-shadow:none!important;
}
#spqv-modal .sq-clr:focus-visible::before{
    border-color:var(--sq-accent);
    transform:scale(1.18);
    box-shadow:0 0 0 2px rgba(var(--sq-ar),.22);
}

#spqv-modal .sq-clr.sq-sel{
    border-color:transparent!important;
}
#spqv-modal .sq-clr.sq-sel::before{
    border-color:var(--sq-accent);
    transform:scale(1.18);
    box-shadow:0 0 0 1px rgba(var(--sq-ar),.16);
}
#spqv-modal .sq-clr.sq-sel .sq-ci::after{
    content:"✓";
    position:absolute;bottom:-4px;right:-4px;
    width:17px;height:17px;border-radius:50%;
    background:var(--sq-accent);color:#fff;
    font-size:11px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
    line-height:1;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
    animation:sqPop .25s var(--sq-spring);
}

#spqv-modal .sq-btn.sq-dis,
#spqv-modal .sq-btn.sq-dis:hover{
    cursor:not-allowed;
    transform:none!important;
    box-shadow:none!important;
    border-color:var(--sq-border)!important;
    background:var(--sq-bg)!important;
    color:var(--sq-muted)!important;
    opacity:.45!important;
    text-decoration:line-through;
}
#spqv-modal .sq-btn.sq-dis::after{display:none!important;}

#spqv-modal .sq-clr.sq-dis,
#spqv-modal .sq-clr.sq-dis:hover,
#spqv-modal .sq-clr.sq-dis:active{
    cursor:not-allowed;
    transform:none!important;
    border-color:rgba(0,0,0,.06)!important;
    box-shadow:none!important;
    background:#fff!important;
    opacity:1!important;
    text-decoration:none!important;
}
#spqv-modal .sq-clr.sq-dis::before{
    border-color:transparent!important;
    transform:scale(1)!important;
    box-shadow:none!important;
}
#spqv-modal .sq-clr.sq-dis .sq-ci{
    filter:grayscale(1) brightness(1.12);
    opacity:.5;
}
#spqv-modal .sq-clr.sq-dis .sq-ci::after{
    content:"✕";
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    font-size:15px;font-weight:900;line-height:1;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
}
#spqv-modal .sq-clr-wrap.sq-dis .sq-clr-name{
    color:var(--sq-muted);
}

.sq-qty-lbl{
    font-size:10px;font-weight:900;color:var(--sq-mid);
    text-transform:uppercase;letter-spacing:1px;margin-bottom:-2px;
}
.sq-qty{
    display:flex;align-items:center;width:150px;height:48px;
    background:var(--sq-bg);
    border:1.5px solid var(--sq-border);border-radius:14px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(20,15,60,.05);
    transition:
        border-color .22s var(--sq-ease),
        box-shadow .22s var(--sq-ease),
        transform .22s var(--sq-spring);
}
#spqv-modal .sq-qty:focus-within{
    border-color:var(--sq-accent);
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 5px rgba(var(--sq-ar),.25),
        0 8px 20px rgba(var(--sq-ar),.14);
    transform:translateY(-1px);
}
.sq-qb{
    width:46px;height:100%;border:none;
    background:transparent;
    color:var(--sq-muted);font-size:20px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:
        background .2s var(--sq-ease),
        color .2s var(--sq-ease),
        transform .2s var(--sq-spring);
    flex-shrink:0;padding:0;line-height:1;
    font-family:var(--sq-font);outline:none;
    position:relative;overflow:hidden;
}
#spqv-modal .sq-qb:hover{
    background:linear-gradient(135deg,rgba(var(--sq-ar),.14),rgba(var(--sq-ar),.05));
    color:var(--sq-accent);
    transform:scale(1.08);
}
#spqv-modal .sq-qb:focus-visible{
    background:rgba(var(--sq-ar),.12);
    color:var(--sq-accent);
    box-shadow:inset 0 0 0 2px rgba(var(--sq-ar),.5);
}
.sq-qb:active{transform:scale(.86);}
.sq-qi{
    flex:1;height:100%;border:none;text-align:center;
    font-size:16px;font-weight:800;color:var(--sq-txt);
    background:transparent;padding:0;outline:none;
    font-family:var(--sq-font);
    transition:color .18s;
}
.sq-qi:focus{color:var(--sq-accent);}


.sq-msg{
    display:none;align-items:center;gap:8px;
    padding:10px 14px;border-radius:11px;
    font-size:13px;font-weight:600;
    line-height:1.5;font-family:var(--sq-font);
    animation:sqFU .26s var(--sq-spring);
}
.sq-msg.sq-ok-m{
    background:rgba(0,184,148,.08);color:#00876a;
    border:1px solid rgba(0,184,148,.22);display:flex;
}
.sq-msg.sq-err-m{
    background:rgba(214,48,49,.07);color:var(--sq-err);
    border:1px solid rgba(214,48,49,.2);display:flex;
}
.sq-msg.sq-warn-m{
    background:rgba(225,112,85,.07);color:var(--sq-warn);
    border:1px solid rgba(225,112,85,.2);display:flex;
}


#spqv-foot{
    padding:14px 26px 20px;background:var(--sq-bg);
    border-top:1px solid var(--sq-border);flex-shrink:0;
    display:flex;flex-direction:column;gap:10px;
}


.sq-atc{
    width:100%;height:52px;
    background:linear-gradient(135deg,#7c6fef,var(--sq-accent) 45%,#8b7cf8);
    background-size:200% 200%;background-position:0% 0%;
    color:#fff;border:none;border-radius:14px;
    font-size:15px;font-weight:800;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--sq-font);letter-spacing:.3px;
    position:relative;overflow:hidden;outline:none;
    box-shadow:0 6px 24px rgba(var(--sq-ar),.32);
    transition:
        background-position .5s var(--sq-ease),
        transform .28s var(--sq-spring),
        box-shadow .28s var(--sq-ease),
        opacity .2s;
}

.sq-atc::before{
    content:"";position:absolute;top:0;left:-100%;
    width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
    transition:left .6s var(--sq-ease);
    pointer-events:none;
}

.sq-atc::after{
    content:"";position:absolute;inset:-2px;border-radius:16px;
    background:transparent;
    transition:box-shadow .28s var(--sq-ease);
    pointer-events:none;
}
#spqv-modal .sq-atc:not(:disabled):hover{
    background-position:100% 100%;
    transform:translateY(-3px) scale(1.01);
    box-shadow:
        0 18px 44px rgba(var(--sq-ar),.5),
        0 6px 14px rgba(var(--sq-ar),.22);
}
#spqv-modal .sq-atc:not(:disabled):hover::before{left:100%;}
#spqv-modal .sq-atc:not(:disabled):hover::after{
    box-shadow:0 0 0 6px rgba(var(--sq-ar),.16);
}
#spqv-modal .sq-atc:not(:disabled):focus-visible{
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 5.5px rgba(var(--sq-ar),.42),
        0 10px 30px rgba(var(--sq-ar),.34);
    transform:translateY(-2px);
}
.sq-atc:not(:disabled):active{
    transform:translateY(0) scale(.97);
    box-shadow:0 4px 14px rgba(var(--sq-ar),.24);
    transition-duration:.12s;
}
.sq-atc:disabled{
    background:linear-gradient(135deg,#dddaff,#ccc9f0);
    color:var(--sq-muted);box-shadow:none;cursor:not-allowed;
}
.sq-atc svg{width:18px;height:18px;stroke-width:2.2;flex-shrink:0;}
.sq-spin{
    width:18px;height:18px;
    border:2.5px solid rgba(255,255,255,.3);
    border-top-color:#fff;border-radius:50%;
    animation:sqSpin .65s linear infinite;flex-shrink:0;
}


.sq-view{
    width:100%;height:46px;background:transparent;
    color:var(--sq-sub);
    border:1.5px solid var(--sq-border);border-radius:14px;
    font-size:13px;font-weight:700;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:8px;
    text-decoration:none;font-family:var(--sq-font);outline:none;
    position:relative;overflow:hidden;
    transition:
        border-color .24s var(--sq-ease),
        color .24s var(--sq-ease),
        background .24s var(--sq-ease),
        transform .28s var(--sq-spring),
        box-shadow .24s var(--sq-ease);
}
.sq-view::before{
    content:"";position:absolute;
    bottom:0;left:0;width:0;height:2px;
    background:linear-gradient(90deg,var(--sq-accent),var(--sq-a2));
    transition:width .3s var(--sq-ease);
    border-radius:0 0 14px 14px;
}
#spqv-modal .sq-view:hover{
    border-color:rgba(var(--sq-ar),.42);
    color:var(--sq-accent);
    background:linear-gradient(135deg,rgba(var(--sq-ar),.07),rgba(var(--sq-ar),.02));
    transform:translateY(-2px) scale(1.01);
    box-shadow:0 8px 20px rgba(var(--sq-ar),.14);
}
#spqv-modal .sq-view:hover::before{width:100%;}
#spqv-modal .sq-view:focus-visible{
    border-color:var(--sq-accent);
    color:var(--sq-accent);
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 5px rgba(var(--sq-ar),.4);
}
.sq-view:active{
    transform:translateY(0) scale(.97);
    transition-duration:.1s;
}


#spqv-skel{display:none;overflow:hidden;}
.sq-sg{display:grid;grid-template-columns:1.05fr 1fr;min-height:500px;}
.sq-sl{
    background:var(--sq-img);
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:16px;padding:40px;
}
.sq-sr{padding:32px 26px;display:flex;flex-direction:column;gap:14px;}
.sq-sb{
    background:linear-gradient(
        90deg,var(--sq-soft) 25%,var(--sq-border) 50%,var(--sq-soft) 75%
    );
    background-size:400% 100%;
    animation:sqShim 1.6s ease-in-out infinite;
    border-radius:8px;
}
.sq-si{width:180px;height:180px;border-radius:16px;}
.sq-sth{display:flex;gap:8px;}
.sq-st{width:52px;height:52px;border-radius:10px;}
.sq-sln{height:13px;border-radius:6px;}
.sq-spr{height:64px;width:100%;border-radius:16px;}
.sq-sbt{height:52px;width:100%;border-radius:14px;}


.spqv-wrap{
    display:inline-flex;position:relative;
    vertical-align:middle;font-family:var(--sq-font);
}
.spqv-trigger{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 22px;
    background:rgba(var(--sq-ar),.07);
    color:var(--sq-accent);
    border:1.5px solid rgba(var(--sq-ar),.2);
    border-radius:11px;
    font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;
    font-family:var(--sq-font);position:relative;overflow:hidden;outline:none;
    transition:
        background .26s var(--sq-ease),
        border-color .26s var(--sq-ease),
        color .26s var(--sq-ease),
        transform .3s var(--sq-spring),
        box-shadow .26s var(--sq-ease);
}

.spqv-trigger::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(var(--sq-ar),.14),rgba(var(--sq-ar),.03));
    opacity:0;transition:opacity .24s var(--sq-ease);
    border-radius:inherit;pointer-events:none;
}

.spqv-trigger::after{
    content:"";position:absolute;bottom:0;left:50%;
    width:0;height:2px;
    background:linear-gradient(90deg,var(--sq-a2),var(--sq-accent));
    transition:width .3s var(--sq-ease),left .3s var(--sq-ease);
    border-radius:0 0 11px 11px;pointer-events:none;
}
body .spqv-trigger:hover{
    background:rgba(var(--sq-ar),.13);
    border-color:rgba(var(--sq-ar),.55);
    transform:translateY(-3px) scale(1.02);
    box-shadow:
        0 14px 32px rgba(var(--sq-ar),.26),
        0 0 0 1px rgba(var(--sq-ar),.14);
}
body .spqv-trigger:hover::before{opacity:1;}
body .spqv-trigger:hover::after{width:80%;left:10%;}
body .spqv-trigger:focus-visible{
    border-color:var(--sq-accent);
    box-shadow:
        0 0 0 2px var(--sq-bg),
        0 0 0 5px rgba(var(--sq-ar),.42),
        0 8px 20px rgba(var(--sq-ar),.18);
    transform:translateY(-2px);
}
.spqv-trigger:active{
    transform:translateY(0) scale(.96);
    box-shadow:none;transition-duration:.1s;
}
.spqv-trigger .spqv-btn-icon{
    font-size:14px;line-height:1;
    display:inline-flex;align-items:center;
    transition:transform .3s var(--sq-spring);
}
.spqv-trigger:hover .spqv-btn-icon{
    transform:scale(1.2) rotate(-10deg);
}


.spqv-hover-only .spqv-trigger{
    opacity:0;pointer-events:none;
    transform:translateY(10px) scale(.9);
}
.elementor-post:hover .spqv-hover-only .spqv-trigger,
.product:hover .spqv-hover-only .spqv-trigger,
li:hover > .spqv-hover-only .spqv-trigger,
.swiper-slide:hover .spqv-hover-only .spqv-trigger{
    opacity:1;pointer-events:all;
    transform:translateY(0) scale(1);
}


.spqv-tip{
    position:absolute;bottom:calc(100% + 10px);left:50%;
    transform:translateX(-50%) translateY(6px);
    background:var(--sq-txt);color:#fff;
    padding:5px 12px;border-radius:8px;
    font-size:11px;font-weight:600;white-space:nowrap;
    pointer-events:none;opacity:0;
    transition:opacity .2s var(--sq-ease),transform .2s var(--sq-ease);
    z-index:10;box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.spqv-tip::after{
    content:"";position:absolute;top:100%;left:50%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-top-color:var(--sq-txt);
}
.spqv-wrap:hover .spqv-tip{
    opacity:1;transform:translateX(-50%) translateY(0);
}


#spqv-toast{
    position:fixed;bottom:24px;right:24px;z-index:9999999;
    background:var(--sq-bg);
    border:1.5px solid var(--sq-border);color:var(--sq-txt);
    padding:12px 18px;border-radius:15px;
    font-size:14px;font-weight:600;
    opacity:0;transform:translateY(20px) scale(.92);
    transition:opacity .28s var(--sq-spring),transform .28s var(--sq-spring);
    pointer-events:none;max-width:310px;
    display:flex;align-items:center;gap:10px;
    box-shadow:0 10px 36px rgba(var(--sq-ar),.14);
    font-family:var(--sq-font);
}
#spqv-toast.sq-show{opacity:1;transform:translateY(0) scale(1);}
#spqv-toast.sq-ts svg{color:var(--sq-ok);}
#spqv-toast.sq-te{border-color:rgba(214,48,49,.28);}
#spqv-toast.sq-te svg{color:var(--sq-err);}
body.rtl #spqv-toast,[dir=rtl] #spqv-toast{right:auto;left:24px;}


.sq-fly{
    position:fixed;z-index:9999999;border-radius:50%;
    pointer-events:none;
    border:3px solid var(--sq-accent);
    box-shadow:0 4px 20px rgba(var(--sq-ar),.4);
    transition:
        top .72s cubic-bezier(.2,.7,.3,1),
        left .72s cubic-bezier(.2,.7,.3,1),
        width .72s cubic-bezier(.2,.7,.3,1),
        height .72s cubic-bezier(.2,.7,.3,1),
        opacity .5s ease .24s;
    object-fit:cover;
}


@media(max-width:767px){
    #spqv-ov{align-items:flex-end;}
    #spqv-modal{
        width:100%;max-width:100%;max-height:96vh;
        border-radius:24px 24px 0 0;
        transform:translateY(100%);
    }
    #spqv-modal.sq-open{transform:translateY(0);opacity:1;}
    #spqv-inner{grid-template-columns:1fr;overflow-y:auto;}
    #spqv-img-col{min-height:220px;}
    #spqv-img-wrap{padding:20px 16px 12px;min-height:180px;}
    #spqv-img{max-height:160px;}
    #spqv-info-col{border-left:none;border-top:1px solid var(--sq-border);}
    body.rtl #spqv-info-col,[dir=rtl] #spqv-info-col{border-right:none;}
    #spqv-scroll{padding:18px 16px 10px;}
    #spqv-foot{padding:10px 16px 16px;}
    .sq-sg{grid-template-columns:1fr;min-height:auto;}
    .sq-sl{min-height:200px;padding:24px;}
    .sq-sr{padding:20px 16px;}
    #spqv-toast{right:10px;left:10px;bottom:10px;max-width:100%;}
    body.rtl #spqv-toast,[dir=rtl] #spqv-toast{right:10px;left:10px;}
}
@media(min-width:768px) and (max-width:1023px){
    #spqv-modal{max-width:820px;}
    #spqv-inner{grid-template-columns:1fr 1fr;}
    #spqv-scroll{padding:26px 22px 14px;}
    #spqv-foot{padding:12px 22px 16px;}
}