/* ========================================================= SALLA - RAED THEME FINAL CLEAN CSS ========================================================= */ /* ========================================================= 01. COLORS ========================================================= */ :root { --site-bg: #F3F1E1; --brand-blue: #26316B; --text-blue: #26316B; } /* ========================================================= 02. STORE BACKGROUND ========================================================= */ html, body, .app-inner, main { background-color: var(--site-bg) !important; } /* ========================================================= 03. GENERAL SECTIONS ========================================================= */ .s-block { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= 04. GENERAL BANNERS ========================================================= */ .s-block--banners img, .banner-entry img { border-radius: 0 !important; } /* ========================================================= 05. GENERAL SECTION TITLES ========================================================= */ .s-block__title { text-align: center !important; justify-content: center !important; } .s-block__title h2 { color: var(--text-blue) !important; font-weight: 700 !important; text-align: center !important; } /* ========================================================= 06. PRODUCT CARDS - GENERAL ========================================================= */ .product-entry, .s-product-card-entry { background: transparent !important; border: 0 !important; box-shadow: none !important; } .s-product-card-image { background: transparent !important; } .s-product-card-image img { object-fit: contain !important; border-radius: 0 !important; } .s-product-card-content-title, .s-product-card-price { color: var(--text-blue) !important; } /* ========================================================= 07. CATEGORIES SECTION ========================================================= */ section[data-testid="store-home-square-photos"] { display: block !important; visibility: visible !important; position: relative !important; background-color: var(--brand-blue) !important; background-image: url("https://cdn.files.salla.network/other/569355431/c0839c23-fb77-4ece-a08f-b2b2751970ee-original.webp") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 75px 0 0 !important; height: auto !important; min-height: 195px !important; overflow: hidden !important; } /* ========================================================= 08. CATEGORIES TITLE ========================================================= */ section[data-testid="store-home-square-photos"]::before { content: "التصنيفات" !important; display: block !important; position: absolute !important; top: 25px !important; right: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #F3F1E1 !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap !important; z-index: 10 !important; pointer-events: none !important; } /* بدون after */ section[data-testid="store-home-square-photos"]::after { content: none !important; display: none !important; } /* ========================================================= 09. CATEGORIES GRID ========================================================= */ section[data-testid="store-home-square-photos"] > div.grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 120px !important; grid-auto-rows: 120px !important; gap: 2px !important; column-gap: 2px !important; row-gap: 0 !important; width: calc(100% - 4px) !important; max-width: calc(100% - 4px) !important; height: 120px !important; min-height: 120px !important; margin: 0 auto !important; padding: 0 !important; align-items: end !important; align-content: end !important; overflow: hidden !important; } /* ========================================================= 10. DISABLE RAED TWO ROW ========================================================= */ section[data-testid="store-home-square-photos"] > .two-row { grid-template-rows: 120px !important; grid-auto-rows: 120px !important; height: 120px !important; min-height: 120px !important; margin: 0 auto !important; padding: 0 !important; } /* ========================================================= 11. CATEGORY CARD ========================================================= */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos { display: block !important; width: 100% !important; max-width: 100% !important; height: 120px !important; min-height: 120px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; line-height: 0 !important; } /* ========================================================= 12. CATEGORY IMAGE ========================================================= */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos > div.lazy_bg { display: block !important; width: 100% !important; height: 120px !important; min-height: 120px !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center bottom !important; background-size: 100% 100% !important; border: 0 !important; border-radius: 0 !important; line-height: 0 !important; } /* ========================================================= 13. REMOVE CATEGORY EXTRA SPACE ========================================================= */ section[data-testid="store-home-square-photos"] > .grid, section[data-testid="store-home-square-photos"] > .grid:last-child, section[data-testid="store-home-square-photos"] .banner-entry:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ========================================================= 15. CATEGORIES TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { section[data-testid="store-home-square-photos"] > div.grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2px !important; } } /* ========================================================= 16. CATEGORIES DESKTOP ========================================================= */ @media (min-width: 1024px) { section[data-testid="store-home-square-photos"] > div.grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2px !important; } } /* ========================================================= BEST SELLERS TITLE — FINAL POSITION ========================================================= */ salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title { display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; direction: rtl !important; margin: 0 0 14px !important; padding: 20px 12px 0 !important; } /* حاوية العنوان */ salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right { position: relative !important; display: block !important; width: 150px !important; height: 45px !important; min-width: 150px !important; min-height: 45px !important; margin: 0 !important; padding: 0 !important; background: none !important; overflow: visible !important; } /* الزخرفة */ salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right::before { content: "" !important; display: block !important; position: absolute !important; top: 7px !important; right: 0 !important; width: 150px !important; height: 38px !important; background-image: url("https://cdn.files.salla.network/other/569355431/611c06ed-ecb6-4dc3-a6d1-02b961974d2f-original.webp") !important; background-repeat: no-repeat !important; background-position: right center !important; background-size: contain !important; z-index: 1 !important; pointer-events: none !important; } /* كلمة الأكثر مبيعًا */ salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right h2 { position: absolute !important; /* */ top: 2px !important; right: 18px !important; z-index: 5 !important; width: auto !important; margin: 0 !important; padding: 0 4px !important; color: #26316B !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1 !important; text-align: right !important; white-space: nowrap !important; /* */ background-color: #F3F1E1 !important; transform: none !important; } salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right::after, salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right h2::before, salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right h2::after { content: none !important; display: none !important; } salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-left { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title { margin-bottom: 10px !important; padding: 18px 8px 0 !important; } salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right { width: 135px !important; height: 40px !important; min-width: 135px !important; min-height: 40px !important; } /* الزخرفة */ salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right::before { top: 6px !important; right: 0 !important; width: 135px !important; height: 34px !important; background-size: contain !important; background-position: right center !important; } /* النص */ salla-products-slider[slider-id="slider-with-bg-3"] .s-slider-block__title-right h2 { top: 1px !important; right: 16px !important; font-size: 18px !important; padding: 0 3px !important; background-color: #F3F1E1 !important; } } /* إغلاق MOBILE الخاص بعنوان الأكثر مبيعًا */ /* ========================================================= GLOBAL PRODUCT CARD — FINAL CLEAN VERSION الشكل المعتمد لكل كروت المنتجات ========================================================= */ /* ========================================================= 01. CARD ========================================================= */ .s-product-card-entry, .product-entry { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; } /* ========================================================= 02. PRODUCT IMAGE ========================================================= */ .s-product-card-image { position: relative !important; height: 300px !important; min-height: 300px !important; margin: 0 0 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; } .s-product-card-image > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } .s-product-card-image img, img.s-product-card-image-contain { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; margin: 0 auto !important; border-radius: 0 !important; } /* ========================================================= 03. WISHLIST ========================================================= */ .s-product-card-wishlist-btn, .s-product-card-image salla-button[name="product-name"] { display: none !important; } /* ========================================================= 04. CONTENT ========================================================= */ .s-product-card-content { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 120px !important; padding: 0 4px !important; background: transparent !important; direction: rtl !important; text-align: center !important; } /* ========================================================= 05. MAIN INFO AREA ========================================================= */ .s-product-card-content-main { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; width: 100% !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-align: center !important; } /* ========================================================= 06. PRODUCT TITLE ========================================================= */ .s-product-card-content-title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 42px !important; margin: 0 !important; padding: 0 !important; color: #26316B !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.45 !important; white-space: normal !important; overflow: hidden !important; overflow-wrap: break-word !important; text-align: center !important; direction: rtl !important; } .s-product-card-content-title a { display: block !important; width: 100% !important; color: #26316B !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; white-space: normal !important; text-align: center !important; direction: rtl !important; text-decoration: none !important; } /* ========================================================= 07. SUBTITLE / EXTRA INFO مثل: 560 صفحة ========================================================= */ .s-product-card-subtitle, .s-product-card-content-description { width: 100% !important; margin: 2px 0 0 !important; padding: 0 !important; color: #7B8496 !important; font-size: 12px !important; line-height: 1.3 !important; text-align: center !important; } /* ========================================================= 08. RATING + PRICE CONTAINER ========================================================= */ .s-product-card-content-sub { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 55px !important; min-height: 55px !important; margin: 0 !important; padding: 0 !important; direction: rtl !important; text-align: center !important; } /* ========================================================= 09. RATING أول عنصر تحت الاسم ========================================================= */ .s-product-card-content-sub .s-product-card-rating { order: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 23px !important; min-height: 23px !important; margin: 0 0 3px !important; padding: 0 !important; text-align: center !important; transform: none !important; transform-origin: center center !important; } /* الرقم داخل التقييم */ .s-product-card-content-sub .s-product-card-rating span { margin: 0 3px !important; } /* ========================================================= 10. PRICE تحت التقييم مباشرة ========================================================= */ .s-product-card-content-sub .s-product-card-price { order: 2 !important; display: block !important; width: 100% !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 !important; color: #26316B !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.3 !important; text-align: center !important; direction: rtl !important; } /* ========================================================= 11. OLD / SALE PRICE ========================================================= */ .s-product-card-sale-price, .s-product-card-old-price { text-align: center !important; } /* ========================================================= 12. HIDE ADD TO CART ========================================================= */ .s-product-card-content-footer, .s-product-card-content-footer salla-button, .s-product-card-content-footer button, .s-product-card-entry .s-button-wrap, .s-product-card-entry salla-button[width="wide"] { display: none !important; } /* ========================================================= 13. SLIDER CARDS ========================================================= */ .s-products-slider-card, .swiper-slide .s-product-card-entry { height: auto !important; } salla-products-slider .swiper-wrapper { align-items: flex-start !important; } /* ========================================================= 14. MOBILE ========================================================= */ @media (max-width: 767px) { /* الصورة تبقى طولية */ .s-product-card-image { height: 220px !important; min-height: 220px !important; margin-bottom: 8px !important; } /* المحتوى */ .s-product-card-content { min-height: 100px !important; padding: 0 3px !important; } /* */ .s-product-card-content-main { height: 52px !important; min-height: 52px !important; max-height: 52px !important; } /* اسم المنتج */ .s-product-card-content-title { max-height: 36px !important; font-size: 12px !important; line-height: 1.5 !important; -webkit-line-clamp: 2 !important; text-align: center !important; } /* العنوان الفرعي */ .s-product-card-subtitle, .s-product-card-content-description { font-size: 10px !important; margin-top: 1px !important; text-align: center !important; } /* منطقة التقييم والسعر */ .s-product-card-content-sub { height: 48px !important; min-height: 48px !important; align-items: center !important; text-align: center !important; } /* التقييم */ .s-product-card-content-sub .s-product-card-rating { order: 1 !important; height: 20px !important; min-height: 20px !important; justify-content: center !important; margin: 0 0 2px !important; transform: scale(.82) !important; transform-origin: center center !important; } /* السعر */ .s-product-card-content-sub .s-product-card-price { order: 2 !important; height: 23px !important; min-height: 23px !important; margin: 0 !important; font-size: 15px !important; text-align: center !important; } } /* ========================================================= 15. TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .s-product-card-image { height: 250px !important; min-height: 250px !important; } .s-product-card-content-title { font-size: 13px !important; } .s-product-card-content-sub .s-product-card-price { font-size: 16px !important; } } /* ========================================================= 16. DESKTOP ========================================================= */ @media (min-width: 1024px) { .s-product-card-image { height: 300px !important; min-height: 300px !important; } .s-product-card-content-title { font-size: 14px !important; } .s-product-card-content-sub .s-product-card-price { font-size: 18px !important; } } /* ========================================================= MOBILE PRODUCT CARD - PRICE VISIBILITY FIX ========================================================= */ @media (max-width: 767px) { /* نخلي الكرت يتمدد حسب المحتوى */ .s-product-card-entry, .product-entry { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* محتوى المنتج */ .s-product-card-content { height: auto !important; /* مساحة تكفي الاسم + التقييم + السعر */ min-height: 112px !important; padding: 0 3px 8px !important; overflow: visible !important; } /* منطقة الاسم */ .s-product-card-content-main { height: 52px !important; min-height: 52px !important; max-height: 52px !important; overflow: hidden !important; } /* التقييم + السعر */ .s-product-card-content-sub { height: auto !important; min-height: 52px !important; padding-bottom: 4px !important; overflow: visible !important; } /* النجوم */ .s-product-card-content-sub .s-product-card-rating { order: 1 !important; height: 20px !important; min-height: 20px !important; margin: 0 auto 3px !important; justify-content: center !important; transform: scale(.82) !important; transform-origin: center center !important; } /* السعر */ .s-product-card-content-sub .s-product-card-price { order: 2 !important; display: block !important; width: 100% !important; height: auto !important; min-height: 24px !important; margin: 0 auto !important; padding: 0 0 2px !important; font-size: 15px !important; line-height: 1.3 !important; text-align: center !important; overflow: visible !important; } salla-products-slider .swiper, salla-products-slider .swiper-wrapper, salla-products-slider .swiper-slide { overflow: visible !important; } } /* ========================================================= GLOBAL SLIDER TITLES STYLE نفس تنسيق "الأكثر مبيعًا" ========================================================= */ salla-products-slider .s-slider-block__title { display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; direction: rtl !important; margin: 0 0 14px !important; padding: 20px 12px 0 !important; } /* حاوية العنوان */ salla-products-slider .s-slider-block__title-right { position: relative !important; display: block !important; width: 150px !important; height: 45px !important; min-width: 150px !important; min-height: 45px !important; margin: 0 !important; padding: 0 !important; background: none !important; overflow: visible !important; } /* الزخرفة */ salla-products-slider .s-slider-block__title-right::before { content: "" !important; display: block !important; position: absolute !important; top: 7px !important; right: 0 !important; width: 150px !important; height: 38px !important; background-image: url("https://cdn.files.salla.network/other/569355431/611c06ed-ecb6-4dc3-a6d1-02b961974d2f-original.webp") !important; background-repeat: no-repeat !important; background-position: right center !important; background-size: contain !important; z-index: 1 !important; pointer-events: none !important; } /* نص العنوان */ salla-products-slider .s-slider-block__title-right h2 { position: absolute !important; top: 2px !important; right: 18px !important; z-index: 5 !important; width: auto !important; margin: 0 !important; padding: 0 4px !important; color: #26316B !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1 !important; text-align: right !important; white-space: nowrap !important; background-color: #F3F1E1 !important; transform: none !important; } /* إلغاء أي زخارف ثانية */ salla-products-slider .s-slider-block__title-right::after, salla-products-slider .s-slider-block__title-right h2::before, salla-products-slider .s-slider-block__title-right h2::after { content: none !important; display: none !important; } /* إخفاء "عرض الكل" */ salla-products-slider .s-slider-block__title-left { display: none !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { salla-products-slider .s-slider-block__title { margin-bottom: 10px !important; padding: 18px 8px 0 !important; } salla-products-slider .s-slider-block__title-right { width: 135px !important; height: 40px !important; min-width: 135px !important; min-height: 40px !important; } salla-products-slider .s-slider-block__title-right::before { top: 6px !important; right: 0 !important; width: 135px !important; height: 34px !important; background-size: contain !important; background-position: right center !important; } salla-products-slider .s-slider-block__title-right h2 { top: 1px !important; right: 16px !important; font-size: 18px !important; padding: 0 3px !important; background-color: #F3F1E1 !important; } } /* ========================================================= GLOBAL PRODUCT SLIDER TITLES — DESKTOP FIX ========================================================= */ @media (min-width: 1024px) { salla-products-slider .s-slider-block__title { display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; direction: rtl !important; margin: 0 0 18px !important; padding: 22px 18px 0 !important; } salla-products-slider .s-slider-block__title-right { position: relative !important; display: block !important; width: 165px !important; height: 50px !important; min-width: 165px !important; min-height: 50px !important; margin: 0 !important; padding: 0 !important; background: none !important; overflow: visible !important; } /* الزخرفة */ salla-products-slider .s-slider-block__title-right::before { content: "" !important; display: block !important; position: absolute !important; top: 8px !important; right: 0 !important; width: 165px !important; height: 42px !important; background-image: url("https://cdn.files.salla.network/other/569355431/611c06ed-ecb6-4dc3-a6d1-02b961974d2f-original.webp") !important; background-repeat: no-repeat !important; background-position: right center !important; background-size: contain !important; z-index: 1 !important; pointer-events: none !important; } /* نص العنوان */ salla-products-slider .s-slider-block__title-right h2 { position: absolute !important; top: 2px !important; right: 19px !important; z-index: 5 !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 4px !important; color: #26316B !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; text-align: right !important; white-space: nowrap !important; background-color: #F3F1E1 !important; transform: none !important; } /* إلغاء أي تنسيقات إضافية */ salla-products-slider .s-slider-block__title-right::after, salla-products-slider .s-slider-block__title-right h2::before, salla-products-slider .s-slider-block__title-right h2::after { content: none !important; display: none !important; } /* إخفاء عرض الكل */ salla-products-slider .s-slider-block__title-left { display: none !important; } } /* ========================================================= FOOTER — FINAL COLORS ========================================================= */ footer, .store-footer, .store-footer__inner, .store-footer .container { background-color: #EFECD8 !important; } /* النصوص والعناوين والروابط */ footer, footer p, footer span, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer a, .store-footer, .store-footer p, .store-footer span, .store-footer h1, .store-footer h2, .store-footer h3, .store-footer h4, .store-footer a { color: #26316B !important; } /* الأيقونات */ footer svg, .store-footer svg { color: #26316B !important; fill: currentColor !important; } /* الفواصل */ footer hr, .store-footer hr { border-color: rgba(38, 49, 107, 0.18) !important; } /* الحقوق والجزء السفلي */ footer .copyright-text, .store-footer .copyright-text, .store-footer__copyright { color: #26316B !important; background-color: #EFECD8 !important; } /* Hover */ footer a:hover, .store-footer a:hover { color: #26316B !important; } /* ========================================================= HEADER — FINAL CLEAN VERSION ========================================================= */ /* ========================================================= 01. HEADER WRAPPER ========================================================= */ header.store-header { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background-color: #F3F1E1 !important; box-shadow: none !important; } /* ========================================================= 02. TOP NAVBAR ========================================================= */ header.store-header .top-navbar { background-color: #F3F1E1 !important; box-shadow: none !important; border: 0 !important; } /* ========================================================= 03. MAIN NAV ========================================================= */ header.store-header #mainnav { background-color: #F3F1E1 !important; box-shadow: none !important; border: 0 !important; /* المسافة بين محتوى الهيدر والبنر تكون داخل الهيدر نفسه */ padding-bottom: 14px !important; } /* ========================================================= 04. INNER NAV ========================================================= */ header.store-header #mainnav .inner { background-color: #F3F1E1 !important; box-shadow: none !important; border: 0 !important; } /* ========================================================= 05. HEADER TEXT + LINKS ========================================================= */ header.store-header, header.store-header a, header.store-header span, header.store-header p, header.store-header button { color: #26316B !important; } /* ========================================================= 06. ICONS ========================================================= */ header.store-header i, header.store-header svg { color: #26316B !important; } /* نحافظ على ألوان SVG حسب currentColor */ header.store-header svg { fill: currentColor; } /* ========================================================= 07. REMOVE SHADOWS ========================================================= */ header.store-header, header.store-header #mainnav, header.store-header #mainnav .inner { box-shadow: none !important; } /* ========================================================= 08. HERO CONNECTION أول بانر يبدأ مباشرة بعد الهيدر ========================================================= */ main > section[data-testid="store-home-fixed-banner"]:first-of-type { margin-top: 0 !important; padding-top: 0 !important; background-color: #F3F1E1 !important; } /* container داخل أول بانر */ main > section[data-testid="store-home-fixed-banner"]:first-of-type > .container { background-color: #F3F1E1 !important; margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================= 09. MAIN BACKGROUND يمنع ظهور شريط لون مختلف بين الهيدر والهيرو ========================================================= */ main { background-color: #F3F1E1 !important; } /* ========================================================= 10. HEADER BUTTONS / CIRCLES ========================================================= */ header.store-header button, header.store-header .s-button-wrap, header.store-header .header-btn { background-color: transparent !important; } /* ========================================================= 11. MOBILE ========================================================= */ @media (max-width: 767px) { header.store-header #mainnav { padding-bottom: 12px !important; } } /* ========================================================= 12. DESKTOP ========================================================= */ @media (min-width: 1024px) { header.store-header #mainnav { padding-bottom: 16px !important; } } /* ========================================================= FIXED BANNERS AS FULL-WIDTH HERO SECTIONS ========================================================= */ section[data-testid="store-home-fixed-banner"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: hidden !important; } /* إزالة container width */ section[data-testid="store-home-fixed-banner"] > .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* رابط البانر */ section[data-testid="store-home-fixed-banner"] a.banner, section[data-testid="store-home-fixed-banner"] a.banner--fixed { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: hidden !important; } /* picture */ section[data-testid="store-home-fixed-banner"] picture { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* صورة البانر */ section[data-testid="store-home-fixed-banner"] img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; border-radius: 0 !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1024px) { section[data-testid="store-home-fixed-banner"] img { width: 100% !important; /* لو تبغي شكل Hero أعرض وأقل ارتفاع */ max-height: 520px !important; object-fit: cover !important; object-position: center center !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { section[data-testid="store-home-fixed-banner"] { width: 100% !important; } section[data-testid="store-home-fixed-banner"] > .container { width: 100% !important; padding: 0 !important; } section[data-testid="store-home-fixed-banner"] img { width: 100% !important; height: auto !important; object-fit: contain !important; } } /* ========================================================= CATEGORIES — DESKTOP FINAL FIX 4 تصنيفات بمحاذاة أسفل الخلفية ========================================================= */ @media (min-width: 1024px) { /* السكشن */ section[data-testid="store-home-square-photos"] { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 430px !important; min-height: 430px !important; margin: 0 !important; padding: 0 !important; background-color: #26316B !important; background-image: url("https://cdn.files.salla.network/other/569355431/b7fcc862-fd6f-49ed-be47-af01c20b703b-original.webp") !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% auto !important; overflow: hidden !important; } /* ===================================================== عنوان التصنيفات ===================================================== */ section[data-testid="store-home-square-photos"]::before { content: "التصنيفات" !important; position: absolute !important; top: 38px !important; right: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #F3F1E1 !important; font-size: 28px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; z-index: 10 !important; pointer-events: none !important; } /* ===================================================== GRID — الأربع تصنيفات مثبتة تحت ===================================================== */ section[data-testid="store-home-square-photos"] > div.grid, section[data-testid="store-home-square-photos"] > div.two-row { position: absolute !important; right: 0 !important; left: 0 !important; bottom: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 220px !important; grid-auto-rows: 220px !important; grid-auto-flow: column !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; width: 100% !important; max-width: 100% !important; height: 220px !important; min-height: 220px !important; margin: 0 !important; padding: 0 !important; align-items: end !important; align-content: end !important; overflow: hidden !important; z-index: 5 !important; } /* ===================================================== كل تصنيف ===================================================== */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos { display: block !important; position: relative !important; width: 100% !important; max-width: none !important; height: 220px !important; min-height: 220px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; line-height: 0 !important; } /* الأربع فقط في صف واحد */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos:nth-child(-n+4) { display: block !important; visibility: visible !important; opacity: 1 !important; grid-row: 1 !important; } /* الأول */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos:nth-child(1) { grid-column: 1 !important; } /* الثاني */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos:nth-child(2) { grid-column: 2 !important; } /* الثالث */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos:nth-child(3) { grid-column: 3 !important; } /* الرابع */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos:nth-child(4) { grid-column: 4 !important; } /* ===================================================== صورة التصنيف ===================================================== */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos > div.lazy_bg { display: block !important; width: 100% !important; height: 220px !important; min-height: 220px !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-repeat: no-repeat !important; /* أهم نقطة: محاذاة أسفل */ background-position: center bottom !important; background-size: contain !important; border: 0 !important; border-radius: 0 !important; } } /* ========================================================= CATEGORIES DESKTOP — REMOVE BLUE UNDER BEIGE ========================================================= */ @media (min-width: 1024px) { section[data-testid="store-home-square-photos"] { background-color: #F3F1E1 !important; background-image: url("https://cdn.files.salla.network/other/569355431/b7fcc862-fd6f-49ed-be47-af01c20b703b-original.webp") !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% auto !important; } /* المنطقة خلف التصنيفات من الأسفل بيج */ section[data-testid="store-home-square-photos"] > div.grid, section[data-testid="store-home-square-photos"] > div.two-row { background-color: transparent !important; } section[data-testid="store-home-square-photos"] a.banner-entry.square-photos { background-color: transparent !important; } section[data-testid="store-home-square-photos"] a.banner-entry.square-photos > div.lazy_bg { background-color: transparent !important; } } /* رفع التصنيفات قليلًا — Desktop فقط */ @media (min-width: 1024px) { section[data-testid="store-home-square-photos"] a.banner-entry.square-photos > div.lazy_bg { transform: translateY(-12px) !important; } } /* ========================================================= HOME PAGE — SECTION SPACING ========================================================= */ /* Desktop */ @media (min-width: 1024px) { main > section.s-block { margin-top: 72px !important; margin-bottom: 72px !important; } } /* Tablet */ @media (min-width: 768px) and (max-width: 1023px) { main > section.s-block { margin-top: 56px !important; margin-bottom: 56px !important; } } /* Mobile */ @media (max-width: 767px) { main > section.s-block { margin-top: 42px !important; margin-bottom: 42px !important; } } /* ========================================================= EXCEPTIONS — العناصر اللي ضبطناها مسبقًا ========================================================= */ /* Hero banners */ main > section[data-testid="store-home-fixed-banner"] { margin-top: 0 !important; margin-bottom: 0 !important; } /* Categories */ main > section[data-testid="store-home-square-photos"] { margin-top: 0 !important; margin-bottom: 0 !important; } /* مختارات قيمة — لا نكسر الخلفية المقوسة */ section#best-offers-6-slider { margin-top: 0 !important; } /* يمنع تكرار الهوامش الداخلية */ main > section.s-block > .container { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= MOBILE HERO BANNERS — FULL WIDTH ========================================================= */ @media (max-width: 767px) { section[data-testid="store-home-fixed-banner"] { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 !important; overflow: hidden !important; } section[data-testid="store-home-fixed-banner"] > .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } section[data-testid="store-home-fixed-banner"] a, section[data-testid="store-home-fixed-banner"] picture { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } section[data-testid="store-home-fixed-banner"] img { display: block !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; margin: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; } } /* ========================================================= GLOBAL STORE COLORS — ALL PAGES Beige Background + Blue Text ========================================================= */ /* خلفية الموقع بالكامل */ html, body, #app, .app-inner, main, main-content { background-color: #F3F1E1 !important; } /* خلفيات الصفحات والسكاشن الأساسية */ main, main > section, .page-wrapper, .content, .content-wrapper { background-color: #F3F1E1; } /* جميع النصوص — بدون فرض اللون على span داخل الأزرار */ body, main { color: #26316B; } p, label, small, strong, b, h1, h2, h3, h4, h5, h6, a { color: #26316B; } /* عناوين الصفحات */ .page-title, .section-title, .s-slider-block__title h2, .s-block__title, .product-entry__title { color: #26316B !important; } /* صفحات المنتجات */ .s-product-card-content, .s-product-card-content-main, .s-product-card-content-sub, .product-entry, .product-single, .product-details { color: #26316B; } /* السعر */ .s-product-card-price, .product-price, .price, ins { color: #26316B !important; } /* Breadcrumb */ .breadcrumb, .breadcrumb a, .breadcrumb span { color: #26316B !important; } /* حقول الإدخال */ input, textarea, select { color: #26316B !important; } /* Placeholder */ input::placeholder, textarea::placeholder { color: rgba(38, 49, 107, 0.55) !important; } /* الأيقونات التي تعتمد currentColor */ main svg, main i { color: #26316B; } /* ========================================================= IMPORTANT: ========================================================= */ /* التصنيفات */ section[data-testid="store-home-square-photos"] { /* يحتفظ بخلفيته المخصصة */ } /* الهيدر المعتمد */ header.store-header, header.store-header #mainnav, header.store-header #mainnav .inner, header.store-header .top-navbar { background-color: #F3F1E1 !important; color: #26316B !important; } /* الفوتر يبقى باللون اللي اعتمدناه */ footer, .store-footer, .store-footer__inner { background-color: #EFECD8 !important; color: #26316B !important; } /* ========================================================= PRODUCT PAGE — FINAL BACKGROUND COLORS Main Beige: #F3F1E1 Secondary Beige: #E2DDBF Text Blue: #26316B ========================================================= */ /* ========================================================= 01. MAIN PRODUCT PAGE BACKGROUND ========================================================= */ .product-page, .product-entry, .product-details, .product-form, .product-tabs, .reviews-container, main { background-color: #F3F1E1 !important; } /* ========================================================= 02. REMOVE WHITE BACKGROUNDS ========================================================= */ .product-page .bg-white, .product-entry .bg-white, .product-details .bg-white, .product-form .bg-white, .product-tabs .bg-white, .product-reviews .bg-white, main .bg-white, main [class~="bg-white"] { background-color: #F3F1E1 !important; } /* ========================================================= 03. GRAY BACKGROUNDS الرمادي يتحول إلى #E2DDBF ========================================================= */ main .bg-gray-50, main .bg-gray-100, main .bg-gray-200, main [class~="bg-gray-50"], main [class~="bg-gray-100"], main [class~="bg-gray-200"], .product-page .bg-gray-50, .product-page .bg-gray-100, .product-page .bg-gray-200, .product-details .bg-gray-50, .product-details .bg-gray-100, .product-details .bg-gray-200, .product-form .bg-gray-50, .product-form .bg-gray-100, .product-form .bg-gray-200, .product-tabs .bg-gray-50, .product-tabs .bg-gray-100, .product-tabs .bg-gray-200, .product-reviews .bg-gray-50, .product-reviews .bg-gray-100, .product-reviews .bg-gray-200 { background-color: #E2DDBF !important; } /* ========================================================= 04. REVIEWS SECTION الخلفية الكبيرة للتقييمات ========================================================= */ .product-reviews, .reviews-container { background-color: #E2DDBF !important; } /* الطبقات الداخلية الرمادية في التقييمات */ .product-reviews > div, .reviews-container > div { background-color: #E2DDBF !important; } /* ========================================================= 05. TEXT COLOR ========================================================= */ .product-page, .product-page p, .product-page span, .product-page h1, .product-page h2, .product-page h3, .product-page h4, .product-page h5, .product-page h6, .product-page label, .product-page a, .product-details, .product-details p, .product-details span, .product-details h1, .product-details h2, .product-details h3, .product-form, .product-tabs, .product-reviews, .product-reviews p, .product-reviews span, .product-reviews h1, .product-reviews h2, .product-reviews h3, .product-reviews h4, .reviews-container, .reviews-container p, .reviews-container span, .reviews-container h2, .reviews-container h3 { color: #26316B !important; } /* ========================================================= 06. FORM FIELDS ========================================================= */ .product-page input, .product-page textarea, .product-page select, .product-form input, .product-form textarea, .product-form select { background-color: #F3F1E1 !important; color: #26316B !important; border-color: rgba(38, 49, 107, 0.18) !important; } /* Placeholder */ .product-page input::placeholder, .product-page textarea::placeholder, .product-form input::placeholder, .product-form textarea::placeholder { color: rgba(38, 49, 107, 0.55) !important; } /* ========================================================= 07. REVIEW PROGRESS BACKGROUNDS الرمادي داخل أشرطة التقييم ========================================================= */ .product-reviews .bg-gray-100, .product-reviews .bg-gray-200, .reviews-container .bg-gray-100, .reviews-container .bg-gray-200 { background-color: #E2DDBF !important; } /* ========================================================= 08. KEEP ORIGINAL BRAND ELEMENTS ========================================================= */ /* Apple Pay */ .apple-pay, .apple-pay *, [class*="apple-pay"] { /* يحتفظ بالتصميم الأصلي */ } /* Tabby */ [class*="tabby"], [class*="Tabby"] { /* يحتفظ بالتصميم الأصلي */ } /* ========================================================= PRODUCT REVIEWS / COMMENTS — REAL SALLA ELEMENTS FIX ========================================================= */ /* الحاوية الرئيسية للتقييمات والتعليقات */ salla-comments[data-testid="store-product-comments"], salla-comments[data-testid="store-product-comments"] .s-comments, salla-comments[data-testid="store-product-comments"] .s-comments-container { background-color: #F3F1E1 !important; color: #26316B !important; } /* ملخص التقييمات */ salla-reviews-summary, salla-reviews-summary.s-reviews-summary-wrapper, .s-reviews-summary-main-container { background-color: #E2DDBF !important; color: #26316B !important; } /* أي طبقات داخلية */ salla-reviews-summary *, .s-reviews-summary-main-container * { color: #26316B; } /* باقي بلوكات التعليقات */ .s-comments-header, .s-comments-title, .s-infinite-scroll-wrapper, .s-comments-product { background-color: #F3F1E1 !important; } /* ========================================================= MOBILE FIX ========================================================= */ @media (max-width: 767px) { salla-comments[data-testid="store-product-comments"] { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 12px !important; overflow: hidden !important; } salla-comments[data-testid="store-product-comments"] .s-comments-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } salla-reviews-summary, salla-reviews-summary.s-reviews-summary-wrapper, .s-reviews-summary-main-container { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 14px !important; box-sizing: border-box !important; overflow: hidden !important; } /* يمنع العناصر الداخلية من توسيع الصفحة */ salla-reviews-summary *, .s-reviews-summary-main-container * { max-width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= PRODUCT PAGE — FINAL SAFE OVERRIDES ========================================================= */ /* خلفية صفحة المنتج */ body.product-single, body.product-single #app, body.product-single .app-inner, body.product-single main#main-content { background-color: #F3F1E1 !important; color: #26316B !important; } body.product-single main#main-content .bg-white, body.product-single main#main-content [class~="bg-white"] { background-color: #F3F1E1 !important; } body.product-single main#main-content .bg-gray-50, body.product-single main#main-content .bg-gray-100, body.product-single main#main-content .bg-gray-200, body.product-single main#main-content [class~="bg-gray-50"], body.product-single main#main-content [class~="bg-gray-100"], body.product-single main#main-content [class~="bg-gray-200"] { background-color: #E2DDBF !important; } body.product-single salla-comments[data-testid="store-product-comments"], body.product-single salla-comments[data-testid="store-product-comments"] .s-comments, body.product-single salla-comments[data-testid="store-product-comments"] .s-comments-container, body.product-single .s-comments-product, body.product-single .s-comments-header, body.product-single .s-infinite-scroll-wrapper { background-color: #F3F1E1 !important; color: #26316B !important; } body.product-single salla-reviews-summary, body.product-single .s-reviews-summary-wrapper, body.product-single .s-reviews-summary-main-container { background-color: #E2DDBF !important; color: #26316B !important; } /* الأزرار الزرقاء: نص وأيقونات بيج */ body.product-single main#main-content .s-button-primary, body.product-single main#main-content .s-button-element.s-button-primary, body.product-single main#main-content button.bg-primary, body.product-single main#main-content a.bg-primary, body.product-single main#main-content [class~="bg-primary"] { background-color: #26316B !important; border-color: #26316B !important; color: #F3F1E1 !important; } body.product-single main#main-content .s-button-primary *, body.product-single main#main-content .s-button-element.s-button-primary *, body.product-single main#main-content button.bg-primary *, body.product-single main#main-content a.bg-primary *, body.product-single main#main-content [class~="bg-primary"] * { color: #F3F1E1 !important; } body.product-single main#main-content .s-button-primary svg, body.product-single main#main-content .s-button-element.s-button-primary svg, body.product-single main#main-content button.bg-primary svg, body.product-single main#main-content a.bg-primary svg, body.product-single main#main-content [class~="bg-primary"] svg { color: #F3F1E1 !important; fill: currentColor !important; } /* الأزرار الخارجية: بيج + أزرق */ body.product-single main#main-content .s-button-outline, body.product-single main#main-content .s-button-outline-primary, body.product-single main#main-content .s-button-element.s-button-outline, body.product-single main#main-content .s-button-element.s-button-outline-primary { background-color: #F3F1E1 !important; border-color: #26316B !important; color: #26316B !important; } body.product-single main#main-content .s-button-outline *, body.product-single main#main-content .s-button-outline-primary *, body.product-single main#main-content .s-button-element.s-button-outline *, body.product-single main#main-content .s-button-element.s-button-outline-primary * { color: #26316B !important; } /* Apple Pay و Tabby يحتفظان بتصميمهما الأصلي */ body.product-single [class*="apple-pay"], body.product-single [class*="ApplePay"], body.product-single [class*="tabby"], body.product-single [class*="Tabby"] { /* no forced brand colors */ } /* الجوال: فقط منع السكرول الأفقي بدون تغيير عرض أعمدة المنتج */ @media (max-width: 767px) { html, body, #app, .app-inner, main#main-content { max-width: 100% !important; overflow-x: clip !important; } body.product-single salla-comments[data-testid="store-product-comments"], body.product-single salla-comments[data-testid="store-product-comments"] .s-comments-container, body.product-single salla-reviews-summary, body.product-single .s-reviews-summary-wrapper, body.product-single .s-reviews-summary-main-container { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } /* ========================================================= DESKTOP HEADER — NAV CATEGORIES OVERLAP FIX ========================================================= */ @media (min-width: 1024px) { /* الهيدر يتمدد حسب محتواه */ header.store-header, header.store-header #mainnav, header.store-header #mainnav .inner { height: auto !important; min-height: 0 !important; overflow: visible !important; } /* ترتيب محتوى الهيدر */ header.store-header #mainnav .inner { display: flex !important; flex-wrap: wrap !important; align-items: center !important; width: 100% !important; padding-top: 12px !important; padding-bottom: 12px !important; row-gap: 16px !important; } /* شريط التصنيفات / القائمة */ header.store-header .main-menu, header.store-header nav.main-menu, header.store-header ul.main-menu { position: relative !important; order: 20 !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 10px 20px 4px !important; gap: 14px 28px !important; clear: both !important; z-index: 2 !important; } /* عناصر التصنيفات */ header.store-header .main-menu > li { position: relative !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* البحث يبقى فوق التصنيفات */ header.store-header salla-search, header.store-header .header-search, header.store-header .search-container, header.store-header [class*="search"] { position: relative !important; z-index: 5 !important; } /* منع أي عنصر من الطلوع فوق الثاني */ header.store-header #mainnav { position: relative !important; padding-bottom: 8px !important; background-color: #F3F1E1 !important; } } salla-products-slider[slider-id="slider-with-bg-6"] { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; padding: 40px 0 260px !important; margin: 0 !important; background-image: url("https://cdn.files.salla.network/other/569355431/d356106c-34fb-4cf5-9928-1c5893417b7f-original.webp") !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% 100% !important; overflow: visible !important; } salla-products-slider[slider-id="slider-with-bg-6"] salla-slider, salla-products-slider[slider-id="slider-with-bg-6"] .s-products-slider-slider, salla-products-slider[slider-id="slider-with-bg-6"] .swiper, salla-products-slider[slider-id="slider-with-bg-6"] .swiper-wrapper, salla-products-slider[slider-id="slider-with-bg-6"] .swiper-slide, salla-products-slider[slider-id="slider-with-bg-6"] .s-product-card-entry { background-color: transparent !important; } @media (max-width: 767px) { salla-products-slider[slider-id="slider-with-bg-6"] { padding: 25px 0 170px !important; background-image: url("https://cdn.files.salla.network/other/569355431/ff3c0fcf-6668-4748-9107-4e93cb7f3a21-original.webp") !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% 100% !important; } } /* ========================================================= CATEGORIES MOBILE — FINAL كامل بدون قص + بدون شريط أزرق تحت ========================================================= */ @media (max-width: 767px) { section[data-testid="store-home-square-photos"] { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 218px !important; min-height: 218px !important; margin: 0 !important; padding: 58px 0 0 !important; background-color: #F3F1E1 !important; background-image: url("https://cdn.files.salla.network/other/569355431/c0839c23-fb77-4ece-a08f-b2b2751970ee-original.webp") !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: 100% 218px !important; overflow: hidden !important; box-sizing: border-box !important; } /* العنوان */ section[data-testid="store-home-square-photos"]::before { content: "التصنيفات" !important; position: absolute !important; top: 18px !important; right: 0 !important; left: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #F3F1E1 !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; z-index: 10 !important; pointer-events: none !important; } /* الأربع تصنيفات */ section[data-testid="store-home-square-photos"] > div.grid, section[data-testid="store-home-square-photos"] > div.two-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 160px !important; grid-auto-rows: 160px !important; width: 100% !important; max-width: 100% !important; height: 160px !important; min-height: 160px !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; align-items: end !important; align-content: end !important; transform: none !important; overflow: hidden !important; } /* كل تصنيف */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos { display: block !important; width: 100% !important; max-width: 100% !important; height: 160px !important; min-height: 160px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: hidden !important; } /* صورة التصنيف كاملة */ section[data-testid="store-home-square-photos"] a.banner-entry.square-photos > div.lazy_bg { display: block !important; width: 100% !important; height: 160px !important; min-height: 160px !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center bottom !important; background-size: contain !important; transform: none !important; border: 0 !important; border-radius: 0 !important; } } /* ========================================================= MOBILE SIDE MENU — COLORS ONLY ========================================================= */ @media (max-width: 767px) { /* خلفية السايد منيو */ .main-menu, .main-menu .menu-inner, .main-menu .menu-container, .main-menu ul, .main-menu li { background-color: #F3F1E1 !important; } /* لون النصوص */ .main-menu a, .main-menu li > a, .main-menu span { color: #26316B !important; } /* الأسهم والأيقونات */ .main-menu a i, .main-menu a svg, .main-menu li i, .main-menu li svg { color: #26316B !important; } /* نحافظ على لون التخفيضات الأحمر */ .main-menu a.text-red-500, .main-menu a.text-red-600, .main-menu .text-red-500, .main-menu .text-red-600 { color: inherit !important; } } @media (max-width: 767px) { section[data-testid="store-home-square-photos"] > div.grid, section[data-testid="store-home-square-photos"] > div.two-row { column-gap: 4px !important; row-gap: 0 !important; } section[data-testid="store-home-square-photos"] a.banner-entry.square-photos { width: 100% !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= مختارات قيمة — FINAL CURVED BACKGROUND CURRENT SLIDER = 5 ========================================================= */ /* السكشن الرئيسي */ section#best-offers-5-slider { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 45px 0 85px !important; background: transparent !important; overflow: hidden !important; z-index: 1 !important; isolation: isolate !important; } /* ========================================================= الخلفية المقوسة ========================================================= */ section#best-offers-5-slider::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 112% !important; height: calc(100% - 22px) !important; background-color: transparent !important; background-image: url("https://cdn.files.salla.network/other/569355431/d356106c-34fb-4cf5-9928-1c5893417b7f-original.webp") !important; background-repeat: no-repeat !important; /* نخلي الزخرفة تظهر بأسفل الخلفية */ background-position: center bottom !important; background-size: 100% auto !important; /* التقويسة الكبيرة من الأسفل */ border-radius: 0 0 50% 50% / 0 0 18% 18% !important; z-index: -1 !important; pointer-events: none !important; } /* كل محتوى مختارات فوق الخلفية */ section#best-offers-5-slider > * { position: relative !important; z-index: 2 !important; } /* السلايدر نفسه شفاف */ section#best-offers-5-slider salla-products-slider[slider-id="slider-with-bg-5"], section#best-offers-5-slider salla-products-slider[slider-id="slider-with-bg-5"] .s-products-slider-wrapper, section#best-offers-5-slider salla-products-slider[slider-id="slider-with-bg-5"] .s-products-slider-slider, section#best-offers-5-slider .swiper, section#best-offers-5-slider .swiper-wrapper, section#best-offers-5-slider .swiper-slide { background: transparent !important; } /* نلغي أي before قديم على السلايدر */ salla-products-slider[slider-id="slider-with-bg-5"]::before { content: none !important; display: none !important; } /* ========================================================= MOBILE الشكل الموجود بالصورة المرجعية ========================================================= */ @media (max-width: 767px) { section#best-offers-5-slider { padding-top: 34px !important; padding-bottom: 76px !important; margin-top: 0 !important; margin-bottom: 24px !important; overflow: hidden !important; } section#best-offers-5-slider::before { top: 0 !important; width: 128vw !important; height: calc(100% - 18px) !important; left: 50% !important; transform: translateX(-50%) !important; background-position: center bottom !important; /* الصورة تكبر شوي عشان يظهر الباترن مثل المرجع */ background-size: 125% auto !important; border-radius: 0 0 50% 50% / 0 0 23% 23% !important; } } /* ========================================================= TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { section#best-offers-5-slider { padding: 42px 0 90px !important; margin-bottom: 30px !important; } section#best-offers-5-slider::before { width: 118% !important; height: calc(100% - 20px) !important; background-size: 110% auto !important; border-radius: 0 0 50% 50% / 0 0 20% 20% !important; } } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1024px) { section#best-offers-5-slider { padding: 55px 0 115px !important; margin-top: 0 !important; margin-bottom: 40px !important; } section#best-offers-5-slider::before { width: 108% !important; height: calc(100% - 25px) !important; background-position: center bottom !important; background-size: 100% auto !important; border-radius: 0 0 50% 50% / 0 0 17% 17% !important; } }