.elementor-27764 .elementor-element.elementor-element-056be28{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27764 .elementor-element.elementor-element-4c0829ee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product{text-align:center;border-style:solid;border-width:1px 1px 1px 1px;border-radius:18px;padding:1px 1px 1px 1px;box-shadow:0px 12px 35px 0px rgba(0, 80.99999999999991, 241.99999999999997, 0.1);background-color:#FFFFFF;border-color:var( --e-global-color-910c1dd );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products .attachment-woocommerce_thumbnail{border-style:none;border-radius:18px 18px 18px 18px;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .woocommerce-loop-product__title{color:var( --e-global-color-36e9172 );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{color:var( --e-global-color-36e9172 );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{font-family:"Alexandria", Sans-serif;font-size:13px;font-weight:600;text-transform:capitalize;line-height:40px;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .star-rating{color:#E5BE37;font-size:13px;margin-bottom:8px;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .star-rating::before{color:var( --e-global-color-910c1dd );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .price{color:var( --e-global-color-primary );font-family:"Alexandria", Sans-serif;font-size:18px;font-weight:600;text-transform:capitalize;line-height:22px;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .price ins{color:var( --e-global-color-primary );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .price ins .amount{color:var( --e-global-color-primary );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .price del{color:var( --e-global-color-08647c7 );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .price del .amount{color:var( --e-global-color-08647c7 );}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .price del {font-family:"Alexandria", Sans-serif;font-size:9px;font-weight:600;text-transform:capitalize;line-height:1.2px;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product .button{border-style:solid;}.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products ul.products li.product:hover{box-shadow:0px 12px 35px 0px rgba(0, 80.99999999999991, 241.99999999999997, 0.17);}@media(min-width:768px){.elementor-27764 .elementor-element.elementor-element-4c0829ee{--content-width:1320px;}}@media(max-width:1024px){.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-27764 .elementor-element.elementor-element-3e9ed9c9.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for html, class: .elementor-element-50c4b67 */.sl-shop-hero {
    width: 100%;
    min-height: 320px;
    padding: 42px 20px 52px;
    background:
        radial-gradient(circle at 18% 55%, rgba(25, 112, 255, .55), transparent 28%),
        linear-gradient(135deg, #04133a 0%, #062b70 48%, #020b26 100%);
    overflow: hidden;
    direction: rtl;
}

.sl-shop-hero-inner {
    width: min(100%, 1320px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 35px;
}

.sl-shop-hero-content {
    text-align: right;
}

.sl-shop-badge {
    display: none;
}

.sl-shop-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 900;
    line-height: 1.25;
}

.sl-shop-hero p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.9;
    font-weight: 500;
}

.sl-shop-features {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 54px;
    flex-wrap: nowrap;
}

.sl-shop-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
}

.sl-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-feature-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sl-shop-feature div {
    display: flex;
    flex-direction: column;
}

.sl-shop-feature strong {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
    white-space: nowrap;
}

.sl-shop-feature small {
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 2px;
    white-space: nowrap;
}

.sl-shop-hero-image {
    text-align: left;
    position: relative;
}

.sl-shop-hero-image img {
    width: min(100%, 470px);
    display: block;
    margin-right: auto;
    margin-left: 0;
    filter: drop-shadow(0 24px 32px rgba(0,0,0,.38));
}

/* Tablet */
@media (max-width: 991px) {
    .sl-shop-hero {
        padding: 38px 16px 48px;
    }

    .sl-shop-hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sl-shop-hero-content {
        text-align: center;
        order: 1;
    }

    .sl-shop-hero-image {
        order: 2;
        text-align: center;
    }

    .sl-shop-hero-image img {
        margin: 0 auto;
        width: min(100%, 360px);
    }

    .sl-shop-features {
        justify-content: center;
        gap: 28px;
        flex-wrap: wrap;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .sl-shop-hero {
        min-height: auto;
        padding: 34px 14px 42px;
    }

    .sl-shop-hero h1 {
        font-size: 28px;
    }

    .sl-shop-hero p {
        font-size: 14px;
    }

    .sl-shop-features {
        margin-top: 25px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        justify-items: center;
    }

    .sl-shop-feature {
        min-width: 210px;
        justify-content: flex-start;
    }

    .sl-shop-hero-image img {
        width: min(100%, 280px);
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6b8f447 *//* ===== Floating Shop Categories Bar ===== */

.sl-shop-categories-wrap {
    width: min(100% - 28px, 1320px);
    margin: -34px auto 42px;
    position: relative;
    z-index: 30;
    direction: rtl;
}

.sl-shop-categories {
    background: #fff;
    border: 1px solid #e8eef8;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(8, 28, 70, .13);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    overflow: hidden;
}

.sl-shop-cat {
    min-height: 92px;
    padding: 16px 10px 14px;
    text-decoration: none !important;
    color: #0b1f4d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-left: 1px solid #eef2f7;
    position: relative;
    transition: .25s ease;
}

.sl-shop-cat:last-child {
    border-left: 0;
}

.sl-cat-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-cat-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #2f6df6;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sl-cat-title {
    font-size: 12px;
    line-height: 1.45;
    font-weight: 800;
    color: #0b1f4d;
    text-align: center;
}

.sl-shop-cat:hover {
    background: #f8fbff;
}

.sl-shop-cat:hover .sl-cat-icon svg {
    transform: translateY(-3px);
}

.sl-shop-cat.active {
    background: #fff;
    box-shadow: inset 0 -4px 0 #2f6df6;
}

.sl-shop-cat.active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid #2f6df6;
    border-radius: 16px;
    pointer-events: none;
}

.sl-shop-cat.active .sl-cat-title {
    color: #2f6df6;
}

/* Tablet */
@media (max-width: 1024px) {
    .sl-shop-categories {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sl-shop-categories::-webkit-scrollbar {
        display: none;
    }

    .sl-shop-cat {
        min-width: 145px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .sl-shop-categories-wrap {
        width: calc(100% - 16px);
        margin: -28px auto 30px;
    }

    .sl-shop-cat {
        min-width: 125px;
        min-height: 82px;
        padding: 12px 8px;
    }

    .sl-cat-icon svg {
        width: 28px;
        height: 28px;
    }

    .sl-cat-title {
        font-size: 11px;
    }
}/* End custom CSS */
/* Start custom CSS for woocommerce-products, class: .elementor-element-3e9ed9c9 *//* =====================================================
   Safety Life Responsive RTL Header
===================================================== */

.sl-site-header {
    --sl-header-blue: #071a46;
    --sl-header-primary: #2563eb;
    --sl-header-text: #10234f;
    --sl-header-border: #e6edf8;
    --sl-header-bg: #ffffff;

    position: relative;
    width: 100%;
    z-index: 999;
    direction: rtl;
    font-family: inherit;
}

/* منع أي هوامش غير مرغوبة */
.sl-site-header,
.sl-site-header * {
    box-sizing: border-box;
}

/* =====================================================
   Top Bar
===================================================== */

.sl-header-topbar {
    width: 100%;
    min-height: 30px;

    padding: 5px 24px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    background: var(--sl-header-blue);
    color: #ffffff;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.sl-header-topbar a {
    color: #ffffff !important;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.2s ease;
}

.sl-header-topbar a:hover {
    opacity: 1;
}

/* كونتينر داخلي للشريط العلوي إن وجد */
.sl-header-topbar > .e-con-inner {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* =====================================================
   Main Header
===================================================== */

.sl-header-main {
    width: 100%;
    min-height: 70px;

    padding: 8px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    background: var(--sl-header-bg);
    border-bottom: 1px solid var(--sl-header-border);

    box-shadow: 0 5px 20px rgba(7, 26, 70, 0.05);
}

/* لو الكونتينر يحتوي على e-con-inner */
.sl-header-main > .e-con-inner {
    width: 100%;
    max-width: 1240px;
    min-height: 54px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* =====================================================
   Logo
===================================================== */

.sl-header-logo {
    flex: 0 0 auto;
    width: 150px;
    min-width: 130px;
}

.sl-header-logo img {
    display: block;
    width: 100% !important;
    max-width: 150px !important;
    height: auto !important;
    object-fit: contain;
}

/* =====================================================
   Navigation
===================================================== */

.sl-header-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.sl-header-nav .elementor-nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    margin: 0;
    padding: 0;

    direction: rtl;
}

.sl-header-nav .elementor-nav-menu > li {
    margin: 0;
    padding: 0;
}

.sl-header-nav .elementor-item {
    position: relative;

    padding: 12px 10px !important;

    color: var(--sl-header-text) !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3;

    white-space: nowrap;

    border-radius: 8px;
    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.sl-header-nav .elementor-item:hover,
.sl-header-nav .elementor-item.elementor-item-active {
    color: var(--sl-header-primary) !important;
    background: #f3f7ff;
}

/* الخط الموجود أسفل الرابط الحالي */
.sl-header-nav .elementor-item::after {
    content: "";

    position: absolute;
    right: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: var(--sl-header-primary);
    border-radius: 10px;

    transform: translateX(50%);
    transition: width 0.25s ease;
}

.sl-header-nav .elementor-item:hover::after,
.sl-header-nav .elementor-item.elementor-item-active::after {
    width: 22px;
}

/* القوائم المنسدلة */
.sl-header-nav .sub-menu,
.sl-header-nav .elementor-nav-menu--dropdown {
    direction: rtl;
    text-align: right;

    border: 1px solid var(--sl-header-border) !important;
    border-radius: 12px !important;

    background: #ffffff !important;

    box-shadow: 0 16px 38px rgba(7, 26, 70, 0.14) !important;

    overflow: hidden;
}

.sl-header-nav .sub-menu .elementor-sub-item {
    padding: 11px 15px !important;

    color: var(--sl-header-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    border-bottom: 1px solid #eef2f8;
}

.sl-header-nav .sub-menu .elementor-sub-item:hover {
    color: var(--sl-header-primary) !important;
    background: #f4f7ff !important;
}

/* =====================================================
   Header Actions
===================================================== */

.sl-header-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

    direction: ltr;
}

/* إعادة اتجاه محتوى الأزرار للعربي */
.sl-header-actions > * {
    direction: rtl;
}

.sl-header-search,
.sl-header-language,
.sl-header-cart {
    flex: 0 0 auto;
}

.sl-header-search a,
.sl-header-language a,
.sl-header-cart a {
    text-decoration: none !important;
}

/* الأيقونات الدائرية */
.sl-header-search,
.sl-header-cart {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #e1e9f6;
    border-radius: 50%;

    background: #ffffff;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.sl-header-search:hover,
.sl-header-cart:hover {
    background: #f2f6ff;
    border-color: #bfd3ff;
    transform: translateY(-1px);
}

/* زر تسجيل الدخول */
.sl-header-login a,
.sl-header-login .elementor-button {
    min-height: 34px;

    padding: 7px 13px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 0;
    border-radius: 7px !important;

    background: var(--sl-header-primary) !important;
    color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1;

    box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.sl-header-login a:hover,
.sl-header-login .elementor-button:hover {
    background: #174fc5 !important;
    transform: translateY(-1px);
}

/* اللغة */
.sl-header-language {
    min-height: 34px;

    padding: 4px 7px;

    display: flex;
    align-items: center;
    gap: 5px;

    color: var(--sl-header-text);
    font-size: 11px;
    font-weight: 800;

    border-radius: 7px;
}

.sl-header-language img {
    width: 20px !important;
    height: 14px !important;
    object-fit: cover;
    border-radius: 2px;
}

/* أيقونات الهيدر */
.sl-header-actions svg {
    width: 17px;
    height: 17px;
}

.sl-header-actions i {
    font-size: 16px;
}

/* =====================================================
   Sticky Header
===================================================== */

.sl-site-header {
    position: sticky;
    top: 0;
}

.admin-bar .sl-site-header {
    top: 32px;
}

/* =====================================================
   Tablet
===================================================== */

@media (max-width: 1100px) {

    .sl-header-main {
        padding-inline: 18px;
        gap: 14px;
    }

    .sl-header-main > .e-con-inner {
        gap: 14px;
    }

    .sl-header-logo {
        width: 125px;
        min-width: 115px;
    }

    .sl-header-logo img {
        max-width: 125px !important;
    }

    .sl-header-nav .elementor-nav-menu {
        gap: 0;
    }

    .sl-header-nav .elementor-item {
        padding-inline: 7px !important;
        font-size: 12px !important;
    }

    .sl-header-actions {
        gap: 5px;
    }

    .sl-header-language {
        padding-inline: 4px;
    }
}

/* =====================================================
   Mobile and small tablet
===================================================== */

@media (max-width: 767px) {

    /* إخفاء الشريط العلوي لتوفير مساحة */
    .sl-header-topbar {
        display: none !important;
    }

    .sl-site-header {
        position: sticky;
        top: 0;
    }

    .admin-bar .sl-site-header {
        top: 46px;
    }

    .sl-header-main {
        min-height: 64px;

        padding: 7px 12px;

        gap: 8px;

        box-shadow: 0 5px 18px rgba(7, 26, 70, 0.09);
    }

    .sl-header-main > .e-con-inner {
        min-height: 50px;
        gap: 8px;
    }

    /* اللوجو */
    .sl-header-logo {
        order: 1;

        width: 110px;
        min-width: 100px;

        margin-inline-end: 0;
    }

    .sl-header-logo img {
        max-width: 110px !important;
    }

    /* القائمة */
    .sl-header-nav {
        order: 3;

        flex: 0 0 auto;
        width: auto;
        min-width: auto;
    }

    /* الأدوات */
    .sl-header-actions {
        order: 2;

        margin-inline-start: auto;

        gap: 5px;
    }

    /* إخفاء العناصر غير الضرورية */
    .sl-header-login,
    .sl-header-language,
    .sl-header-search {
        display: none !important;
    }

    /* الإبقاء على السلة */
    .sl-header-cart {
        display: flex !important;

        width: 34px;
        height: 34px;
    }

    /* زر الهامبرجر */
    .sl-header-nav .elementor-menu-toggle {
        width: 38px;
        height: 38px;

        margin: 0 !important;
        padding: 0 !important;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #dbe6f7;
        border-radius: 9px;

        background: #f5f8ff !important;
        color: var(--sl-header-primary) !important;

        font-size: 20px;
    }

    .sl-header-nav .elementor-menu-toggle:hover,
    .sl-header-nav .elementor-menu-toggle.elementor-active {
        background: var(--sl-header-primary) !important;
        color: #ffffff !important;
        border-color: var(--sl-header-primary);
    }

    /* القائمة المفتوحة */
    .sl-header-nav .elementor-nav-menu--dropdown {
        position: fixed !important;

        top: 64px !important;
        right: 10px !important;
        left: 10px !important;

        width: auto !important;
        max-height: calc(100vh - 80px);

        margin: 0 !important;
        padding: 8px !important;

        overflow-y: auto;

        border: 1px solid #dfe8f6 !important;
        border-radius: 14px !important;

        background: #ffffff !important;

        box-shadow: 0 18px 45px rgba(7, 26, 70, 0.19) !important;
    }

    .admin-bar .sl-header-nav .elementor-nav-menu--dropdown {
        top: 110px !important;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item {
        width: 100%;

        padding: 13px 14px !important;

        justify-content: flex-start;

        color: var(--sl-header-text) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: right;

        border-radius: 9px;
        border-bottom: 1px solid #edf1f7;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item:hover,
    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item-active {
        color: var(--sl-header-primary) !important;
        background: #f1f6ff !important;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item::after {
        display: none;
    }

    /* السهم الخاص بالقائمة الفرعية */
    .sl-header-nav .sub-arrow {
        margin-right: auto !important;
        margin-left: 0 !important;
    }
}

/* =====================================================
   Very Small Mobile
===================================================== */

@media (max-width: 380px) {

    .sl-header-main {
        padding-inline: 8px;
    }

    .sl-header-logo {
        width: 96px;
        min-width: 90px;
    }

    .sl-header-logo img {
        max-width: 96px !important;
    }

    .sl-header-cart,
    .sl-header-nav .elementor-menu-toggle {
        width: 34px;
        height: 34px;
    }
}
إعداد مهم داخل ويدجت القائمة
في ويدجت Nav Menu داخل Elementor:

اجعل Layout على Horizontal.

اجعل Breakpoint على Tablet أو Mobile.

اجعل Align في الديسكتوب Center.

فعّل زر القائمة المنسدلة على الموبايل.

ولو وجدت أن ترتيب الموبايل غير مناسب، اجعل ترتيب العناصر داخل الكونتينر من اليمين لليسار هكذا:

اللوجو ← مساحة فارغة ← السلة ← زر القائمة
الكود مصمم بحيث يظل الهيدر خفيفًا مثل الموجود في الصورة، لكن على الموبايل يخفي البحث واللغة وزر الدخول ويُظهرهم داخل القائمة عند الحاجة، بدل تزاحم العناصر.


new.jpg
old.jpg

Pasted text(5).txt
Document
هو بعد محطيت ال css الشكل مختلف وفيه لغبطه
حطيت لكل الشكل الجديد new والقديم بترتيبه old
ودا الكود الى  الى من المتصفح عشان تعرف الترتيب

1(8).jpg
2(6).png
مرفق الشكل الحالى من الشاشات الكبيرة والموبايل

الشاشات الكبيرة
الدايرة الحمرا بتاعته الكارت مش مظبوطه

وعلى الموبايل مفيش تنسيق وايقونه الدخول مش ظاهرة ولا ايقونه اللغه وزر التواصل ممكن نضيفه مع المنيو اعالم على الشاشات الصغيرة والهيدر العلوى مش ظاهر على الموبايل لازم له حل بريميم وكويس

Thought for 1m 2s
تمام، الصور وضحت المشاكل:

عدّاد السلة الأحمر واخد min-width وPadding من Elementor، فظهر بيضاوي بدل دائرة.

كود الموبايل السابق كان بيخفي الشريط العلوي والحساب واللغة وزر التواصل.

عناصر الحساب واللغة والتواصل موجودة داخل .sl-header-actions وليست داخل القائمة نفسها، لذلك CSS وحده لا يقدر ينقلها فعليًا داخل قائمة Elementor. 


هنعمل حل أنظف: نصلح عدّاد السلة، نظهر الشريط العلوي بشكل مرتب، ونضيف التواصل والحساب والإمارات كعناصر مخصصة داخل قائمة الموبايل.

أولًا: أضف 3 عناصر لقائمة الموقع
ادخل إلى:

المظهر → القوائم

من أعلى الصفحة افتح خيارات الشاشة وفعّل:

CSS Classes
أضف 3 روابط مخصصة للقائمة:

تواصل معنا
الرابط:

https://safetylifesec.com/contacts/
النص:

تواصل معنا
CSS Classes:

sl-mobile-only sl-menu-contact
حسابي
الرابط:

https://safetylifesec.com/my-account/
النص:

حسابي
CSS Classes:

sl-mobile-only sl-menu-account
الإمارات
الرابط:

https://uae.safetylifesec.com/?skipredirect
النص:

الإمارات UAE
CSS Classes:

sl-mobile-only sl-menu-uae
ضع العناصر الثلاثة في نهاية القائمة واحفظها.

ثانيًا: أضف CSS التالي في نهاية الكود الحالي
لا تحذف كود الديسكتوب الحالي. أضف هذا الكود في آخر الـCSS حتى يتغلب على القواعد السابقة:

/* =====================================================
   Safety Life Header - Final Mobile & Cart Fixes
===================================================== */

/* إخفاء عناصر الموبايل من قائمة الديسكتوب */
.sl-header-nav .elementor-nav-menu--main .sl-mobile-only {
    display: none !important;
}

/* =====================================================
   Cart Counter Fix
===================================================== */

.sl-header-cart .elementor-button-icon {
    position: relative !important;
    overflow: visible !important;
}

/* تحويل العداد الأحمر إلى دائرة حقيقية */
.sl-header-cart .elementor-button-icon-qty {
    position: absolute !important;

    top: -9px !important;
    right: -10px !important;
    left: auto !important;

    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;

    height: 20px !important;
    min-height: 20px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;
    background: #e94b4b !important;

    border: 2px solid #fff !important;
    border-radius: 50% !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.28);

    transform: none !important;
}

/* =====================================================
   Tablet
===================================================== */

@media (max-width: 1024px) {

    .sl-header-main {
        position: relative !important;
    }

    /* إخفاء العناصر المضافة من قائمة الديسكتوب الأساسية */
    .sl-header-nav .elementor-nav-menu--main .sl-mobile-only {
        display: none !important;
    }

    /* وإظهارها داخل القائمة المنسدلة فقط */
    .sl-header-nav .elementor-nav-menu--dropdown .sl-mobile-only {
        display: block !important;
    }
}

/* =====================================================
   Premium Mobile Header
===================================================== */

@media (max-width: 767px) {

    /* جعل الهيدر بعرض الشاشة بالكامل */
    .sl-site-header {
        width: 100% !important;
        max-width: none !important;

        background: #fff;
        direction: rtl;
    }

    .sl-site-header > .e-con-inner {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* =================================================
       Mobile Top Bar
    ================================================= */

    /* إظهار الشريط العلوي بدل إخفائه */
    .sl-header-topbar {
        --display: flex !important;

        display: flex !important;

        width: 100% !important;
        min-height: 52px !important;

        padding: 5px 10px !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        background: #06183f !important;
        color: #fff !important;
    }

    .sl-header-topbar .elementor-widget-icon-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sl-header-topbar .elementor-widget-container {
        width: 100% !important;
    }

    /* الهاتف والبريد في صف والعنوان في صف */
    .sl-header-topbar .elementor-icon-list-items {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-content: center;

        gap: 2px 10px;

        margin: 0 !important;
        padding: 0 !important;

        direction: rtl;
    }

    .sl-header-topbar .elementor-icon-list-item {
        min-width: 0;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        white-space: normal !important;
    }

    /* العنوان يأخذ الصف بالكامل */
    .sl-header-topbar .elementor-icon-list-item:nth-child(3) {
        grid-column: 1 / -1;
        justify-content: center !important;
        text-align: center;
    }

    .sl-header-topbar .elementor-icon-list-item a {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100%;

        color: #fff !important;

        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.4;

        text-decoration: none !important;
    }

    .sl-header-topbar .elementor-icon-list-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* =================================================
       Main Mobile Header
    ================================================= */

    .sl-header-main {
        --flex-direction: row !important;
        --flex-wrap: nowrap !important;
        --align-items: center !important;
        --justify-content: flex-start !important;
        --gap: 7px !important;

        position: relative !important;

        width: 100% !important;
        min-height: 72px !important;

        padding: 8px 12px !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        gap: 7px !important;

        background: #fff !important;

        border-bottom: 1px solid #dfe7f4;
        box-shadow: 0 5px 20px rgba(7, 26, 70, 0.09);
    }

    /* اللوجو على اليمين */
    .sl-header-logo {
        --width: 130px !important;

        order: 1;

        width: 130px !important;
        max-width: 130px !important;
        min-width: 115px !important;

        flex: 0 1 130px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sl-header-logo img {
        display: block;

        width: 100% !important;
        max-width: 130px !important;
        height: auto !important;

        margin: 0 !important;
        object-fit: contain;
    }

    /* الأدوات في المنتصف واليسار */
    .sl-header-actions {
        --width: auto !important;
        --flex-direction: row !important;
        --flex-wrap: nowrap !important;
        --gap: 5px !important;

        order: 2;

        width: auto !important;
        flex: 0 0 auto !important;

        margin-inline-start: auto !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        gap: 5px !important;

        direction: ltr;
    }

    /* إخفاء النسخ الأصلية لأنها ستظهر داخل القائمة */
    .sl-header-actions .elementor-widget-button,
    .sl-header-login,
    .sl-header-language {
        display: none !important;
    }

    /* =================================================
       Mobile Cart
    ================================================= */

    .sl-header-cart {
        --width: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;

        display: flex !important;
        align-items: center;
        justify-content: center;

        padding: 0 !important;

        border: 1px solid #e0e8f5 !important;
        border-radius: 10px !important;

        background: #f7f9fd !important;
    }

    .sl-header-cart .elementor-menu-cart__toggle_button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;

        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* إخفاء سعر السلة على الموبايل */
    .sl-header-cart .elementor-button-text {
        display: none !important;
    }

    .sl-header-cart .elementor-button-icon svg {
        width: 23px !important;
        height: 23px !important;

        fill: #2563eb !important;
    }

    .sl-header-cart .elementor-button-icon-qty {
        top: -8px !important;
        right: -9px !important;

        width: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;

        height: 19px !important;
        min-height: 19px !important;

        font-size: 8px !important;
    }

    /* =================================================
       Mobile Search
    ================================================= */

    .sl-header-search {
        --width: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;

        display: flex !important;
        align-items: center;
        justify-content: center;

        padding: 0 !important;

        border: 1px solid #e0e8f5 !important;
        border-radius: 10px !important;

        background: #f7f9fd !important;
    }

    .sl-header-search .dgwt-wcas-search-wrapp {
        width: 38px !important;
        min-width: 38px !important;

        margin: 0 !important;
    }

    .sl-header-search .dgwt-wcas-search-icon {
        width: 38px !important;
        height: 38px !important;

        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .sl-header-search .dgwt-wcas-ico-magnifier-handler {
        width: 21px !important;
        height: 21px !important;
    }

    /* =================================================
       Mobile Menu Toggle
    ================================================= */

    .sl-header-nav-wrap {
        --width: 40px !important;

        order: 3;

        width: 40px !important;
        min-width: 40px !important;

        flex: 0 0 40px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sl-header-nav {
        width: 40px !important;
        min-width: 40px !important;

        margin: 0 !important;
    }

    .sl-header-nav .elementor-menu-toggle {
        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #2563eb !important;
        background: #f1f6ff !important;

        border: 1px solid #d8e5fb !important;
        border-radius: 10px !important;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            transform 0.2s ease;
    }

    .sl-header-nav .elementor-menu-toggle:hover,
    .sl-header-nav .elementor-menu-toggle.elementor-active,
    .sl-header-nav .elementor-menu-toggle[aria-expanded="true"] {
        color: #fff !important;
        background: #2563eb !important;
        border-color: #2563eb !important;

        transform: scale(1.03);
    }

    .sl-header-nav .elementor-menu-toggle svg {
        width: 21px !important;
        height: 21px !important;

        fill: currentColor !important;
    }

    /* اجعل الهيدر مرجعًا للقائمة المفتوحة */
    .sl-header-nav,
    .sl-header-nav .elementor-widget-container {
        position: static !important;
    }

    /* =================================================
       Dropdown Menu
    ================================================= */

    .sl-header-nav .elementor-nav-menu--dropdown {
        position: absolute !important;

        top: calc(100% + 1px) !important;
        right: 10px !important;
        left: 10px !important;

        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 145px);

        margin: 0 !important;
        padding: 10px !important;

        overflow-x: hidden;
        overflow-y: auto;

        direction: rtl;
        text-align: right;

        background: rgba(255, 255, 255, 0.98) !important;

        border: 1px solid #dfe7f4 !important;
        border-radius: 16px !important;

        box-shadow:
            0 25px 60px rgba(7, 26, 70, 0.20),
            0 5px 18px rgba(7, 26, 70, 0.08) !important;

        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        z-index: 9999 !important;
    }

    /* تحويل عناصر القائمة إلى Grid */
    .sl-header-nav .elementor-nav-menu--dropdown > ul {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* عناصر القائمة الأساسية تأخذ العرض بالكامل */
    .sl-header-nav .elementor-nav-menu--dropdown > ul > li {
        grid-column: 1 / -1;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item {
        width: 100%;

        min-height: 47px;
        padding: 12px 14px !important;

        display: flex !important;
        align-items: center;
        justify-content: flex-start;

        color: #0b1d4d !important;
        background: #f8faff !important;

        border: 1px solid #edf1f7 !important;
        border-radius: 10px !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.4;
        text-align: right;

        transition:
            color 0.2s ease,
            background 0.2s ease,
            border-color 0.2s ease;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item:hover,
    .sl-header-nav .elementor-nav-menu--dropdown .elementor-item-active {
        color: #2563eb !important;
        background: #f0f5ff !important;
        border-color: #cddcff !important;
    }

    /* =================================================
       Contact Button Inside Mobile Menu
    ================================================= */

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-contact {
        display: block !important;
        grid-column: 1 / -1;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-contact > a {
        justify-content: center !important;

        color: #fff !important;
        background: linear-gradient(
            135deg,
            #2563eb,
            #174fc5
        ) !important;

        border-color: transparent !important;

        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
    }

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-contact > a::before {
        content: "☎";
        margin-left: 7px;
        font-size: 15px;
    }

    /* =================================================
       Account and UAE Inside Mobile Menu
    ================================================= */

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-account,
    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-uae {
        display: block !important;
        grid-column: auto;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-account > a,
    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-uae > a {
        justify-content: center !important;
        text-align: center;

        color: #0b1d4d !important;
        background: #eef4ff !important;

        border-color: #d7e4fc !important;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-account > a::before {
        content: "◉";
        margin-left: 6px;

        color: #2563eb;
        font-size: 16px;
    }

    .sl-header-nav .elementor-nav-menu--dropdown .sl-menu-uae > a::before {
        content: "🇦🇪";
        margin-left: 6px;
        font-size: 16px;
    }
}

/* =====================================================
   Very Small Phones
===================================================== */

@media (max-width: 390px) {

    .sl-header-main {
        padding-inline: 8px !important;
        gap: 5px !important;
    }

    .sl-header-logo {
        --width: 112px !important;

        width: 112px !important;
        max-width: 112px !important;
        min-width: 100px !important;

        flex-basis: 112px !important;
    }

    .sl-header-logo img {
        max-width: 112px !important;
    }

    .sl-header-cart,
    .sl-header-search,
    .sl-header-nav-wrap,
    .sl-header-nav,
    .sl-header-nav .elementor-menu-toggle {
        width: 37px !important;
        min-width: 37px !important;
        height: 37px !important;
    }

    .sl-header-actions {
        gap: 4px !important;
    }

    .sl-header-topbar .elementor-icon-list-item a {
        font-size: 9px !important;
    }
}
النتيجة المتوقعة
على الشاشات الكبيرة:

عدّاد السلة يصبح دائرة صغيرة فوق أيقونة السلة.

السعر يظل ظاهرًا.

الحساب واللغة وزر التواصل يظلون في أماكنهم.

على الموبايل:

الشريط العلوي يظهر بمعلومات الاتصال والعنوان في صفين.

اللوجو يظل يمينًا.

السلة والبحث وزر القائمة يظهرون بشكل متناسق.

القائمة تفتح كبطاقة بعرض الشاشة.

زر «تواصل معنا» يظهر داخل القائمة باللون الأزرق.

«حسابي» و«الإمارات» يظهران بجانب بعضهما أسفل القائمة.



Pasted text(6).txt
Document
طب بص قبل التعديلات دى انا عملت حاجة مهمه
انا خليت زر تواصل معنا بدلا من زر حطيته مع المنيو  يعنى زيه زى الرئيسية وعن سيفتى لايف والخ
وخليت ايقونه الصورة الى هيا اللغه وايقونه الدخزل والكارت هيا الى برة بس

وحطيت مع المنيو حطيت السيرش
عاوزة يظهر كايقونه مش لازم مربع بحث لما اضغط على الايقونه يظهر مربع البحث بشكل كويس والبحث عموما اصلا بيتم والنتيجة بتظهر فوري بناءا على اعدادات البلجن
عايزك تعمل افضل حل عشان يكون الهيدر العلوى والسفلى منسق على كل الشاشات وكل حاجة تظهر بسهوله

2(2).jpg
1(35).png
شوف النتيجة
على الموبايل غير منسقة
وعلى الكمبيوتر ممكن تشيل زر كونتاكت اس دا بدون اى css  هيكون زى زى الكلام الى جنبه

وزر السيرش مش شغال لما ادوس عليه مش بيجيب حاجة


Pasted text(7).txt
Document
بص قبل محط ال css
دا الترتيب الى عندى والى انا عاوزة ظبط انتا عليه


طيب انا عندى ملاحظات على الكود الاخير
بالنسبة للشاشات الكبيرة
اللوجو شكله كبير جدا
والكونتر عرضه كبير عن الموقع الموقع كله عرضه 1320 بيكسل
حجم المنيو الخطوط كبيرة وتخينه المفروض نخف حجم الخط والوزن ايقونه البحث عاوزها جمب ايقونه الدخول ويكونو  نفس اللون والحجم وصورة اللغه تكون الاول على اليمين

والمسافات بين البحث والوجين واللغه والكارت تكون معقوله مش لازقين ببعض

انا غيرت ترتيبهم من االيمنتور


تمام كدا وصلنا للشكل الحالى للشاشات الكبيرة وممتاز
هو بس عاوز اخلى المنيو الى فيه الناف منيو تقريبا اسمه كدا عاوز القائمة تيجى يسار شويه او بالمنتصف افضل عشان التوازن وايقونه الدخول لما اعمل هوفر عليها المفروض الباكجروند زى مهيا بس الايقونه تبقى ابيض

Thought for 5s
تمام، متستخدمش كود التوسيط المطلق السابق. احذف الجزء الخاص بـ:

.sl-header-nav {
    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
وخلي القائمة في مكانها الطبيعي، مع زيادة المسافة بينها وبين اللوجو فقط. أضف ده في آخر الـCSS:

/* إبعاد القائمة عن اللوجو قليلًا على الشاشات الكبيرة */
@media (min-width: 1025px) {

    .sl-header-nav {
        position: static !important;
        transform: none !important;

        /* مسافة بين اللوجو والقائمة */
        margin-inline-start: 28px !important;
    }
}
بما إن الموقع RTL، فإن margin-inline-start هنا بتضيف مسافة ناحية اللوجو الموجود على اليمين، وبالتالي تدفع القائمة ناحية اليسار قليلًا.

لتقليل أو زيادة الإزاحة عدّل الرقم:

margin-inline-start: 20px !important;
أو:

margin-inline-start: 35px !important;
القيمة الأقرب للشكل الحالي غالبًا من 24px إلى 30px. وكود الـHover الخاص بأيقونة الدخول تقدر تسيبه كما هو.


تمام بكرة بقى نعدل باقى الشاشات
لتكون مستجيبه وشكلها منسق على كل الشاشات
الموبايل والتابلت والموبايل افقى وتابلت افقى

تمام 👌 بكرة نكمّل على نفس النسخة الحالية ونظبط كل Breakpoint لوحده:

التابلت العمودي.

التابلت الأفقي.

الموبايل العمودي.

الموبايل الأفقي.

الشاشات الصغيرة جدًا.

وهنحافظ على شكل الديسكتوب الحالي بدون ما يتأثر، ونراجع في كل شاشة: اللوجو، الشريط العلوي، ترتيب الأيقونات، زر القائمة، القائمة المفتوحة، البحث والسلة.


انا لو حبيت اصمم كارت منتج على الوركميرس والاليمنتور ممكن تقولى الخطوات بالظبط خطوه خطوه لانى مش مبرمج ومش تقنى

انا عاوز اعمل كارت منتج دينامك
يعنى مع كل دخول يظهر منتج عشوائي

Thought for 33s
أيوه، وتقدر تعملها من غير برمجة باستخدام Elementor Pro + WooCommerce.

الفكرة ببساطة:

تصمم شكل كارت واحد اسمه Loop Item.

تضعه داخل Loop Grid.

تخلي عدد المنتجات 1.

تختار الترتيب Random.

كل تحميل جديد للصفحة يختار منتجًا عشوائيًا.

Elementor يدعم تصميم Loop Item للمنتجات، ويدعم داخل استعلام المنتجات اختيار الترتيب العشوائي Random. 

المرحلة الأولى: إنشاء قالب كارت المنتج
من لوحة تحكم ووردبريس ادخل إلى:

Templates
القوالب
↓
Theme Builder
منشئ القالب
↓
Loop Item
عنصر التكرار
↓
Add New
إضافة جديد
سمِّ القالب مثلًا:

Random Product Card
واختر نوع القالب:

Products
المنتجات
ثم اضغط:

Create Template
إنشاء القالب
يمكن إنشاء Loop Item من Theme Builder، ثم استخدامه بعد ذلك داخل Loop Grid لعرض منتجات WooCommerce ديناميكيًا. 

المرحلة الثانية: تصميم الكارت
سيظهر أمامك محرر Elementor فارغ.

1. أضف كونتينر رئيسي
اسحب Container واحدًا واجعل إعداداته:

Direction: Column
Align Items: Stretch
Justify Content: Start
ومن تبويب Style:

Background: #FFFFFF
Border Radius: 16px
Padding: 16px
ومن Box Shadow استخدم ظلًا خفيفًا مثل:

Horizontal: 0
Vertical: 8
Blur: 25
Spread: 0
Color: rgba(8, 28, 70, 0.10)
الكارت الآن أصبح الإطار الخارجي فقط.

2. أضف صورة المنتج
ابحث في عناصر Elementor عن:

Product Image
أو استخدم ويدجت Image ثم اضغط علامة Dynamic Tags واختر:

Product Image
اضبط الصورة مثلًا:

Width: 100%
Height: 220px
Object Fit: Contain
ومن رابط الصورة اجعلها تفتح:

Post URL
حتى الضغط عليها ينقل الزائر إلى صفحة المنتج.

3. أضف البادجات الحالية
بما إنك عامل شورت كود للبادجات بالفعل، أضف عنصر:

Shortcode
واكتب داخله:

[sl_product_badges]
ضعه داخل كونتينر الصورة، بنفس الطريقة التي استخدمناها في كارت المنتجات السابق.

يمكنك تأجيل هذه الخطوة حتى يكتمل الكارت الأساسي أولًا.

4. أضف اسم المنتج
اسحب ويدجت:

Product Title
أو استخدم Heading ثم اختر من Dynamic Tags:

Post Title
الإعدادات المقترحة:

HTML Tag: h3
Font Size: 15px
Font Weight: 700
Line Height: 1.6
Alignment: Right
واجعل رابط العنوان:

Post URL
5. أضف تقييم المنتج
اسحب:

Product Rating
ضعه أسفل العنوان.

يمكنك ضبط:

Star Color: #F59E0B
Empty Star Color: #D1D5DB
Size: 13px
لو بعض المنتجات ليس لها تقييم، قد يختفي هذا العنصر تلقائيًا.

6. أضف السعر
اسحب:

Product Price
الإعدادات المقترحة:

Font Size: 17px
Font Weight: 800
Color: #2563EB
وسعر التخفيض القديم:

Font Size: 12px
Color: #9CA3AF
7. أضف زر السلة
اسحب:

Add To Cart
اضبطه مثلًا:

Text Color: #FFFFFF
Background: #2563EB
Border Radius: 10px
Padding: 11px 16px
Width: 100%
الزر سيستخدم المنتج الحالي تلقائيًا، لذلك لا تضع رابطًا أو رقم منتج يدويًا.

8. ترتيب الكارت النهائي
اجعل ترتيب العناصر بهذا الشكل:

الكونتينر الرئيسي
│
├── صورة المنتج
│   └── البادجات
│
├── اسم المنتج
├── التقييم
├── السعر
└── زر أضف إلى السلة
مهم جدًا: لا تختار منتجًا ثابتًا داخل العناصر. أنت تصمم شكلًا عامًا، وElementor سيملأ الصورة والاسم والسعر والتقييم تلقائيًا بحسب المنتج الذي اختاره الاستعلام.

المرحلة الثالثة: معاينة الكارت بمنتج حقيقي
أثناء تصميم Loop Item، افتح إعدادات المعاينة من أسفل Elementor.

ابحث عن:

Preview Settings
إعدادات المعاينة
ثم اختر:

Preview Dynamic Content as:
Product
بعدها اختر أي منتج من متجرك، ثم اضغط:

Apply & Preview
ده للمعاينة فقط، ولن يجعل هذا المنتج ثابتًا داخل الكارت.

بعد الانتهاء اضغط:

Publish
نشر
المرحلة الرابعة: وضع الكارت داخل الصفحة
افتح الصفحة التي تريد أن يظهر فيها المنتج العشوائي:

Pages
الصفحات
↓
Edit with Elementor
تحرير بواسطة Elementor
ابحث عن ويدجت:

Loop Grid
واسحبه إلى المكان المطلوب.

من إعدادات Loop Grid اختر:

Template Type: Products
Choose Template: Random Product Card
Loop Grid يسمح باختيار قالب Loop Item جاهز لعرض المنتجات داخله. 

المرحلة الخامسة: عرض منتج واحد عشوائي
داخل إعدادات Loop Grid:

Layout
اجعل:

Columns: 1
Items Per Page: 1
وعطّل:

Masonry: No
Equal Height: حسب التصميم
Query
افتح قسم:

Query
الاستعلام
واجعل:

Source: Products
أو قد يظهر المصدر:

Latest Products
ثم عند:

Order By
اختر:

Random
عشوائي
وعطّل Pagination:

Pagination: None
بهذا يكون الاستعلام لديه منتجات متعددة، لكنه يعرض عنصرًا واحدًا فقط بعد ترتيب المنتجات عشوائيًا. Elementor يتيح اختيار المنتجات كمصدر، واختيار Random في ترتيب الاستعلام. 

عرض منتج عشوائي من قسم معين فقط
لو تريد مثلًا منتجًا عشوائيًا من قسم الكاميرات فقط، افتح:

Query
↓
Include By
↓
Term
ثم اختر تصنيف المنتج:

كاميرات المراقبة
واترك:

Order By: Random
Items Per Page: 1
سيتغير المنتج عشوائيًا، لكن من التصنيف المحدد فقط. Elementor يدعم فلترة Product Query بحسب تصنيفات المنتجات. 

إعدادات الاستجابة للشاشات
بما أن الكارت واحد فقط، اجعل الأعمدة:

Desktop: 1
Tablet: 1
Mobile: 1
ومن عرض الكونتينر المحيط بالكارت يمكنك اختيار:

Desktop Width: 320px إلى 380px
Tablet Width: 320px
Mobile Width: 100%
ويفضل أن يكون له:

max-width: 360px;
width: 100%;
margin-inline: auto;
يمكن وضع هذا من إعدادات Elementor بدون CSS:

Width: 100%
Max Width: 360px
مهم جدًا: الكاش والمنتج العشوائي
إذا كان الموقع يستخدم إضافة كاش مثل LiteSpeed Cache أو WP Rocket أو كاش من الاستضافة، فقد تحفظ الإضافة الصفحة بعد اختيار أول منتج، فيظهر نفس المنتج للزوار فترة من الوقت.

لكي يتغير المنتج فعلًا عند تحميل الصفحة:

استثنِ الصفحة التي تحتوي على الكارت من Page Cache
أو اجعل مدة الكاش الخاصة بها قصيرة.

المشكلة هنا ليست في Elementor أو خاصية Random؛ الصفحة المخزنة في الكاش ترجع نفس HTML بدل تنفيذ استعلام جديد.

طريقة أسهل بدون تصميم كارت مخصص
يمكنك استخدام عنصر Shortcode وكتابة:

[products limit="1" columns="1" orderby="rand"]
WooCommerce يدعم شورت كود المنتجات مع تحديد العدد والأعمدة والترتيب العشوائي. 

لكن هذه الطريقة ستعرض تصميم كارت WooCommerce الافتراضي، وليس تصميمًا مخصصًا بالكامل. لذلك Loop Item + Loop Grid هو الحل الأنسب لك.


safetylifesec.com_shop_page_6_.png
شوف كروت المنتجات دى هل تصميمها كويس ولا محتاجة ايه عشان تكون احترافيه وبريميم

Thought for 9s
التصميم الحالي كويس جدًا كأساس ومتناغم مع ألوان الموقع، وأقيّمه تقريبًا 7.5/10. شكله نظيف ومرتب، لكن محتاج شوية تعديلات بسيطة عشان يوصل فعلًا لشكل Premium.

أهم الملاحظات
1. صور المنتجات غير موحدة بصريًا
بعض المنتجات ظاهرة كبيرة جدًا، وبعضها صغيرة وسط مساحة بيضاء كبيرة. الأفضل يكون لكل كارت منطقة صورة ثابتة:

ارتفاع الصورة: 210px إلى 230px
Object Fit: Contain
Padding داخلي: 18px
مش لازم الصور نفسها تكون بنفس المقاس، لكن الحاوية تكون ثابتة؛ ده هيخلي الصفوف متناسقة.

2. عنوان المنتج صغير ومزدحم
عنوان المنتج حاليًا مقروء، لكن محتاج يكون أوضح قليلًا:

Font Size: 14px أو 15px
Font Weight: 700
Line Height: 1.5
Maximum Lines: سطران
أي عنوان أطول من سطرين يتم اختصاره بـ...، حتى لا تختلف ارتفاعات الكروت.

3. النص الصغير أسفل العنوان ضعيف
اسم التصنيف أو الوصف القصير لونه فاتح وحجمه صغير جدًا. إما تكبّره قليلًا أو تحذفه لو مش بيضيف معلومة مهمة:

Font Size: 11px أو 12px
Color: #64748B
4. جزء السعر محتاج وضوح أكبر
السعر الحالي جيد، لكن السعر القديم صغير جدًا ومتداخل أحيانًا مع السعر الجديد.

الأفضل:

السعر الحالي: 16px إلى 18px / وزن 800
السعر القديم: 11px إلى 12px
المسافة بينهما: 6px
وخلي السعر الحالي هو أول عنصر تراه العين.

5. زر السلة ضعيف بصريًا
أيقونة السلة الموجودة داخل الدائرة صغيرة ولونها فاتح، فمش واضحة كزر أساسي.

الأفضل يكون الزر:

الحجم: 36px × 36px
Background: أزرق
Icon: أبيض
Border Radius: 50%
وعند الـHover:

تكبير بسيط: scale(1.05)
ظل أزرق خفيف
ولو المنتج غير متوفر، يتحول الزر للرمادي أو يظهر نص «غير متوفر».

6. البادجات تحتاج نظامًا موحدًا
البادجات حاليًا جيدة، لكن بعضها أخضر وبعضها أزرق ورمادي وبرتقالي، وده ممكن يعمل زحامًا بصريًا.

استخدم نظامًا ثابتًا:

خصم: أحمر أو أخضر
الأكثر مبيعًا: برتقالي
جديد: أزرق
غير متوفر: رمادي
واجعلها كلها بنفس الارتفاع والحواف:

ارتفاع: 23px
Padding: 5px 9px
Border Radius: 999px
Font Size: 10px
7. الكارت نفسه يحتاج عمقًا بسيطًا
الكروت نظيفة، لكن مسطحة قليلًا. أضف:

Border: 1px solid #E8EEF7
Box Shadow: خفيف جدًا
Transition: 0.25s
وعند الـHover:

TranslateY: -4px
ظل أوضح قليلًا
تكبير الصورة: 1.03
بدون مبالغة في الحركة.

8. توحيد الجزء السفلي للكروت
حاليًا اختلاف طول العنوان يجعل السعر وزر السلة مش دايمًا في نفس المستوى.

البنية الأفضل:

الكارت
├── منطقة الصورة
├── العنوان والوصف
└── منطقة السعر والزر
واجعل منطقة السعر دائمًا ملتصقة بأسفل الكارت باستخدام:

margin-top: auto;
كده كل الأسعار والأزرار هتظهر على خط واحد في الصف.

الشكل المقترح للكارت
┌─────────────────────────┐
│ بادج الخصم        المفضلة │
│                         │
│       صورة المنتج        │
│                         │
│ عنوان المنتج سطران فقط   │
│ التصنيف أو وصف صغير      │
│                         │
│ السعر     السعر القديم  🛒 │
└─────────────────────────┘
حاجات اختيارية تخليه Premium أكثر
أيقونة مفضلة صغيرة أعلى الكارت.

تقييم النجوم وعدد التقييمات.

زر Quick View عند الـHover على الصورة.

جعل الكارت كله قابلًا للضغط، مع بقاء زر السلة مستقلًا.

ظهور حالة المخزون مثل «متوفر» أو «آخر قطعتين» فقط عندما تكون مفيدة.

الأولويات
ابدأ بهذه التعديلات بالترتيب:

توحيد ارتفاع الصور.

تثبيت ارتفاع العنوان لسطرين.

محاذاة السعر والزر أسفل كل الكروت.

تقوية تصميم زر السلة.

إضافة Hover خفيف للكارت والصورة.

توحيد ألوان وأحجام البادجات.

بعد التعديلات دي، نفس التصميم الحالي ممكن يوصل بسهولة لشكل احترافي جدًا بدون تغيير شكل الصفحة بالكامل.



Pasted text(9).txt
Document
دا الكود الحالى

Thought for 23s
شوفته. الكود الحالي عامل شغل كويس فعلًا، لكن فيه شوية تكرار وتعارض داخلي لأنك بنيت تحسينات فوق الكود الأساسي:

القلب متصمم في أول الكود، وبعدها مخفي بـdisplay:none.

التقييم متصمم، وبعدها مخفي.

بادج الخصم متصمم كدائرة، وبعدها متحوّل لمستطيل.

عنوان المنتج متعرّف عليه أكثر من مرة.

حركة الكارت والصورة قوية شوية مقارنة بالشكل الهادئ الـPremium. 


ده مش هيبطّئ الموقع بشكل ملحوظ، لكنه يصعّب التعديل مستقبلًا.

أهم نقص حاليًا
الجزء السفلي من الكارت مش مربوط بأسفل الكارت بشكل صريح. الأفضل نخلي:

الكارت Flex عمودي.

المحتوى يتمدد.

السعر والزر يثبتوا في الأسفل.

الصورة تكون متوازنة أكثر.

الـHover يكون أهدأ.

العنوان أوضح قليلًا.

أضف الكود التالي في نهاية الكود الحالي:

/* =====================================================
   Safety Life Product Card — Premium Final Polish
   يوضع في نهاية الكود الحالي
===================================================== */

/* جعل جميع الكروت متساوية ومنظمة رأسيًا */
.premium-products .slp-card {
    display: flex;
    flex-direction: column;
    height: 100%;

    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(8, 28, 70, 0.07);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

/* حركة أهدأ وأكثر احترافية */
.premium-products .slp-card:hover {
    transform: translateY(-5px);

    border-color: #cddcff;

    box-shadow:
        0 20px 42px rgba(8, 28, 70, 0.12);
}

/* =====================================================
   Product Image
===================================================== */

.premium-products .slp-media {
    height: 260px;

    padding: 24px 20px 10px;

    flex: 0 0 auto;
}

/* منع بعض الصور من الظهور بحجم مبالغ فيه */
.premium-products .slp-image img {
    width: auto !important;
    max-width: 88% !important;

    height: 220px !important;
    max-height: 220px !important;

    object-fit: contain !important;

    padding: 4px !important;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

/* تكبير خفيف فقط */
.premium-products .slp-card:hover .slp-image img {
    transform: scale(1.035);

    filter: drop-shadow(
        0 8px 12px rgba(8, 28, 70, 0.06)
    );
}

/* =====================================================
   Card Content
===================================================== */

.premium-products .slp-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    padding: 14px 16px 16px;

    text-align: center;
}

/* تثبيت مساحة العنوان */
.premium-products .slp-title {
    width: 100%;
    min-height: 51px;

    margin: 0 0 11px !important;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* اسم المنتج */
.premium-products .sl-title-main {
    display: block;

    color: #0b1d4d;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* الوصف المختصر */
.premium-products .sl-title-sub {
    display: block;

    margin-top: 4px;

    color: #718096;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* تثبيت السعر والزر أسفل جميع الكروت */
.premium-products .slp-price-row {
    min-height: 50px;

    margin-top: auto;

    padding: 6px 7px 6px 12px;

    border-radius: 14px;

    background: #f4f7ff;
    border-color: #e0e9fb;

    box-shadow: none;
}

/* Hover هادئ لمنطقة السعر */
.premium-products .slp-card:hover .slp-price-row {
    background: #eef4ff;

    box-shadow:
        0 8px 18px rgba(47, 109, 246, 0.09);
}

/* السعر الحالي */
.premium-products .slp-price ins .amount,
.premium-products .slp-price .price > .amount {
    color: #2563eb !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}

/* السعر القديم */
.premium-products .slp-price del {
    font-size: 11px !important;
    font-weight: 600 !important;

    opacity: 0.85;
}

/* =====================================================
   Add To Cart Button
===================================================== */

.premium-products .slp-cart-btn {
    flex: 0 0 auto;
}

/* زر السلة أوضح وأكثر قوة */
.premium-products .slp-cart-btn .button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    color: #ffffff !important;
    background: #2f6df6 !important;

    border: 1px solid #2f6df6 !important;

    box-shadow:
        0 7px 16px rgba(47, 109, 246, 0.23);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

/* الإيموجي يظهر باللون الطبيعي، لذلك نخفف حجمه */
.premium-products .slp-cart-btn .button::before {
    font-size: 14px;
}

/* Hover */
.premium-products .slp-cart-btn .button:hover {
    color: #ffffff !important;
    background: #174fc5 !important;
    border-color: #174fc5 !important;

    transform: translateY(-1px) scale(1.05);

    box-shadow:
        0 10px 20px rgba(47, 109, 246, 0.3);
}

/* المنتج غير المتوفر */
.premium-products li.outofstock .slp-cart-btn .button {
    color: #ffffff !important;
    background: #7a8495 !important;
    border-color: #7a8495 !important;

    box-shadow: none;
}

/* =====================================================
   Badges Refinement
===================================================== */

.premium-products .sl-dynamic-badges {
    top: 12px !important;
    left: 12px !important;

    gap: 4px !important;
}

.premium-products .sl-badge {
    min-height: 22px !important;

    padding: 4px 8px !important;

    border-radius: 7px !important;

    font-size: 9.5px !important;
    font-weight: 700 !important;

    box-shadow:
        0 4px 10px rgba(8, 28, 70, 0.12) !important;
}

/* =====================================================
   Tablet
===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .premium-products ul.products {
        gap: 18px !important;
    }

    .premium-products .slp-media {
        height: 225px;

        padding: 20px 14px 8px;
    }

    .premium-products .slp-image img {
        max-width: 90% !important;

        height: 190px !important;
        max-height: 190px !important;
    }

    .premium-products .sl-title-main {
        font-size: 13px;
    }

    .premium-products .sl-title-sub {
        font-size: 10.5px;
    }

    .premium-products .slp-price ins .amount,
    .premium-products .slp-price .price > .amount {
        font-size: 16px !important;
    }
}

/* =====================================================
   Mobile
===================================================== */

@media (max-width: 767px) {

    .premium-products .slp-card {
        border-radius: 16px;
    }

    .premium-products .slp-card:hover {
        transform: translateY(-2px);
    }

    .premium-products .slp-media {
        height: 175px;

        padding: 18px 10px 7px;
    }

    .premium-products .slp-image img {
        width: auto !important;
        max-width: 90% !important;

        height: 145px !important;
        max-height: 145px !important;
    }

    .premium-products .slp-content {
        padding: 11px 9px 11px;
    }

    .premium-products .slp-title {
        min-height: 44px;

        margin-bottom: 8px !important;
    }

    .premium-products .sl-title-main {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .premium-products .sl-title-sub {
        margin-top: 2px;

        font-size: 9.5px;
    }

    .premium-products .slp-price-row {
        min-height: 42px;

        padding: 5px 5px 5px 7px;

        border-radius: 11px;
    }

    .premium-products .slp-price ins .amount,
    .premium-products .slp-price .price > .amount {
        font-size: 14px !important;
    }

    .premium-products .slp-price del {
        font-size: 9px !important;
    }

    .premium-products .slp-price .price {
        gap: 4px;
    }

    .premium-products .slp-cart-btn .button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }

    .premium-products .slp-cart-btn .button::before {
        font-size: 11px;
    }

    .premium-products .sl-dynamic-badges {
        top: 8px !important;
        left: 8px !important;
    }
}
ملاحظة مهمة
أضعف نقطة حاليًا هي استخدام:

content: "🛒";
لأن شكل الإيموجي يختلف من جهاز لجهاز. الأفضل لاحقًا نستبدله بأيقونة SVG ثابتة، عشان زر السلة يظهر بنفس الشكل على ويندوز، أندرويد وآيفون.

بعد إضافة التعديلات السابقة، الكارت سيكون أكثر توازنًا، وكل الأسعار والأزرار ستظهر على مستوى واحد حتى لو اختلفت أسماء المنتجات.


/* =====================================================
Safety Life Premium Product Card - Final
===================================================== */

.premium-products ul.products {
gap: 28px !important;
}

.premium-products ul.products li.product {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}

.premium-products .slp-card {
height: 100%;
background: #fff;
border: 1px solid #E4ECF8;
border-radius: 24px;
overflow: hidden;
position: relative;
box-shadow: 0 14px 36px rgba(8,28,70,.075);
transition: .35s ease;
}

.premium-products .slp-card {
transform: translateY(-8px);
border-color: #C8DAFF;
box-shadow: 0 26px 55px rgba(8,28,70,.15);
}

.premium-products .slp-media {
height: 285px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 28px 18px 12px;
background: #fff;
}

.premium-products .slp-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.premium-products .slp-image img {
width: 100% !important;
height: 245px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 4px !important;
transition: .38s ease;
}

.premium-products .slp-card .slp-image img {
transform: scale(1.065);
}

.premium-products .slp-content {
padding: 16px 18px 18px;
text-align: center;
}

.premium-products .slp-title {
margin: 0 0 10px !important;
padding: 0 !important;
min-height: 50px;
}

.premium-products .slp-title a {
color: #0B1D4D !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.6 !important;
text-decoration: none !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: .25s ease;
}

.premium-products .slp-card .slp-title a {
color: #2F6DF6 !important;
}

.premium-products .slp-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0 0 14px;
direction: ltr;
}

.premium-products .slp-score {
color: #0B1D4D;
font-size: 13px;
font-weight: 900;
}

.premium-products .slp-stars {
color: #F59E0B;
font-size: 17px;
letter-spacing: 1px;
}

.premium-products .slp-price-row {
min-height: 54px;
padding: 7px 8px 7px 14px;
border-radius: 999px;
background: #F1F6FF;
border: 1px solid #DDE8FF;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
transition: .25s ease;
}

.premium-products .slp-card .slp-price-row {
background: #EAF2FF;
box-shadow: 0 12px 26px rgba(47,109,246,.13);
}

.premium-products .slp-price {
flex: 1;
text-align: center;
}

.premium-products .slp-price .price {
margin: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: 9px;
flex-wrap: wrap;
line-height: 1.2;
}

.premium-products .slp-price ins {
text-decoration: none !important;
}

.premium-products .slp-price ins .amount,
.premium-products .slp-price .price > .amount {
color: #2563EB !important;
font-size: 20px !important;
font-weight: 750 !important;
}

.premium-products .slp-price del {
color: #98A2B3 !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
position: relative;
}

.premium-products .slp-price del::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
top: 50%;
height: 2px;
background: #EF4444;
transform: translateY(-50%) rotate(-5deg);
border-radius: 4px;
}

.premium-products .slp-price bdi {
display: inline-flex;
align-items: baseline;
gap: 5px;
}

.premium-products .slp-price .woocommerce-Price-currencySymbol {
font-size: .58em !important;
font-weight: 800 !important;
}

/* زر السلة الحقيقي */
.premium-products .slp-cart-btn .button {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
background: #fff !important;
border: 1px solid #D8E6FF !important;
color: #2F6DF6 !important;
font-size: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(47,109,246,.18);
transition: .25s ease;
}

.premium-products .slp-cart-btn .button::before {
content: "🛒";
font-size: 16px;
line-height: 1;
}

.premium-products .slp-cart-btn .button {
background: #2F6DF6 !important;
color: #fff !important;
transform: scale(1.08);
}

.premium-products li.outofstock .slp-cart-btn .button::before {
content: "↗";
font-size: 17px;
font-weight: 900;
}

/* القلب */
.premium-products .slp-heart {
position: absolute;
top: 18px;
left: 18px;
z-index: 30;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid #E2EAF7;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(8,28,70,.10);
transition: .25s ease;
}

.premium-products .slp-heart svg {
width: 18px;
height: 18px;
fill: none;
stroke: #667085;
stroke-width: 1.8;
}

.premium-products .slp-heart {
transform: scale(1.08);
border-color: #2F6DF6;
}

.premium-products .slp-heart svg {
stroke: #2F6DF6;
}

/* البادجات داخل الكارت */
.premium-products .sl-dynamic-badges {
position: absolute;
top: 16px;
right: 16px;
z-index: 35;
display: flex;
flex-direction: column;
gap: 7px;
pointer-events: none;
}

.premium-products .sl-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-height: 28px;
padding: 7px 12px;
border-radius: 999px;
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 1;
box-shadow: 0 10px 22px rgba(8,28,70,.18);
}

.premium-products .sl-sale {
width: 56px;
height: 56px;
padding: 0 !important;
border-radius: 50%;
border: 2px solid #fff;
flex-direction: column;
gap: 2px;
background:
radial-gradient(circle at 35% 25%, rgba(255,255,255,.30), transparent 34%),
linear-gradient(135deg, #E11D48 0%, #B91C1C 55%, #7F1D1D 100%);
box-shadow:
0 10px 24px rgba(220,38,38,.34),
inset 0 1px 0 rgba(255,255,255,.24);
transition: .25s ease;
}

.premium-products .slp-card .sl-sale {
transform: rotate(-6deg) scale(1.04);
}

.premium-products .sl-sale span {
display: block;
line-height: 1;
}

.premium-products .sl-sale span {
font-size: 9px;
font-weight: 800;
}

.premium-products .sl-sale span {
font-size: 18px;
font-weight: 950;
}

.premium-products .sl-best {
background: linear-gradient(135deg, #F59E0B, #D97706);
}

.premium-products .sl-new {
background: linear-gradient(135deg, #2563EB, #1D4ED8);
}

.premium-products .sl-out {
background: linear-gradient(135deg, #6B7280, #4B5563);
}

/* Mobile */
@media(max-width:767px) {
.premium-products ul.products {
gap: 14px !important;
}

.premium-products .slp-card {
    border-radius: 18px;
}

.premium-products .slp-media {
    height: 185px;
    padding: 20px 10px 8px;
}

.premium-products .slp-image img {
    height: 160px !important;
}

.premium-products .slp-content {
    padding: 12px 10px 13px;
}

.premium-products .slp-title {
    min-height: 42px;
    margin-bottom: 8px !important;
}

.premium-products .slp-title a {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.premium-products .slp-stars {
    font-size: 12px;
}

.premium-products .slp-score {
    font-size: 11px;
}

.premium-products .slp-price-row {
    min-height: 44px;
    padding: 6px 6px 6px 8px;
    gap: 6px;
}

.premium-products .slp-price ins .amount,
.premium-products .slp-price .price > .amount {
    font-size: 16px !important;
}

.premium-products .slp-price del {
    font-size: 10px !important;
}

.premium-products .slp-cart-btn .button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
}

.premium-products .slp-cart-btn .button::before {
    font-size: 13px;
}

.premium-products .slp-heart {
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
}

.premium-products .sl-dynamic-badges {
    top: 10px;
    right: 10px;
}

.premium-products .sl-sale {
    width: 44px;
    height: 44px;
}

.premium-products .sl-sale span:first-child {
    font-size: 8px;
}

.premium-products .sl-sale span:last-child {
    font-size: 14px;
}
}

/* =====================================================
Safety Life Product Card — Visual Refinements
يوضع في نهاية ملف CSS الحالي
===================================================== */

/* 1) إخفاء القلب نهائيًا */
.premium-products .slp-heart {
display: none !important;
}

/* 2) إخفاء التقييم والنجوم نهائيًا */
.premium-products .slp-rating,
.premium-products .slp-stars,
.premium-products .slp-score,
.premium-products .star-rating,
.premium-products .woocommerce-product-rating {
display: none !important;
}

/* تقليل الفراغ بعد حذف التقييم */
.premium-products .slp-title {
margin-bottom: 12px !important;
}

/* =====================================================
العنوان الرئيسي + الوصف القصير
===================================================== */

.premium-products .slp-title {
min-height: 49px;
display: flex;
align-items: flex-start;
justify-content: center;
}

.premium-products .slp-title a {
width: 100%;
display: block !important;
overflow: hidden;
text-align: center;
text-decoration: none !important;
}

/* السطر الأول: عنوان المنتج */
.premium-products .sl-title-main {
display: block;
color: #0B1D4D;
font-size: 13px;
font-weight: 700;
line-height: 1.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* السطر الثاني: وصف مختصر */
.premium-products .sl-title-sub {
display: block;
margin-top: 3px;
color: #77839A;
font-size: 11px;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* تغيير اللون عند المرور بدون إزعاج */
.premium-products .slp-card .sl-title-main {
color: #2563EB;
}

.premium-products .slp-card .sl-title-sub {
color: #667085;
}

/* =====================================================
3) جميع البادجات أعلى اليسار
===================================================== */

.premium-products .sl-dynamic-badges {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: auto !important;

display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;

z-index: 35;
pointer-events: none;
}

/* الشكل الأساسي الهادئ لكل البادجات */
.premium-products .sl-badge {
width: max-content !important;
height: auto !important;
min-height: 23px !important;

padding: 5px 9px !important;
border: 1px solid rgba(255,255,255,.72) !important;
border-radius: 7px !important;

color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
white-space: nowrap;

box-shadow: 0 5px 12px rgba(8,28,70,.12) !important;
}

/* =====================================================
بادج الخصم الجديد — مستطيل صغير وليس دائرة
===================================================== */

.premium-products .sl-sale {
width: max-content !important;
height: auto !important;
min-width: 44px !important;
min-height: 25px !important;

padding: 5px 8px !important;
border-radius: 7px !important;
border: 1px solid rgba(255,255,255,.72) !important;

display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;

background: #2563EB;
box-shadow: 0 5px 12px rgba(8,28,70,.13) !important;

transform: none !important;
}

/* منع حركة دوران بادج الخصم */
.premium-products .slp-card .sl-sale {
transform: translateY(-1px) !important;
}

/* نص بادج الخصم */
.premium-products .sl-sale span,
.premium-products .sl-sale span,
.premium-products .sl-sale span {
display: inline !important;
margin: 0 !important;

font-size: 10px !important;
font-weight: 700 !important;
line-height: 1 !important;
}

/* =====================================================
ألوان الخصومات حسب النسبة
===================================================== */

/* من 1% إلى 5% — تركواز هادئ */
.premium-products .sl-sale-range-1 {
background: linear-gradient(135deg, #0F9F94, #087F77) !important;
}

/* أكبر من 5% وحتى 10% — أخضر هادئ */
.premium-products .sl-sale-range-2 {
background: linear-gradient(135deg, #22A66F, #148453) !important;
}

/* أكبر من 10% وحتى 15% — أزرق الهوية */
.premium-products .sl-sale-range-3 {
background: linear-gradient(135deg, #3979F6, #245FD7) !important;
}

/* أكبر من 15% وحتى 20% — بنفسجي مريح */
.premium-products .sl-sale-range-4 {
background: linear-gradient(135deg, #8065D9, #674ABF) !important;
}

/* أكبر من 20% وحتى 50% — وردي داكن هادئ */
.premium-products .sl-sale-range-5 {
background: linear-gradient(135deg, #D84B83, #B9366B) !important;
}

/* أكبر من 50% وحتى 70% — برتقالي هادئ */
.premium-products .sl-sale-range-6 {
background: linear-gradient(135deg, #F18A3D, #D86A1E) !important;
}

/* أكثر من 70% — لون احتياطي */
.premium-products .sl-sale-range-7 {
background: linear-gradient(135deg, #D94A4A, #B83232) !important;
}

/* =====================================================
باقي البادجات
===================================================== */

/* الأكثر مبيعًا */
.premium-products .sl-best {
background: linear-gradient(135deg, #F2A93B, #D88A19) !important;
}

/* جديد */
.premium-products .sl-new {
background: linear-gradient(135deg, #3478F6, #245FD7) !important;
}

/* غير متوفر */
.premium-products .sl-out {
background: linear-gradient(135deg, #7A8495, #5F6979) !important;
}

/* =====================================================
ضبط الصورة بعد حذف القلب
===================================================== */

.premium-products .slp-media {
padding-top: 24px;
}

/* =====================================================
الموبايل
===================================================== */

@media (max-width: 767px) {

.premium-products .sl-dynamic-badges {
    top: 9px !important;
    left: 9px !important;
    right: auto !important;
    gap: 4px !important;
}

.premium-products .sl-badge,
.premium-products .sl-sale {
    min-height: 21px !important;
    min-width: 38px !important;
    padding: 4px 7px !important;
    border-radius: 6px !important;
    font-size: 8.5px !important;
}

.premium-products .sl-sale span,
.premium-products .sl-sale span:first-child,
.premium-products .sl-sale span:last-child {
    font-size: 8.5px !important;
    font-weight: 700 !important;
}

.premium-products .slp-title {
    min-height: 43px;
}

.premium-products .sl-title-main {
    font-size: 12px;
    line-height: 1.4;
}

.premium-products .sl-title-sub {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.35;
}
}

/* =====================================================
   Safety Life Product Card — Premium Final Polish
   يوضع في نهاية الكود الحالي
===================================================== */

/* جعل جميع الكروت متساوية ومنظمة رأسيًا */
.premium-products .slp-card {
    display: flex;
    flex-direction: column;
    height: 100%;

    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(8, 28, 70, 0.07);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

/* حركة أهدأ وأكثر احترافية */
.premium-products .slp-card:hover {
    transform: translateY(-5px);

    border-color: #cddcff;

    box-shadow:
        0 20px 42px rgba(8, 28, 70, 0.12);
}

/* =====================================================
   Product Image
===================================================== */

.premium-products .slp-media {
    height: 260px;

    padding: 24px 20px 10px;

    flex: 0 0 auto;
}

/* منع بعض الصور من الظهور بحجم مبالغ فيه */
.premium-products .slp-image img {
    width: auto !important;
    max-width: 88% !important;

    height: 220px !important;
    max-height: 220px !important;

    object-fit: contain !important;

    padding: 4px !important;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

/* تكبير خفيف فقط */
.premium-products .slp-card:hover .slp-image img {
    transform: scale(1.035);

    filter: drop-shadow(
        0 8px 12px rgba(8, 28, 70, 0.06)
    );
}

/* =====================================================
   Card Content
===================================================== */

.premium-products .slp-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    padding: 14px 16px 16px;

    text-align: center;
}

/* تثبيت مساحة العنوان */
.premium-products .slp-title {
    width: 100%;
    min-height: 51px;

    margin: 0 0 11px !important;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* اسم المنتج */
.premium-products .sl-title-main {
    display: block;

    color: #0b1d4d;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* الوصف المختصر */
.premium-products .sl-title-sub {
    display: block;

    margin-top: 4px;

    color: #718096;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* تثبيت السعر والزر أسفل جميع الكروت */
.premium-products .slp-price-row {
    min-height: 50px;

    margin-top: auto;

    padding: 6px 7px 6px 12px;

    border-radius: 14px;

    background: #f4f7ff;
    border-color: #e0e9fb;

    box-shadow: none;
}

/* Hover هادئ لمنطقة السعر */
.premium-products .slp-card:hover .slp-price-row {
    background: #eef4ff;

    box-shadow:
        0 8px 18px rgba(47, 109, 246, 0.09);
}

/* السعر الحالي */
.premium-products .slp-price ins .amount,
.premium-products .slp-price .price > .amount {
    color: #2563eb !important;

    font-size: 18px !important;
    font-weight: 800 !important;
}

/* السعر القديم */
.premium-products .slp-price del {
    font-size: 11px !important;
    font-weight: 600 !important;

    opacity: 0.85;
}

/* =====================================================
   Add To Cart Button
===================================================== */

.premium-products .slp-cart-btn {
    flex: 0 0 auto;
}

/* زر السلة أوضح وأكثر قوة */
.premium-products .slp-cart-btn .button {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    color: #ffffff !important;
    background: #2f6df6 !important;

    border: 1px solid #2f6df6 !important;

    box-shadow:
        0 7px 16px rgba(47, 109, 246, 0.23);

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

/* الإيموجي يظهر باللون الطبيعي، لذلك نخفف حجمه */
.premium-products .slp-cart-btn .button::before {
    font-size: 14px;
}

/* Hover */
.premium-products .slp-cart-btn .button:hover {
    color: #ffffff !important;
    background: #174fc5 !important;
    border-color: #174fc5 !important;

    transform: translateY(-1px) scale(1.05);

    box-shadow:
        0 10px 20px rgba(47, 109, 246, 0.3);
}

/* المنتج غير المتوفر */
.premium-products li.outofstock .slp-cart-btn .button {
    color: #ffffff !important;
    background: #7a8495 !important;
    border-color: #7a8495 !important;

    box-shadow: none;
}

/* =====================================================
   Badges Refinement
===================================================== */

.premium-products .sl-dynamic-badges {
    top: 12px !important;
    left: 12px !important;

    gap: 4px !important;
}

.premium-products .sl-badge {
    min-height: 22px !important;

    padding: 4px 8px !important;

    border-radius: 7px !important;

    font-size: 9.5px !important;
    font-weight: 700 !important;

    box-shadow:
        0 4px 10px rgba(8, 28, 70, 0.12) !important;
}

/* =====================================================
   Tablet
===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .premium-products ul.products {
        gap: 18px !important;
    }

    .premium-products .slp-media {
        height: 225px;

        padding: 20px 14px 8px;
    }

    .premium-products .slp-image img {
        max-width: 90% !important;

        height: 190px !important;
        max-height: 190px !important;
    }

    .premium-products .sl-title-main {
        font-size: 13px;
    }

    .premium-products .sl-title-sub {
        font-size: 10.5px;
    }

    .premium-products .slp-price ins .amount,
    .premium-products .slp-price .price > .amount {
        font-size: 16px !important;
    }
}

/* =====================================================
   Mobile
===================================================== */

@media (max-width: 767px) {

    .premium-products .slp-card {
        border-radius: 16px;
    }

    .premium-products .slp-card:hover {
        transform: translateY(-2px);
    }

    .premium-products .slp-media {
        height: 175px;

        padding: 18px 10px 7px;
    }

    .premium-products .slp-image img {
        width: auto !important;
        max-width: 90% !important;

        height: 145px !important;
        max-height: 145px !important;
    }

    .premium-products .slp-content {
        padding: 11px 9px 11px;
    }

    .premium-products .slp-title {
        min-height: 44px;

        margin-bottom: 8px !important;
    }

    .premium-products .sl-title-main {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .premium-products .sl-title-sub {
        margin-top: 2px;

        font-size: 9.5px;
    }

    .premium-products .slp-price-row {
        min-height: 42px;

        padding: 5px 5px 5px 7px;

        border-radius: 11px;
    }

    .premium-products .slp-price ins .amount,
    .premium-products .slp-price .price > .amount {
        font-size: 14px !important;
    }

    .premium-products .slp-price del {
        font-size: 9px !important;
    }

    .premium-products .slp-price .price {
        gap: 4px;
    }

    .premium-products .slp-cart-btn .button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }

    .premium-products .slp-cart-btn .button::before {
        font-size: 11px;
    }

    .premium-products .sl-dynamic-badges {
        top: 8px !important;
        left: 8px !important;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Alexandria';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://safetylifesec.com/wp-content/uploads/2026/06/Alexandria-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */