:root {
    --mcolor: null;
    --mcolorrgb: null;
    --bgcolor: white;
    --bgcolor2: #ECECEC;
    --bgcolor3: white;
    --txcolor: black;
    --mncolor: #ECECEC;
    --mhcolor: #DDDDDD;
    --selected: linear-gradient(135deg, var(--mcolor) 0%, var(--mncolor) 100%);
    --selectedr: linear-gradient(45deg, var(--mncolor) 0%, var(--mcolor) 100%);
    --tbcolor: white;
    --dscolor: white;
    --cbfocus: #5fbae9;
    --cbborder: #CCCCCC;
    --bgheader: rgba(0, 0, 0, 0.12);
    --bgheader2: rgba(0, 0, 0, 0.04);
    --shadow1: rgba(0,0,0,0.25);
    --phoneicon: url("/i/svg/light/phone.svg");
    --fblue: #26769E;
}

.currentmode {

}

    .currentmode.dark {
        --bgcolor: #18191A;
        --bgcolor2: #242526;
        --bgcolor3: #242526;
        --txcolor: #E4E6EB;
        --mncolor: #3a3b3c;
        --mhcolor: #4e4f50;
        --selected: linear-gradient(135deg, var(--mcolor) 0%, var(--mncolor) 100%);
        --selectedr: linear-gradient(45deg, var(--mncolor) 0%, var(--mcolor) 100%);
        --tbcolor: #3a3b3c;
        --dscolor: #3a3b3c;
        --cbfocus: #35536D;
        --cbborder: #3b3c3a;
        --bgheader: rgba(228, 230, 235, 0.12);
        --bgheader2: rgba(228, 230, 235, 0.04);
        --shadow1: rgb(125,125,125,0.12);
        --fblue: #51b3cb;
    }

body.currentmode.dark .lightonly {
    display: none;
}

body.currentmode:not(.dark) .darkonly {
    display: none;
}


#docbody {
    
}

* {
    font-family: Cairo,Tajawal;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

 

.customhtml * {
    margin: revert;
    font-family:revert;
}


h1, h2, h3, h4, h5, h6, ul, li {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    display: initial;
    font-size: initial;
    font-weight: initial;
}

.customhtml h1,
.customhtml h2,
.customhtml h3,
.customhtml h4,
.customhtml h5,
.customhtml h6,
.customhtml ul,
.customhtml li {
    margin-block-start: initial;
    margin-block-end: initial;
    margin-inline-start: initial;
    margin-inline-end: initial;
    padding-inline-start: revert;
    display: revert;
    font-size: revert;
    font-weight: revert;
}

/*.shophome a
{
 background-color:gray;
}*/
.shophome1::before,
.shophome1::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: black;
}

.shophome1::before {
    left: 10px;
}

.shophome1::after {
    right: 10px;
}

#g_id_onload_p {
    position: fixed;
    top: 0px;
    padding-top: 60px;
    z-index: 100001;
}

a {
    color: inherit
}

*:active {
    outline-width: 0;
}

*:focus {
    outline: none;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    -webkit-font-smoothing: antialiased;
}

body {
    width: 100%;
    max-width: 100%;
    color: var(--txcolor);
    background-color: var(--bgcolor);
}

#cdiv {
    width: 100%;
    max-width: 100%;
}


#innerbody {
    width: 100%;
    max-width: 100%;
    padding: 42px 0 0 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#maindiv {
    width: 100%;
    max-width: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

#websitemainpanel {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex: 1 0 auto;
    justify-content: center;
    /*transition: all 0.1s ease;*/
}

#websitecenter {
    width: 100%;
    position: relative;
    max-width:1252px;
    /*flex:100;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#websitecenterinner {
    width: 100%;
    max-width: 100%;
    padding: 10px 8px 8px 8px;
    flex: 1 0 auto;
}

@supports not (max-width: min(1% , 1px)) {
    #websitecenter, #hpinside, #alertpanel {
        max-width: 1252px;
    }
}




#websitecenterh {
    width: 100%;
    display: flex;
    font-size: 16px;
    flex-wrap: wrap;
    justify-content: end;
    padding: 8px 0;
}

    #websitecenterh > div {
        display: flex;
        padding: 0 8px;
        line-height: 20px;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: .9rem;
    }

    #websitecenterh > div > span{
        font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif !important
    }

    #websitecenterh > div > img {
        padding: 0 4px;
        max-width: 28px;
    }

.pidlistimg {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pidlistimg > img {
        max-height: 100%;
    }

@media (max-width: 600px) {
    .pidlistimg {
        display: none;
    }
}

.webel, .customhtml {
    max-width: 100%;
    margin-bottom: 25px;
}

.customhtml {
    margin-left: 3px;
    margin-right: 3px;
    overflow-x: auto;
}

.customtext {
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 25px;
    line-height: 1.6;
    overflow-wrap: break-word;
}

@media (max-width: 660px) {
    [data-scrv="1"] {
        display: none !important;
    }

    .webel,.customhtml {
        margin-bottom: 15px;
    }
    * {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
}

@media (min-width: 661px) {
    [data-scrv="2"] {
        display: none !important;
    }
    * {
        -webkit-user-select: text;
        -moz-user-select: text;
        user-select: text;
    }
}

.webela[data-radius="50%"] a, .webela[data-radius="50%"] span,
.webel[data-radius="50%"] a > img, .webel[data-radius="50%"] span > img {
    border-radius: 50%;
}

.webela[data-radius="10px"] a, .webela[data-radius="10px"] span,
.webel[data-radius="10px"] a > img, .webel[data-radius="10px"] span > img {
    border-radius: 10px;
}

.webela[data-radius="7px"] a, .webela[data-radius="7px"] span,
.webel[data-radius="7px"] a > img, .webel[data-radius="7px"] span > img {
    border-radius: 7px;
}

.webela[data-radius="30px"] a, .webela[data-radius="30px"] span,
.webel[data-radius="30px"] a > img, .webel[data-radius="30px"] span > img {
    border-radius: 30px;
}

.webela[data-radius="40px"] a, .webela[data-radius="40px"] span,
.webel[data-radius="40px"] a > img, .webel[data-radius="40px"] span > img {
    border-radius: 40px;
}

.webela[data-radius="10p40"] a, .webela[data-radius="10p40"] span,
.webel[data-radius="10p40"] a > img, .webel[data-radius="10p40"] span > img {
    border-radius: 10%;
    border-radius: min(10%,40px);
}

.webelh a {
    transition: box-shadow .25s ease-in-out;
}

    .webelh:not([data-hover]) a[href]:hover {
        -webkit-box-shadow: 0px 15px 13px -7px var(--shadow1);
        -moz-box-shadow: 0px 15px 13px -7px var(--shadow1);
        box-shadow: 0px 15px 13px -7px var(--shadow1);
    }

.ja {
    overflow: hidden;
    position: relative;
    display: block;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
}

    .ja img {
        display: block;
        min-width: 100%;
        max-width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
    }

.webelh .jslider a:hover {
    transform: none;
}

/* ============ تأثيرات التحويم للكتل (data-hover) ============
   الكل transform/filter/عنصر زائف داخل .ja (وهي overflow:hidden أصلاً)
   ⇒ الصورة تتحرك داخل إطارها الثابت والتخطيط لا يتزحزح.
   القيمة الفارغة = بلا سمة = الظلّ الافتراضي أعلاه. "none" = بلا أي شيء. */
[data-hover] .ja img { transition: transform .45s ease, filter .45s ease; }

[data-hover="zoom"] .ja:hover img { transform: scale(1.09); }

[data-hover="zoomout"] .ja img { transform: scale(1.09); }
[data-hover="zoomout"] .ja:hover img { transform: scale(1); }

[data-hover="lift"] .ja { transition: transform .3s ease, box-shadow .3s ease; }
[data-hover="lift"] .ja:hover { transform: translateY(-8px); box-shadow: 0px 15px 18px -9px var(--shadow1); }

[data-hover="gray"] .ja img { filter: grayscale(1); }
[data-hover="gray"] .ja:hover img { filter: grayscale(0); }

[data-hover="bright"] .ja:hover img { filter: brightness(1.15); }

[data-hover="shine"] .ja::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 35%; left: -65%;
    background: rgba(255, 255, 255, .35); transform: skewX(-20deg); pointer-events: none;
}
[data-hover="shine"] .ja:hover::after { left: 130%; transition: left .65s ease; }

/* --- تأثيرات لعب وحركة إضافية (كلها داخل .ja، بلا كسر تخطيط) --- */
[data-hover="tilt"] .ja:hover img { transform: scale(1.06) rotate(-3deg); }

[data-hover="kenburns"] .ja img { transition: transform 4s ease; }
[data-hover="kenburns"] .ja:hover img { transform: scale(1.25); }

[data-hover="saturate"] .ja:hover img { filter: saturate(1.8); }

[data-hover="sharp"] .ja img { filter: blur(2.5px); }
[data-hover="sharp"] .ja:hover img { filter: blur(0); }

[data-hover="glow"] .ja { transition: box-shadow .3s ease; }
[data-hover="glow"] .ja:hover { box-shadow: 0 0 0 3px rgba(120, 120, 255, .5), 0 6px 20px -4px rgba(80, 80, 220, .55); }

[data-hover="pulse"] .ja:hover img { animation: jhpulse .7s ease; }
@keyframes jhpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.11); } }

[data-hover="wobble"] .ja:hover img { animation: jhwobble .6s ease; }
@keyframes jhwobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } }

[data-hover="shake"] .ja:hover img { animation: jhshake .5s ease; }
@keyframes jhshake {
    0%, 100% { transform: translateX(0) scale(1.05); }
    25% { transform: translateX(-5px) scale(1.05); }
    75% { transform: translateX(5px) scale(1.05); }
}

    

@keyframes fopacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fleft {
    from {
        transform: translateX(-20%);
    }

    to {
        transform: translateX(0);
    }
}

/*.animateinside .webel {
    animation: fopacity 1s linear forwards, fleft 1s linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}*/

    #sbtnpnl {
        max-width: 42px;
        height: 30px;
    }

    #btnmenu {
        max-width: 24px;
    }

.qpnlc0 {
    display: block;
    position: relative;
    height: 32px;
    border-radius: 5px;
    /*background-color: var(--mncolor);*/
    background-color: var(--mcolor);
    color: #FFFFFF;
    overflow: hidden;
}

    .qpnlc0 :hover {
        /* background-color: var(--mhcolor);*/
        background-color: color-mix(in srgb, var(--mcolor) 85%, white);
    }

    .qpnlca {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qpnlcb {
        position: absolute;
        top: 0;
        display: flex;
        flex-wrap: wrap;
        opacity: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        transition: all 0.1s ease;
        justify-content: center;
        align-items: center;
    }

        .qpnlcb > :nth-child(2) {
            flex: 1 0 auto;
            font-size: 18px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }


    .wrapbox {
        margin-left: 3px;
        margin-right: 3px;
    }

    .wrapbox-track {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
    }

.wrapbox-track > * {
    max-width:100px;
}

    .carousel {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        user-select: none;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.25s ease;
        will-change: transform;
    }


        .carousel-track > a {
            opacity: 0;
            min-width: 100px;
            max-width: 206px;
            justify-content: center;
            align-items: center;
            transition: border 0.1s ease,opacity 0.25s ease-in-out;
            padding: 0 3px;
        }

    @media (min-width: 1252px) {
        .carousel-track > a {
            width: 206px;
            opacity: 1;
            transition: border 0.1s ease;
        }

        .carousel-track[data-maxview="7"] > a {
            width: 176.571px !important;
        }

        .carousel-track[data-maxview="8"] > a {
            width: 154.5px !important
        }

        .carousel-track[data-maxview="9"] > a {
            width: 137.333px !important
        }

        .carousel-track[data-maxview="10"] > a {
            width: 123.6px !important
        }

    }

    .carousel-track > a > span {
        display: block;
    }

    .carousel-track > a:hover {
    }

    .carousel-track > a > img {
        display: block;
        width: 100%;
        height: auto;
    }

    .carouselbtn {
        padding: 10px;
        width: 35px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        height: 35px;
        font-size: 24px;
        font-weight: bold;
        overflow: hidden;
        text-align: center;
        cursor: pointer;
        background-color: rgba(var(--mcolorrgb), 0.6);
        color: black;
        transition: all 0.25s ease-in-out;
        opacity: 0;
    }

        .carouselbtn[data-mouse="-1"] {
            opacity: 1;
        }

        .carouselbtn:hover {
            background-color: rgba(var(--mcolorrgb), 0.9);
        }

    .carouselbtn-s {
        left: 0px;
    }

    .carouselbtn-e {
        right: 0px;
        transform: scaleX(-1) translateY(-50%);
        transform-origin: center;
    }


.jflexbox {
    user-select: none;
    margin-left: 3px;
    margin-right: 3px;
}

.jflexbox-track {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    flex-wrap: nowrap;
    row-gap: 15px;
}

.jflexbox-track > * {
    flex: 1;
}


    .jflexbox-track[data-c="2"] {
        column-gap: 30px;
        column-gap: min(30px,6%);
    }

    .jflexbox-track[data-c="4"] {
        column-gap: 10px;
        column-gap: min(10px,6%);
    }

    .jflexbox-track[data-c="6"] {
        column-gap: 6px;
        column-gap: min(6px,6%);
    }


@supports not (inset: 0) {

    .jflexbox-track[data-c="2"][data-dir=ltr] > :nth-child(1), .jflexbox-track[data-c="2"][data-dir=rtl] > :nth-child(2) {
        margin: 0 15px 0 0;
    }

    .jflexbox-track[data-c="2"][data-dir=ltr] > :nth-child(2), .jflexbox-track[data-c="2"][data-dir=rtl] > :nth-child(1) {
        margin: 0 0 0 15px;
    }

    .jflexbox-track:not([data-c="2"]) {
        margin: 0;
    }

    .jflexbox-track[data-c="4"] > * {
        margin: 0 7.5px;
    }

    .jflexbox-track[data-c="6"] > * {
        margin: 0 3px;
    }
}

    @media (max-width: 660px) {

        .jflexbox-track {
            flex-wrap: wrap;
            width: initial;
        }

            .jflexbox-track[data-c="2"] > * {
                flex: 95%;
            }


            .jflexbox-track[data-c="4"]  {
                column-gap: 15px;
            }
                .jflexbox-track[data-c="4"] > * {
                    flex: 45%;
                }


            .jflexbox-track[data-c="6"] > * {
                flex: 30%;
            }

            .jflexbox-track * {
                min-width: 30%;
            }

        @supports not (inset: 0) {
            .jflexbox-track[data-c="2"] > * {
                margin: 6px 0 !important;
            }

            .jflexbox-track:not([data-c="2"]) > * {
                margin: 6px;
            }
        }

    }

    .smart5 {
        display: flex;
        flex-wrap: wrap;
        padding: 0 3px;
    }




    .smart5 {
        gap: 30px;
        gap: min(30px,3%)
    }


        .smart5 > * {
            flex: 1;
        }

    .smart5p1, .smart5p3 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .smart5p2 > :nth-child(2) {
        display: none;
    }


    @supports not (inset: 0) {

        .smart5p2 {
            margin: 0 15px;
        }


        .smart5p1[dir="ltr"], .smart5p3[dir="rtl"] {
            margin-right: 15px;
        }

        .smart5p3[dir="ltr"], .smart5p1[dir="rtl"] {
            margin-left: 15px;
        }

        .smart5p1 > :nth-child(1), .smart5p3 > :nth-child(1) {
            margin-bottom: 15px;
        }

        .smart5p1 > :nth-child(2), .smart5p3 > :nth-child(2) {
            margin-top: 15px;
        }
    }

    @media (max-width: 660px) {

        .smart5 {
            flex-direction: column;
            gap: 15px;
            flex-wrap: nowrap;
        }

        .smart5p1, .smart5p3 {
            flex-direction: row;
            gap: 15px !important;
            gap: min(15px,6%) !important;
        }

            .smart5p1 > *, .smart5p3 > * {
                flex: 1;
            }

        @supports not (inset: 0) {
            .smart5p1, .smart5p3 {
                margin-left: 0px !important;
                margin-right: 0px !important;
            }

            .smart5p1 {
                margin-bottom: 15px !important;
            }

            .smart5p2 {
                margin: 15px 0 !important;
            }

            .smart5p3 {
                margin-top: 15px !important;
            }

                .smart5p1 > *, .smart5p3 > * {
                    margin-top: 0px !important;
                    margin-bottom: 0px !important;
                }

                .smart5p1[dir="rtl"] > :nth-child(1), .smart5p3[dir="rtl"] > :nth-child(1), .smart5p1[dir="ltr"] > :nth-child(2), .smart5p3[dir="ltr"] > :nth-child(2) {
                    margin-left: 15px !important;
                    margin-right: 0 !important;
                }

                .smart5p1[dir="rtl"] > :nth-child(2), .smart5p3[dir="rtl"] > :nth-child(2), .smart5p1[dir="ltr"] > :nth-child(1), .smart5p3[dir="ltr"] > :nth-child(1) {
                    margin-left: 0px !important;
                    margin-right: 15px !important;
                }
        }

        .smart5p2 > :nth-child(1) {
            display: none;
        }

        .smart5p2 > :nth-child(2) {
            display: inherit;
        }
    }

    .jslider {
        overflow: hidden;
        position: relative;
        margin-left: 3px;
        margin-right: 3px;
        max-width: calc(100% - 6px)
    }

        .jslider[data-nested="-1"] {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0px;
            margin-right: 0px;
        }

    .jslider-track {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        position: relative;
        align-items: center;
    }

        .jslider-track[dir="rtl"] > :nth-child(1) {
            margin-left: 20px;
            margin-left: calc(100% * 0.04 + 0px);
        }

        .jslider-track[dir="rtl"] > :nth-child(3) {
            margin-right: 20px;
            margin-right: calc(100% * 0.04 + 0px);
        }

        .jslider-track[dir="ltr"] > :nth-child(1) {
            margin-right: 20px;
            margin-right: calc(100% * 0.04 + 0px);
        }

        .jslider-track[dir="ltr"] > :nth-child(3) {
            margin-left: 20px;
            margin-left: calc(100% * 0.04 + 0px);
        }


.jslider-anchor {
    min-width: 50%;
    min-width: calc(50% - 15px);
    
}

    .jslider-track[data-iscenter="-1"][data-uncut="-1"] > :nth-child(1), .jslider-track[data-iscenter="-1"][data-uncut="-1"] > :nth-child(3) {
        height: 50%;
        min-width: 25%;
        min-width: calc(25% - 45px);
    }

    @media (max-width: 600px) {
        .jslider-track[data-iscenter="-1"] > :nth-child(1) {
            display: none;
        }

        .jslider-track[data-iscenter="-1"] > :nth-child(2) {
            width: 100% !important;
        }

        .jslider-track[data-iscenter="-1"] > :nth-child(3) {
            display: none;
        }
    }

    .slide-out {
        transform: translateX(-100%);
    }

    .slide-in {
        transform: translateX(100%);
    }

    .jslider-bullets {
        display: flex;
        justify-content: center;
        height: 32px;
        padding: 12px;
    }

        .jslider-bullets[data-inside="-1"] {
            position: absolute;
            bottom: 5px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 10000;
        }


    .jslider-bullet {
        width: 16px;
        height: 16px;
        background-color: #ccc;
        border-radius: 50%;
        margin: 0 8px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
    }

    .jslider-bullets[data-inside="-1"] > span {
        border: solid gray 1px;
    }

    .jslider-bullet.active {
        background-color: var(--mcolor);
        transform: scale(1.2);
    }

    .dragstart {
        pointer-events: none;
    }

    #pgcart {
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 80px;
        height: 80px;
        z-index: 100001;
        cursor: pointer;
    }

        #pgcart > div {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #pgcart > div {
            background-color: var(--mcolor) !important;
            border-radius: 100%;
        }

            #pgcart > div > span {
                position: absolute;
                top: -10px;
                left: 0;
                font-size: 17px;
                width: 25px;
                height: 25px;
                line-height: 12px;
                font-weight: 400;
                display: grid;
                align-items: center;
                text-align: center;
                border-radius: 100%;
                background-color: red;
                color: white;
            }

            #pgcart > div > img {
                width: 100%;
                height: 100%;
                padding: 22px;
                pointer-events: none;
            }



.split-bar {
    background-repeat: no-repeat;
    background-size: cover;
}

    .lbl_qqqq {
        cursor: pointer;
    }

    .svgc {
        /* transition: opacity 0.5s ease-in-out*/
    }


    .customermenu {
        display: none;
        top: 0px;
        left: 0px;
        width: 200px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
        overflow: hidden;
        z-index: 100001;
    }


        .customermenu > a {
            display: flex;
            flex-wrap:wrap;
            width: 100%;
            height: 36px;
            padding: 5px 0px;
            background-color: var(--mncolor);
            transition: all .3s ease;
        }

            .customermenu > a img {
                width: 24px;
                height: 24px;
                margin:0px 7px;
            }

            .customermenu > a:last-child {
                border-top: 1px solid lightgray;
                color: #D70040;
                height: 36px;
                padding: 0px 7px;
            }

            .customermenu > a:hover {
                background-color: var(--mhcolor);
            }

    .lbldis {
        color: lightgray;
        cursor: default !important;
    }

    input {
        -webkit-user-select: initial;
        -khtml-user-select: initial;
        -moz-user-select: initial;
        user-select: initial;
    }

    .devpanel {
        display: flex;
        flex-direction: column;
        box-shadow: rgb(125, 125, 125, 0.12) 0 1px 4px;
        border-radius: 15px;
        margin-bottom:25px;
    }

        .devpanel > div {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            padding-top: 10px;
        }

        .devpanel > :first-child {
            font-weight: bold;
            color: #ea1b25 !important;
            text-shadow: 0 0 1px #666;
            font-size: 1.2em;
        }

        .devpanel > div > span {
            width: 100px;
            min-width: 100px;
            text-align: start;
            background: linear-gradient(90deg, #ea1b25 0%, rgba(0, 0, 0, 0) 100%);
            display: flex;
            align-content: center;
            align-items: center;
            padding: 0 5px 0 5px;
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 4px #666;
        }

            .devpanel > div > span[style*="rtl"] {
                background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ea1b25 100%);
            }

        .devpanel > div > select {
            flex: 1;
            max-width: calc(100% - 100px);
        }

        .devpanel > input {
            margin-top: 10px;
        }


    .ptcat00 {
        display: flex;
        flex-wrap: nowrap;
        column-gap: 30px;
        row-gap: 25px;
        padding: 0 3px;
    }

        .ptcat00 > div {
            flex: 1;
            flex-wrap: wrap !important;
            padding: 0px !important
        }

            .ptcat00 > div > div {
                flex: 100% !important;
            }

    .ptcat0 {
        display: flex;
        flex-wrap: nowrap;
        padding: 0 3px;
        transition: transform 0.3s ease;
        column-gap: 30px;
        row-gap: 25px;
    }

    .ptcat1 {
        display: flex;
    }

        .ptcat1 > * {
            flex: 1;
        }

    .ptcat0[data-p="1"] {
        justify-content: space-between;
    }

    .ptcat1[data-p="1"] {
        flex: 1;
    }

    .ptcat2[data-p="1"] {
        flex: 1;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .ptcat2[data-p="1"] {
        gap: 12px;
        gap: min(12px,3%);
        row-gap: 12px;
    }

    .ptcat1[data-p="2"] {
        flex: 66.6666%;
    }

    .ptcat1[data-p="3"] {
        flex: 75%;
    }

    .ptcat2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .ptcat2[data-p="2"] {
            flex: 33.3333%;
        }

        .ptcat2[data-p="3"] {
            flex: 25%;
        }

        .ptcat2[data-p="1"] > * {
            flex: 45%;
            flex-direction: row;
            height: fit-content;
        }

    @media (max-width: 600px) {

        .ptcat00 {
            flex-wrap: wrap;
            row-gap: 15px;
        }

            .ptcat00 > div {
                flex: 100% !important;
            }

                .ptcat00 > div > div {
                    flex: 50% !important;
                }

        .ptcat0 {
            flex-wrap: wrap;
            row-gap: 15px;
        }

        .ptcat1 {
            min-width: 100%;
        }

        .ptcat2 {
            min-width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0 0 0 0 !important;
            column-gap: min(15px,6%) !important;
        }

            .ptcat2 > * {
                flex: 45%;
            }

        @supports not (inset: 0) {

            .ptcatu {
                margin: 0 0 15px 0 !important;
            }

            .ptcatd {
                margin: 0 !important;
            }

            .ptcat00[data-dir=ltr] > :nth-child(1), .ptcat00[data-dir=rtl] > :nth-child(2) {
                margin: 0 0 0 0 !important;
            }

            .ptcat00[data-dir=ltr] > :nth-child(2), .ptcat00[data-dir=rtl] > :nth-child(1) {
                margin: 0 0 0 0 !important;
            }
        }


    }


@supports not (inset: 0) {

    .ptcats {
        margin: 0 15px 0 0;
    }

    .ptcate {
        margin: 0 0 0 15px;
    }

    .ptcat00 > div > div {
        margin: 5px 0;
    }

    .ptcat2[data-p="1"][dir="ltr"] > :nth-child(1), .ptcat2[data-p="1"][dir="rtl"] > :nth-child(2) {
        margin: 0 6px 6px 0;
    }

    .ptcat2[data-p="1"][dir="ltr"] > :nth-child(2), .ptcat2[data-p="1"][dir="rtl"] > :nth-child(1) {
        margin: 0 0 6px 6px;
    }

    .ptcat2[data-p="1"][dir="ltr"] > :nth-child(3), .ptcat2[data-p="1"][dir="rtl"] > :nth-child(4) {
        margin: 6px 6px 0 0;
    }

    .ptcat2[data-p="1"][dir="ltr"] > :nth-child(4), .ptcat2[data-p="1"][dir="rtl"] > :nth-child(3) {
        margin: 6px 0 0 6px;
    }



    .ptcat00[data-dir=ltr] > :nth-child(1), .ptcat00[data-dir=rtl] > :nth-child(2) {
        margin: 0 15px 0 0;
    }

    .ptcat00[data-dir=ltr] > :nth-child(2), .ptcat00[data-dir=rtl] > :nth-child(1) {
        margin: 0 0 0 15px;
    }
}



    .plch {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 0;
        padding-top: 75%;
        position: relative;
        overflow: hidden;
        border-radius: 7px;
    }

    .ybox {
        border-radius: 15px;
        box-shadow: var(--shadow1) 0px 1px 4px;
        /*    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.075), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.02), 0 0.9px 1.5px hsla(230, 13%, 9%, 0.045), 0 3.5px 6px hsla(230, 13%, 9%, 0.09);*/
    }

    .pidlist {
        background: var(--bgcolor3);
        border-radius: 15px;
        margin-left: 3px;
        margin-right: 3px;
        padding-bottom: 15px;
        box-shadow: var(--shadow1) 0px 1px 4px;
        width: inherit !important;
    }


.jslider3 {
    display: flex;
    padding: 0 3px;
    column-gap: 30px;
}

@supports not (inset: 0) {

    .jslider3[data-dir="0"] > :nth-child(1), .jslider3[data-dir="-1"] > :nth-child(2) {
        margin-right: 15px;
    }

    .jslider3[data-dir="0"] > :nth-child(2), .jslider3[data-dir="-1"] > :nth-child(1) {
        margin-left: 15px;
    }

    .ptcatjms {
        margin: 0 15px 0 0;
    }

    .ptcatjme {
        margin: 0 0 0 15px;
    }
}


.jslider3-menu {
    min-width:270px;
    position: relative;
    border-radius: 15px;
    background: var(--bgcolor2);
    overflow: hidden;
    display:flex;
    flex-direction:column;
}

    .jslider3-menu > :nth-child(1) {
        display: flex;
        width: 100%;
        height: 50px;
        line-height: 45px;
        padding: 4px;
        font-weight: bold;
        justify-content:center;
        align-items:center;
    }



    .jslider3-menu > :nth-child(2) {
       /* width: 100%;
        height: 50px;*/
        display:none;
    }

    .jslider3-menu > :nth-child(3) {
        position: relative;
        flex: 1;
    }

    .jslider3-menu > :nth-child(4) {
        /* width: 100%;
        height: 50px;*/
        display: none;
    }

    .jslider3-menu > :nth-child(5) {
        width: 100%;
        height: 50px;
        display: none;
    }

.jslider3-menuinside {
  /*  scroll-snap-type: y mandatory;*/
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    overflow-x: initial;
    overflow-y: auto;
    max-height: 100%;
    width: 100%;
    transition: transform 250ms ease;
    scroll-behavior: smooth;
}

    .jslider3-menuinside > a {
        /*scroll-snap-align: start;*/
        display: flex;
        overflow: hidden;
        text-align: start;
        min-height: 50px;
        max-height: 50px;
        
        transition: all 0.25s;
    }

        .jslider3-menuinside > a > img {
            display: inline-block;
            height: 50px;
            max-width: 36px;
            padding: 12px 5px;
        }

        .jslider3-menuinside > a > span {
            display: flex;
            height: 50px;
            line-height: 45px;
            padding: 4px;
            text-align: start;
            font-weight: bold;
           
        }

        .jslider3-menuinside > a:hover {
            background-color: var( --mhcolor)
        }

.jslider3c2 {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 30px;
    row-gap: 25px;
    flex:1;
}

.jslider3c2 > :nth-child(1) {
   flex:75%
}

.jsliderside {
    flex: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    column-gap: 30px;
}

@media (max-width: 600px) {

    .jslider3c2 {
        flex-direction: column;
        row-gap: 15px;
    }

    .jsliderside {
        flex-direction: row;
        column-gap: 15px;
        column-gap: min(15px, 6%)
    }

}

    @media (max-width: 700px) {

        .jslider3 {
            flex-direction: column;
           
        }

            .jslider3 > div {
                flex: 1 !important;
                width: 100%;
                min-width: 100%;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

        .jslider3-menu {
            flex-direction: row;
            max-width: 100%;
            min-height: 52px;
            border-radius: 7px;
            margin-bottom: 15px;
        }

            .jslider3-menu > :nth-child(3) {
                overflow: hidden;
                height: 58px;
            }

        .jslider3-menuinside {
            flex: 1;
            display: block;
            white-space: nowrap;
            width: auto;
            position: relative;
            flex-direction: row;
            overflow-x: auto;
            overflow-y: hidden !important;
           /* scroll-snap-type: x mandatory;*/
            flex-wrap: nowrap;
        }

            .jslider3-menuinside > a {
                display: inline-block;
                margin-top: 0;
                margin: 0 4px;
            }

                .jslider3-menuinside > a > span {
                    display: inline-block;
                    overflow: hidden; 
                    white-space: nowrap; 
                }

        .jslider3-menu > :nth-child(1), .jslider3-menu > :nth-child(5) {
            display: none;
        }

        .jslider3-menu > :nth-child(2), .jslider3-menu > :nth-child(4) {
            max-width: 42px;
            min-width: 42px;
            min-height: 58px;
        }
    }

@media (max-width: 2000px) {

    .rowmenu {
        flex-direction: column;
    }

        .rowmenu  > div {
            flex: 1 !important;
            width: 100%;
            min-width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .rowmenu .jslider3-menu {
            flex-direction: row;
            max-width: 100%;
            min-height: 52px;
            border-radius: 7px;
            margin-bottom: 15px;
        }

        .rowmenu .jslider3-menu > :nth-child(3) {
            overflow: hidden;
            height: 58px;
        }

        .rowmenu .jslider3-menuinside {
            flex: 1;
            display: block;
            white-space: nowrap;
            width: auto;
            position: relative;
            flex-direction: row;
            overflow-x: auto;
            overflow-y: hidden;
     /*       scroll-snap-type: x mandatory;*/
            flex-wrap: nowrap;
        }

        .rowmenu .jslider3-menuinside > a {
            display: inline-block;
            margin-top: 0;
            margin: 0 4px;
        }

            .rowmenu .jslider3-menuinside > a > span {
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
            }

    .rowmenu .jslider3-menu > :nth-child(1),
    .rowmenu .jslider3-menu > :nth-child(5) {
        display: none;
    }

    .rowmenu .jslider3-menu > :nth-child(2),
    .rowmenu .jslider3-menu > :nth-child(4) {
        max-width: 42px;
        min-width: 42px;
        min-height: 58px;
    }

}

    .lscr2 {
        scrollbar-color: var(--mhcolor) transparent;
        scrollbar-width: thin;
    }

        .lscr2::-webkit-scrollbar-button {
            display: none;
        }

        .lscr2::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .lscr2:hover {
            scrollbar-color: rgba(var(--mcolorrgb), 0.6) transparent;
        }


.hide {
    display: none !important;
}

    .bannerimg {
        display: flex;
        padding: 0 3px;
    }

.bannerimg * {
    flex: 1;
}

        

    .prdcpnlhead {
        display: flex;
        flex-wrap: wrap;
        text-align: start;
        overflow: hidden;
        Width: 100%;
        font-size: 22px;
        font-weight: bold;
    }

        .prdcpnlhead > :nth-child(1) {
            flex: 1;
            display: flex;
            padding: 2px 10px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

            .prdcpnlhead > :nth-child(1) > :nth-child(1) {
                /*h1 div*/
                flex: 1;
            }

                .prdcpnlhead > :nth-child(1) > :nth-child(1) > :nth-child(1) {
                    /*h1*/
                    flex: 1;
                    display: inline-block !important;
                    Height: 32px;
                    line-height: 32px;
                    font-size: 22px;
                    font-weight: bold;
                    text-shadow: 0 0 1px #666;
                    color: var(--mcolor) !important
                }

                .prdcpnlhead > :nth-child(1) > :nth-child(1) > a {
                }

    .p1cont {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
    }

        .p1cont > div:nth-child(2) {
            display: flex;
            flex-wrap: nowrap;
            flex: 1;
            gap:12px;
            overflow-y: hidden;
            overflow-x: auto;
            scrollbar-width: none;
            padding: 0px 8px;
        }

.scrhdn::-webkit-scrollbar {
    width: 0; 
    height: 0; 
}

            .p1cont > div:nth-child(2)::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }

@supports not (inset: 0) {
    .p1cont > div:nth-child(2) {
        margin: 0 12px;
    }
}


    .p1cont > div:nth-child(2) {
    }

    .gpdcbtn {
        white-space: nowrap;
        white-space: pre;
        display: inline;
        text-align: center;
        background-color: var(--mncolor);
        padding: 0 8px;
        border-radius: 4px;
        font-weight: bold;
        transition: all .3s ease;
        font-size: 18px;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        overflow: initial !important;
    }

        .gpdcbtn:hover {
            background-color: var(--mhcolor);
        }
    /*    .gpdcbtn:active {
        background-color: red;
    }*/
    /*.pidlisth {
    display: flex;
    flex: 1;
    overflow-y: hidden;
    overflow-x: auto;
}*/

    .pidlistv {
        display: flex;
        flex-wrap: wrap;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        grid-template-columns: repeat(auto-fill, minmax(max(min(160px,50%),100px), 1fr));
        grid-row-gap: 10px;
    }

        .pidlistv > div {
            flex: 1;
            margin-bottom: 15px;
            min-width: 130px !important;
            max-width: 205px !important;
        }


    @supports not (display: grid) {
        .pidlistv > div {
            flex: 20%;
        }
    }

    .pidlisthn {
        display: flex;
        position: relative;
        flex: 1;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 8px 0px;
    }

        .pidlisthn::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
    /*.pidlisthnm > div {
        width: 149px !important;
        min-width: 149px !important;
    }*/

    .ypx {
        display: inline-block;
        position: relative;
        overflow: visible !important;
        width: 198px;
        min-width: 198px;
    }

    @media (max-width: 600px) {
        .ypx {
            width: 150px !important;
            min-width: 150px !important;
        }
    }

    .scrolpnlp {
        display: flex;
        height: 100%;
        position: relative;
    }

    .scrolpnl {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 42px;
    }

        .scrolpnl > * {
            cursor: pointer;
            width: 100%;
            height: 42px;
            line-height: 30px;
            font-size: 30px;
            font-weight: bold;
            overflow: hidden;
        }

    .scrolpnl1 {
        width: 42px;
        text-align: center;
        cursor: pointer;
    }

    .scrolpnl2 {
        width: 42px;
        text-align: center;
        cursor: pointer;
    }

    .scrolpnlx {
        width: 100%;
        height: 100%;
        cursor: pointer;
        font-size: 23px;
        font-weight: bold;
        overflow: hidden;
        text-align: center;
    }

    .scrolpnlview {
        padding: 10px;
        cursor: pointer;
        width: 100%;
    }

    .snload {
        width: 32px;
        height: 32px;
    }

    #hpinside {
        padding: 0 8px;
    }

    .HeaderPanel {
        background-color: var(--bgcolor);
        position: fixed;
        width: 100%;
        height: 42px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        right: 0px;
        top: 0px;
        z-index: 100000;
    }

    .masterh {
        display: flex;
        flex-wrap: wrap;
        height: 42px;
        width: 100%;
    }

    .hprow1 {
        display: flex;
        column-gap: 12px;
        width: 100%;
        padding: 8px 0 8px 0;
    }

    .hprow1big {
    }

    .hprow2 {
        display: flex;
        width: 100%;
        padding: 8px;
        height: 50px;
        display: none;
        background-color: var(--bgcolor);
    }

        .hprow2 > div {
            border: 1px solid #DADADA;
        }

    .hpi {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #h1p {
        flex-shrink: 0;
    }

    #hcenterp {
        flex: 1 0 auto;
        display: flex;
        column-gap: 12px;
        justify-content: center;
        align-items: center;
    }

    .rowgap12 {
        column-gap:12px;
    }


    @supports not (inset: 0) {
        .rowgap12 > :first-child:not(:last-child) {
            margin-right: 6px;
            margin-left: 0px;
        }

        .rowgap12 > :not(:first-child):not(:last-child) {
            margin-right: 6px;
            margin-left: 6px;
        }

        .rowgap12 > :last-child:not(:first-child) {
            margin-right: 0px;
            margin-left: 6px;
        }

        .rowgap12[dir=rtl] > :first-child:not(:last-child) {
            margin-right: 0px !important;
            margin-left: 6px !important;
        }

        .rowgap12[dir=rtl] > :last-child:not(:first-child) {
            margin-right: 6px !important;
            margin-left: 0px !important;
        }
    }


 



    #h2p {
        flex-shrink: 0;
    }

        #h2p img {
            width: 24px;
        }

    .hpi > *, .hpi > a > img, .hpi img {
        cursor: pointer;
        height: 100%;
        max-height: 24px;
    }

    .hpi > a[i=g], .hpi > a[i=g] > img {
        max-height: 32px !important;
    }

        .hpi > a[i=g] > img {
            width: 32px !important;
        }



    .hlogo {
        display: block;
        max-height: 100% !important;
        min-width: 100px;
    }

        .hlogo > img {
            display: block;
            max-height: 100% !important;
            width: auto;
        }



    #shopuserparent {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

        #shopuserparent * {
            font-size: 1rem;
            font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,sans-serif !important;
        }

        #shopuserparent > img {
            border-radius: 50%;
        }

    #pnlcart {
        display: flex;
        column-gap: 8px;
        justify-content: space-between;
    }

        #pnlcart > span {
            font-size: 20px;
            line-height: 24px;
        }


    .mgli {
    }

    .p1li {
        background-color: white;
    }

    .searchpanel {
        display: flex;
        flex: 1;
        border-radius: 6px;
        overflow: hidden;
        height: 100%;
    }

        .searchpanel > * {
            border-width: 0px;
            border-radius: 0px;
            padding: 0 5px 0 5px;
        }

        .searchpanel > select {
            background-color: #e3e3e3;
            font-size: 18px;
            line-height: 30px;
            max-width: 25%;
            min-width: 140px !important;
            background-image: linear-gradient(45deg, transparent 50%, black 50%), linear-gradient(135deg, black 50%, transparent 50%);
            background-position: calc(100% - 15px) center, calc(100% - 10px) center;
            background-size: 5px 5px, 5px 5px;
            background-repeat: no-repeat;
        }

            .searchpanel > select[dir=rtl] {
                background-position: 10px center, 15px center !important;
            }

        .searchpanel > div {
            background-color: #e3e3e3;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .searchpanel > div > * {
                height: 100%;
                max-height: 24px;
            }

    .cardw {
        overflow: hidden;
        position: relative
    }



        .cardw > :not(:first-child) {
            margin: 0 5px;
        }
        /*.cardw::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background-color: rgba(0,0,0,0.05);*/ /* border color */
        /*}*/

        .cardw > a {
            max-width: 100%;
            display: block;
        }

        .cardw > a { /*> :not(:first-child)*/
            margin: 0 5px;
        }

        .cardw:hover {
            /*box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;*/
            /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/

            z-index: 2;
            /*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;*/
            /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
        }

    .sidebar {
        text-shadow: 0 0 1px #F5F5F5;
        /* background-color: rgba(255, 255, 255, 1) !important;*/
        background-color: var(--bgcolor)
    }

    .searchpnlm {
        margin-left: -8px !important;
        margin-right: -8px !important;
        width: 100vw !important;
    }

    .fw {
        display: block;
        width: 100%;
        background-size: 100% 100%;
    }

    .imgn[src="*"] {
        opacity: 1;
    }

    .imgn[src=""], .imgn:not([src]) {
        opacity: 0;
    }

    .pd100 {
        padding-bottom: 100%;
    }

    .plchdiv {
        position: relative;
        height: 0;
        overflow: hidden;
    }

        .plchdiv img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
        }

    .my-flex-child:last-child {
        background-color: red;
    }

    .mssrch {
        width: 75%;
        max-width: 600px;
        height: 45px;
        border-radius: 8px;
        font-size: 25px;
        border-style: none;
        border-width: 1px;
        margin-bottom: 20px;
    }

    .bkbtn {
        padding: 5px;
        width: 42px;
        height: 42px;
        overflow: hidden;
        border-radius: 50%;
    }

    .tprd {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        max-width: 100%;
        aspect-ratio: 1/1;
    }

    .sq {
    }

        .sq::before {
            content: '';
            padding-top: 100%;
            float: left;
        }

        .sq::after {
            content: '';
            display: block;
            clear: both;
        }

    .xpic {
        width: 100%;
        max-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .prboxproductname {
        display: inline-block;
        max-width: 100%;
        height: 90px;
        max-height: 90px;
        padding: 3px 2px 2px 2px;
        overflow: hidden;
        font-weight: bold;
    }

    .prboxpricepanel {
        display: flex;
        /*justify-content: space-between;*/
        justify-content:center;
        height: 20px;
        max-width: 100%;
        overflow: hidden;
        font-size: 12pt;
        line-height: 12pt;
        font-weight: bold;
    }

        .prboxpricepanel span:first-child {
            overflow: hidden;
            color: gray;
            height: 20px;
            max-height: 20px;
            text-decoration: line-through;
        }

        .prboxpricepanel span:nth-child(2) {
            height: 20px;
            background-color: #FF574B;
            max-height: 20px;
            color: White;
            text-align: end;
        }

    .prboxpanelicons {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 34px;
        padding-right: 6px;
        padding-left: 6px;
    }

        .prboxpanelicons > img {
            height: 100%;
            cursor: pointer;
        }

    .lbl_price {
        margin-bottom: 5px;
        font-size: 14pt;
        font-weight:bold;
        overflow-y: hidden;
        width: 100%;
        color:var(--mcolor);
    }

    .iconcart {
        width: 32px;
        height: 32px;
        flex: 1;
        height: 32px;
        line-height: 32px;
        cursor: pointer;
        user-select: none;
        text-align: end;
    }

    .footercontainer {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        background-color: #282828;
        color: white;
        flex-shrink: 0;
        /*z-index: 99999;*/
    }

        .footercontainer > div:first-of-type {
            padding: 10px;
            width: 100%;
            max-width: 1236px;
        }

    .footerpanel {
        width: 100%;
    }

    .footerpanelcenter {
        width: 100%;
        flex-wrap: wrap;
        gap: 15px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, max-content));
    }

        .footerpanelcenter > div {
            display: flex;
            flex-wrap: wrap;
        }

            .footerpanelcenter > div > span:first-of-type {
                display: block;
                text-align: start;
                width: 100%;
                margin-top: 5px;
                font-size: 16px;
                font-weight: bold;
            }

            .footerpanelcenter > div > div {
                display: flex;
                flex-wrap: nowrap;
            }

                .footerpanelcenter > div > div > div {
                    display: flex;
                    flex-wrap: nowrap;
                }

    .roundlabel {
        color: white;
        border-color: white;
        background-color: #FF574B;
        border-width: 1px;
        border-style: solid;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        position: absolute;
        top: -8px;
        left: 10px;
        font-weight: bold;
        font-size: 20px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    }

    .bgflip {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
    }

    .sidepanel-imgbox-big {
        margin-top: 10px;
        margin-left: 10px;
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .nomargins {
        margin: 0px !important;
        padding: 0px !important;
    }

    .grecaptcha-badge {
        opacity: 0;
    }


/* صندوق الاقتراحات */
.suggestion-box {
    position: absolute;
    background-color: var(--bgcolor);
    color: var(--txcolor);
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999999;
    display: none;
    max-height: 425px;
    overflow-y: auto;
    font-family: Arial, sans-serif;
    font-size: 14pt;
}

/* كل عنصر اقتراح */
.suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
    max-height: 42px;
    overflow: hidden;
}

    /* تأثير hover */
    .suggestion-item:hover,
    .suggestion-item.selected {
        background-color: var(--mncolor);
    }


    @media all and (display-mode: standalone) {
    }

    @keyframes scalezoom {
        0% {
            transform: scale(0.4);
            -webkit-transform: scale(0.4);
            opacity: 1;
        }

        100% {
            transform: translateX(0);
            -webkit-transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .btshad {
        box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    }

    /*.radio {
    color: #798188;
    cursor: pointer;
    margin-left: .5em;
    display: inline-block;
}
.radio,
.radio span:before {
        -webkit-transition: .25s ease;
        -moz-transition: .25s ease;
        -ms-transition: .25s ease;
        -o-transition: .25s ease;
        transition: .25s ease;
}
.radio span {
            width: 1.5em;
            height: 1.5em;
            margin-right: .5em;
            border-radius: 3em;
            background: #202325;
            vertical-align: top;
            display: inline-block;
        }
.radio span:before {
                content: '';
                width: .7em;
                height: .7em;
                margin: .4em;
                border-radius: 3em;
                display: inline-block;
                background-color: rgba(0,0,0,0);
            }
.radio:hover span:before {
            background-color: rgba(255,255,255, .9);
}
*/
    /*------------------------------------*/

    /*input[type="radio"]:checked + .radio {
    color: #f8f8f8;
}

    input[type="radio"]:checked + .radio span:before {
        background-color: #9fd86b;
        width: .9em;
        height: .9em;
        margin: .3em;
        -webkit-animation: pulse .25s;
        -moz-animation: pulse .25s;
        -o-animation: pulse .25s;
        animation: pulse .25s;
    }*/

/* ============================================================
   jGrid — نسخة grid من jflexbox. الأعمدة عبر data-cols.
   ============================================================ */
.jgrid {
    user-select: none;
    margin-left: 3px;
    margin-right: 3px;
}

.jgrid-track {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(5, 1fr);
    column-gap: min(14px, 4%);
    row-gap: 18px;
}

.jgrid[data-cols="1"] .jgrid-track { grid-template-columns: repeat(1, 1fr); }
.jgrid[data-cols="2"] .jgrid-track { grid-template-columns: repeat(2, 1fr); }
.jgrid[data-cols="3"] .jgrid-track { grid-template-columns: repeat(3, 1fr); }
.jgrid[data-cols="4"] .jgrid-track { grid-template-columns: repeat(4, 1fr); }
.jgrid[data-cols="5"] .jgrid-track { grid-template-columns: repeat(5, 1fr); }
.jgrid[data-cols="6"] .jgrid-track { grid-template-columns: repeat(6, 1fr); }
.jgrid[data-cols="7"] .jgrid-track { grid-template-columns: repeat(7, 1fr); }
.jgrid[data-cols="8"] .jgrid-track { grid-template-columns: repeat(8, 1fr); }

/* خلية = صورة فوق + عنوان تحت. .ja يحمل نسبة الأبعاد وحده */
.jgrid .grid-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jgrid .grid-cell .ja {
    display: block;
    width: 100%;
    max-width: var(--giw, 100%);   /* أقصى عرض للصورة داخل العمود */
    margin-inline: auto;            /* توسيط الصورة عند تقييد عرضها */
}

.jgrid .grid-cap {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.35;
    color: var(--gc, inherit);
    overflow-wrap: break-word;
}

/* أحجام خط العنوان (data-capsize) */
.jgrid[data-capsize="small"]  .grid-cap { font-size: 12px; }
.jgrid[data-capsize="medium"] .grid-cap { font-size: 15px; }
.jgrid[data-capsize="large"]  .grid-cap { font-size: 18px; }
.jgrid[data-capsize="xlarge"] .grid-cap { font-size: 22px; }

/* موبايل: عمودان دائماً مهما كان data-cols */
@media (max-width: 660px) {
    .jgrid[data-cols="3"] .jgrid-track,
    .jgrid[data-cols="4"] .jgrid-track,
    .jgrid[data-cols="5"] .jgrid-track,
    .jgrid[data-cols="6"] .jgrid-track,
    .jgrid[data-cols="7"] .jgrid-track,
    .jgrid[data-cols="8"] .jgrid-track {
        grid-template-columns: repeat(2, 1fr);
        column-gap: min(10px, 4%);
        row-gap: 14px;
    }

    .jgrid .grid-cap { font-size: 13px; }
}