/* =========================================================
   QIMIA FLOATING SINGLE ADD-ON v2.2.0
   Compact English offer. Product pages only.
   ========================================================= */

.qssb-smart-stack{
    --qssb-ink:#153f4b;
    --qssb-muted:#7c9198;
    --qssb-accent:#12b7c4;
    --qssb-accent-dark:#0797a5;
    --qssb-accent-soft:#e9fbfc;
    --qssb-border:rgba(18,183,196,.40);
    --qssb-shadow:0 14px 34px rgba(15,55,66,.16),0 3px 10px rgba(15,55,66,.08);

    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:var(--qssb-desktop-bottom,24px) !important;
    z-index:99990 !important;
    width:min(560px,calc(100vw - 34px)) !important;
    max-width:560px !important;
    margin:0 !important;
    padding:7px !important;
    transform:translateX(-50%) !important;
    direction:ltr !important;
    text-align:left !important;
    color:var(--qssb-ink) !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid var(--qssb-border) !important;
    border-radius:19px !important;
    box-shadow:var(--qssb-shadow) !important;
    backdrop-filter:blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
    isolation:isolate !important;
    box-sizing:border-box !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease !important;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
    -webkit-font-smoothing:antialiased !important;
}

.qssb-smart-stack,
.qssb-smart-stack *,
.qssb-smart-stack *::before,
.qssb-smart-stack *::after{
    box-sizing:border-box !important;
}

.qssb-smart-stack.qssb-is-dismissed{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate(-50%,18px) !important;
}


.qssb-arabic-offer{
    position:absolute !important;
    top:-26px !important;
    left:50% !important;
    z-index:5 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-height:29px !important;
    max-width:calc(100% - 54px) !important;
    margin:0 !important;
    padding:0 13px !important;
    transform:translateX(-50%) !important;
    direction:rtl !important;
    unicode-bidi:isolate !important;
    overflow:visible !important;
    border:2px solid rgba(255,255,255,.94) !important;
    border-radius:999px !important;
    color:#fff !important;
    background:linear-gradient(110deg,#e92f66 0%,#ff574d 52%,#ff912f 100%) !important;
    box-shadow:0 8px 20px rgba(218,48,76,.31),0 2px 6px rgba(91,30,45,.14),inset 0 1px 0 rgba(255,255,255,.28) !important;
    font-family:Tahoma,Arial,"Segoe UI",sans-serif !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    pointer-events:none !important;
    animation:qssb-arabic-offer-in .48s cubic-bezier(.2,.8,.2,1) both !important;
    -webkit-font-smoothing:antialiased !important;
}

.qssb-arabic-offer::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:-4px !important;
    z-index:-1 !important;
    width:8px !important;
    height:8px !important;
    margin-left:-4px !important;
    border:0 !important;
    border-radius:1px !important;
    background:#ff6049 !important;
    transform:rotate(45deg) !important;
}

.qssb-arabic-spark{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff4ae !important;
    font-size:10.5px !important;
    line-height:1 !important;
    text-shadow:0 1px 5px rgba(98,25,39,.28) !important;
    animation:qssb-arabic-spark 2.1s ease-in-out infinite !important;
}

.qssb-arabic-title,
.qssb-arabic-saving{
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    color:#fff !important;
    font:900 10.8px/1 Tahoma,Arial,"Segoe UI",sans-serif !important;
    letter-spacing:0 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.qssb-arabic-title{
    flex:1 1 auto !important;
}

.qssb-arabic-saving{
    flex:0 0 auto !important;
    color:#fff9e5 !important;
}

.qssb-arabic-saving strong,
.qssb-arabic-saving bdi{
    margin:0 !important;
    padding:0 !important;
    color:#fff4a7 !important;
    font:900 12.4px/1 Tahoma,Arial,"Segoe UI",sans-serif !important;
    text-shadow:0 1px 2px rgba(92,27,37,.24) !important;
    white-space:nowrap !important;
}

.qssb-arabic-separator{
    display:block !important;
    flex:0 0 1px !important;
    width:1px !important;
    height:12px !important;
    margin:0 1px !important;
    padding:0 !important;
    border:0 !important;
    background:rgba(255,255,255,.50) !important;
}

@keyframes qssb-arabic-offer-in{
    from{opacity:0;transform:translate(-50%,5px) scale(.96)}
    to{opacity:1;transform:translate(-50%,0) scale(1)}
}

@keyframes qssb-arabic-spark{
    0%,100%{transform:scale(.9) rotate(-7deg);opacity:.82}
    50%{transform:scale(1.15) rotate(7deg);opacity:1}
}

.qssb-form{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.qssb-offer-row{
    display:grid !important;
    grid-template-columns:76px minmax(0,1fr) 112px 30px !important;
    align-items:center !important;
    gap:9px !important;
    width:100% !important;
    min-height:80px !important;
    margin:0 !important;
    padding:0 !important;
}

.qssb-no-image .qssb-offer-row{
    grid-template-columns:minmax(0,1fr) 112px 30px !important;
}

.qssb-img{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:76px !important;
    height:76px !important;
    margin:0 !important;
    padding:2px !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:13px !important;
    outline:0 !important;
    background:linear-gradient(180deg,#f0fbfc,#e6f8fa) !important;
    box-shadow:inset 0 0 0 1px rgba(18,183,196,.10) !important;
    text-decoration:none !important;
}

.qssb-img img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:72px !important;
    max-height:72px !important;
    margin:0 auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:10px !important;
    object-fit:contain !important;
    box-shadow:none !important;
}

.qssb-info{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
    margin:0 !important;
    padding:1px 0 !important;
    gap:4px !important;
}

.qssb-name{
    display:-webkit-box !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    color:var(--qssb-ink) !important;
    font-size:13px !important;
    line-height:1.16 !important;
    font-weight:800 !important;
    letter-spacing:-.012em !important;
    text-decoration:none !important;
    text-overflow:ellipsis !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}

.qssb-name:hover,
.qssb-name:focus{
    color:var(--qssb-accent-dark) !important;
    text-decoration:none !important;
}

.qssb-badges{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:4px !important;
    min-height:15px !important;
    margin:0 !important;
    padding:0 !important;
}

.qssb-popular,
.qssb-discount{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:15px !important;
    margin:0 !important;
    padding:3px 6px !important;
    border:0 !important;
    border-radius:999px !important;
    font-size:7.4px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.035em !important;
    white-space:nowrap !important;
}

.qssb-popular{
    color:#087b83 !important;
    background:#e6faf8 !important;
}

.qssb-discount{
    color:#d65b3c !important;
    background:#fff1ea !important;
}

.qssb-prices{
    display:flex !important;
    align-items:baseline !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
}

.qssb-final-price,
.qssb-final-price .amount,
.qssb-final-price bdi{
    color:#078ea0 !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
}

.qssb-old-price,
.qssb-old-price .amount,
.qssb-old-price bdi{
    color:#9aabb0 !important;
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:700 !important;
    text-decoration:line-through !important;
    white-space:nowrap !important;
}

.qssb-single-add{
    appearance:none !important;
    -webkit-appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:112px !important;
    min-width:112px !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 12px !important;
    border:0 !important;
    border-radius:13px !important;
    outline:0 !important;
    color:#fff !important;
    background:linear-gradient(180deg,#19bdc8,#0aa3b0) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 7px 15px rgba(10,163,176,.20) !important;
    font:900 10px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    letter-spacing:.035em !important;
    text-align:center !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease !important;
    -webkit-tap-highlight-color:transparent !important;
}

.qssb-single-add:hover,
.qssb-single-add:focus-visible{
    color:#fff !important;
    background:linear-gradient(180deg,#10b1bd,#078e9b) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 9px 18px rgba(10,163,176,.25) !important;
    transform:translateY(-1px) !important;
}

.qssb-single-add:active{
    transform:translateY(0) scale(.985) !important;
}

.qssb-single-add:disabled,
.qssb-is-loading .qssb-single-add{
    opacity:.68 !important;
    cursor:wait !important;
    transform:none !important;
}

.qssb-single-add.qssb-single-added{
    background:linear-gradient(180deg,#37bd8b,#219d71) !important;
}

.qssb-single-main{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    font:inherit !important;
    line-height:inherit !important;
}

.qssb-close{
    appearance:none !important;
    -webkit-appearance:none !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #dcebef !important;
    border-radius:999px !important;
    outline:0 !important;
    color:#78939b !important;
    background:#fff !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:border-color .16s ease,color .16s ease,background .16s ease !important;
    -webkit-tap-highlight-color:transparent !important;
}

.qssb-close span,
.qssb-close span::before{
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    display:block !important;
    width:10px !important;
    height:1.5px !important;
    border:0 !important;
    border-radius:99px !important;
    background:currentColor !important;
    transform:translate(-50%,-50%) rotate(45deg) !important;
}

.qssb-close span::before{
    transform:translate(-50%,-50%) rotate(90deg) !important;
}

.qssb-close:hover,
.qssb-close:focus-visible{
    color:#2d6977 !important;
    border-color:#badde3 !important;
    background:#f3fcfd !important;
}

.qssb-ajax-message{
    position:absolute !important;
    left:50% !important;
    bottom:calc(100% + 7px) !important;
    z-index:2 !important;
    display:none;
    max-width:calc(100% - 24px) !important;
    margin:0 !important;
    padding:7px 10px !important;
    transform:translateX(-50%) !important;
    border-radius:10px !important;
    box-shadow:0 7px 18px rgba(15,55,66,.13) !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-align:center !important;
    white-space:nowrap !important;
}

.qssb-has-arabic-offer .qssb-ajax-message{
    bottom:calc(100% + 38px) !important;
}

.qssb-msg-success{
    color:#126f54 !important;
    background:#edfff7 !important;
    border:1px solid #bdebd7 !important;
}

.qssb-msg-error{
    color:#a63e45 !important;
    background:#fff3f4 !important;
    border:1px solid #f0cbd0 !important;
}

@media (max-width:767px){
    .qssb-smart-stack{
        bottom:calc(var(--qssb-mobile-bottom,108px) + env(safe-area-inset-bottom,0px)) !important;
        width:min(342px,calc(100vw - 18px)) !important;
        max-width:342px !important;
        padding:5px !important;
        border-radius:16px !important;
        box-shadow:0 11px 26px rgba(15,55,66,.15),0 2px 8px rgba(15,55,66,.07) !important;
    }

    .qssb-arabic-offer{
        top:-21px !important;
        gap:4px !important;
        min-height:24px !important;
        max-width:calc(100% - 32px) !important;
        padding:0 10px !important;
        border-width:1.5px !important;
        box-shadow:0 6px 15px rgba(218,48,76,.28),0 2px 5px rgba(91,30,45,.12),inset 0 1px 0 rgba(255,255,255,.26) !important;
    }

    .qssb-arabic-offer::after{
        bottom:-3px !important;
        width:7px !important;
        height:7px !important;
        margin-left:-3.5px !important;
    }

    .qssb-arabic-title,
    .qssb-arabic-saving{
        font-size:9.2px !important;
    }

    .qssb-arabic-saving strong,
    .qssb-arabic-saving bdi{
        font-size:10.4px !important;
    }

    .qssb-arabic-spark{
        font-size:8.5px !important;
    }

    .qssb-arabic-separator{
        height:10px !important;
    }

    .qssb-has-arabic-offer .qssb-ajax-message{
        bottom:calc(100% + 32px) !important;
    }

    .qssb-offer-row{
        grid-template-columns:64px minmax(0,1fr) 68px 22px !important;
        gap:5px !important;
        min-height:66px !important;
    }

    .qssb-no-image .qssb-offer-row{
        grid-template-columns:minmax(0,1fr) 68px 22px !important;
    }

    .qssb-img{
        width:64px !important;
        height:64px !important;
        padding:2px !important;
        border-radius:13px !important;
    }

    .qssb-img img{
        max-width:60px !important;
        max-height:60px !important;
        border-radius:9px !important;
    }

    .qssb-info{
        gap:3px !important;
        padding:0 !important;
    }

    .qssb-name{
        font-size:10.4px !important;
        line-height:1.12 !important;
        font-weight:820 !important;
    }

    .qssb-badges{
        gap:3px !important;
        min-height:12px !important;
    }

    .qssb-popular,
    .qssb-discount{
        min-height:12px !important;
        padding:2.5px 4px !important;
        font-size:6.2px !important;
        letter-spacing:.025em !important;
    }

    .qssb-prices{
        gap:4px !important;
    }

    .qssb-final-price,
    .qssb-final-price .amount,
    .qssb-final-price bdi{
        font-size:12px !important;
    }

    .qssb-old-price,
    .qssb-old-price .amount,
    .qssb-old-price bdi{
        font-size:8px !important;
    }

    .qssb-single-add{
        width:68px !important;
        min-width:68px !important;
        height:36px !important;
        min-height:36px !important;
        padding:0 7px !important;
        border-radius:11px !important;
        font-size:7.3px !important;
        line-height:1.05 !important;
        letter-spacing:.025em !important;
        white-space:normal !important;
    }

    .qssb-close{
        width:22px !important;
        min-width:22px !important;
        height:22px !important;
        min-height:22px !important;
    }

    .qssb-close span,
    .qssb-close span::before{
        width:8px !important;
        height:1.3px !important;
    }

    .qssb-ajax-message{
        bottom:calc(100% + 6px) !important;
        padding:6px 9px !important;
        border-radius:9px !important;
        font-size:9px !important;
    }
}

@media (max-width:370px){
    .qssb-smart-stack{
        width:min(286px,calc(100vw - 16px)) !important;
        padding:4px !important;
    }

    .qssb-arabic-offer{
        max-width:calc(100% - 24px) !important;
        padding-inline:8px !important;
    }

    .qssb-arabic-title,
    .qssb-arabic-saving{
        font-size:8.8px !important;
    }

    .qssb-arabic-saving strong,
    .qssb-arabic-saving bdi{
        font-size:10px !important;
    }

    .qssb-offer-row{
        grid-template-columns:58px minmax(0,1fr) 64px 20px !important;
        gap:4px !important;
    }

    .qssb-no-image .qssb-offer-row{
        grid-template-columns:minmax(0,1fr) 64px 20px !important;
    }

    .qssb-img{
        width:58px !important;
        height:58px !important;
    }

    .qssb-img img{
        max-width:54px !important;
        max-height:54px !important;
    }

    .qssb-name{
        font-size:10px !important;
    }

    .qssb-popular{
        display:none !important;
    }

    .qssb-single-add{
        width:64px !important;
        min-width:64px !important;
        height:34px !important;
        min-height:34px !important;
        font-size:7px !important;
    }

    .qssb-close{
        width:20px !important;
        min-width:20px !important;
        height:20px !important;
        min-height:20px !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .qssb-smart-stack,
    .qssb-single-add,
    .qssb-close{
        transition:none !important;
    }

    .qssb-arabic-offer,
    .qssb-arabic-spark{
        animation:none !important;
    }
}

.qssb-smart-stack.qssb-keyboard-open{
    opacity:0 !important;
    pointer-events:none !important;
}
