/* ========================================================= HAYAA STORE — CLEANED CONSERVATIVE BUILD - Preserves original cascade order - Removes exact duplicate rules only - Removes invalid declarations ignored by browsers - Keeps existing Salla-specific overrides and !important rules ========================================================= */ /* ========================================================= HAYAA STORE FEATURED PRODUCTS — FINAL PREMIUM HOVER CARD ========================================================= */ /* ========================================================= GLOBAL IMAGE FIX ========================================================= */ .object-contain { -o-object-fit: contain; object-fit: contain; padding-right: 0rem; padding-left: 1rem; align-items: center; } /* ========================================================= MAIN SECTION ========================================================= */ #featured-products-style2-2 { background: #F7F3EC !important; padding: 70px 0 80px !important; position: relative; overflow: hidden; } /* ========================================================= SECTION TITLE ========================================================= */ #featured-products-style2-2 .container::before { content: "مختارات هياء"; display: block; text-align: center; color: #44362C; font-size: 30px; font-weight: 700; margin-bottom: 10px; } /* ========================================================= SECTION SUBTITLE ========================================================= */ #featured-products-style2-2 .container::after { content: "اكتشفي العباية التي تعبّر عن أسلوبك"; display: block; text-align: center; color: #81766B; font-size: 14px; line-height: 1.8; margin-bottom: 35px; } /* ========================================================= TABS WRAPPER ========================================================= */ #featured-products-style2-2 .tabs { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 38px; padding: 6px; flex-wrap: wrap; } /* ========================================================= TAB BUTTON ========================================================= */ #featured-products-style2-2 .tab-trigger .s-button-element { border: 1px solid #D8CEBF !important; background: transparent !important; color: #66584C !important; border-radius: 50px !important; padding: 11px 25px !important; min-height: 44px !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease !important; } /* ========================================================= TAB HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .tab-trigger:hover .s-button-element { background: #ECE5D9 !important; border-color: #AAA78D !important; color: #44362C !important; transform: translateY(-2px); } } /* ========================================================= ACTIVE TAB ========================================================= */ #featured-products-style2-2 .tab-trigger.is-active .s-button-element { background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; box-shadow: 0 8px 25px rgba(68,54,44,.10) !important; } /* ========================================================= PRODUCTS GRID ========================================================= */ #featured-products-style2-2 .s-products-list-wrapper { gap: 24px !important; } /* ========================================================= PRODUCT CARD ========================================================= */ #featured-products-style2-2 .s-product-card-entry { position: relative; background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; transform: none !important; transition: none !important; } /* ========================================================= IMAGE WRAPPER ========================================================= */ /* ========================================================= 1. MAIN CONTAINER & GLASS CARD (مع أنيماشن الرفع) ========================================================= */ #featured-products-style2-2 .s-product-card-entry { position: relative !important; border-radius: 16px !important; overflow: hidden !important; /* تنعيم حركة الكارت بالكامل */ transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Hover Animation للكارت بالكامل */ @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-entry:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(68, 54, 44, 0.22) !important; } } #featured-products-style2-2 .s-product-card-content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: fit-content !important; max-height: max-content !important; width: 100% !important; z-index: 20 !important; padding: 8px 12px 6px !important; /* خلفية زجاجية معتمة بنسبة متناسقة */ background: linear-gradient( 135deg, rgba(133, 131, 106, 0.82) 0%, rgba(133, 131, 106, 0.65) 100% ) !important; /* تأثير Blurring زجاجي */ backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-top: 1px solid rgba(255, 255, 255, 0.55) !important; border-radius: 12px !important; box-shadow: 0 14px 32px rgba(68, 54, 44, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; box-sizing: border-box !important; /* تنعيم إضاءة الحدود للزجاج */ transition: border-color 0.4s ease, background 0.4s ease !important; } /* زيادة لمعان الزجاج عند الـ Hover */ @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-entry:hover .s-product-card-content { border-color: rgba(255, 255, 255, 0.45) !important; border-top-color: rgba(255, 255, 255, 0.8) !important; } } /* ========================================================= 2. PRODUCT TITLE ========================================================= */ #featured-products-style2-2 .s-product-card-content-title { margin: 0 0 2px 0 !important; padding: 0 !important; } #featured-products-style2-2 .s-product-card-content-title a { color: #FFFFFF !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================= 3. FOOTER (دمج السعر والزرار أفقياً) ========================================================= */ #featured-products-style2-2 .s-product-card-content-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 4px !important; padding-top: 0 !important; width: 100% !important; } /* ========================================================= 4. PRICE ========================================================= */ #featured-products-style2-2 .s-product-card-content-sub { margin-bottom: 7px !important; padding: 0 !important; display: inline-flex !important; background: transparent !important; border: none !important; } #featured-products-style2-2 .s-product-card-price { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #F7F3EC !important; font-size: 13.5px !important; font-weight: 700 !important; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ========================================================= 5. ADD TO CART BUTTON ========================================================= */ #featured-products-style2-2 .s-product-card-content-footer .s-button-element { flex: 1 !important; min-width: 0 !important; position: relative !important; overflow: hidden !important; background: rgba(247, 243, 236, .12) !important; color: #FFFFFF !important; border: 1px solid rgba(247, 243, 236, .75) !important; border-radius: 7px !important; min-height: 32px !important; height: 32px !important; padding: 0 8px !important; font-size: 11.5px !important; font-weight: 600 !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-element::before { display: none !important; } @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-content-footer .s-button-element:hover { background: #F7F3EC !important; color: #44362C !important; border-color: #F7F3EC !important; transform: scale(1.02) !important; } } /* ========================================================= 6. IMAGE & HOVER (أنيميشن الزوم للصورة) ========================================================= */ #featured-products-style2-2 .s-product-card-image { position: relative; overflow: hidden !important; border-radius: 16px !important; background: #EEE8DE !important; } #featured-products-style2-2 .s-product-card-image img { display: block; width: 100% !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; transform: scale(1); transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1) !important; } @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.06) !important; } } /* ========================================================= 7. WISHLIST BUTTON ========================================================= */ #featured-products-style2-2 .s-product-card-wishlist-btn { top: 12px !important; left: 12px !important; right: auto !important; z-index: 30 !important; overflow: visible !important; } @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-wishlist-btn:hover .s-button-element { background: #85836A !important; color: #FFFFFF !important; transform: scale(1.1) !important; } } #featured-products-style2-2 .s-product-card-wishlist-btn.added .s-button-element, #featured-products-style2-2 .s-product-card-wishlist-btn.favorited .s-button-element { background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; } /* ========================================================= 8. TABLET RESPONSIVE (768px - 1024px) ========================================================= */ @media (max-width: 1024px) and (min-width: 768px) { #featured-products-style2-2 { padding: 55px 0 65px !important; } #featured-products-style2-2 .s-products-list-wrapper { gap: 16px !important; } #featured-products-style2-2 .tab-trigger .s-button-element { padding: 10px 20px !important; } } /* ========================================================= 9. MOBILE RESPONSIVE (Up to 767px) ========================================================= */ @media (max-width: 767px) { #featured-products-style2-2 { padding: 38px 0 45px !important; } #featured-products-style2-2 .s-products-list-wrapper { gap: 10px !important; } #featured-products-style2-2 .s-product-card-entry { border-radius: 12px !important; } #featured-products-style2-2 .s-product-card-content { padding: 6px 8px 5px !important; } #featured-products-style2-2 .s-product-card-content-title a { font-size: 11.5px !important; } #featured-products-style2-2 .s-product-card-price { font-size: 12px !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-element { height: 28px !important; min-height: 28px !important; font-size: 10px !important; } /* Tabs Horizontal Scroll */ #featured-products-style2-2 .tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 7px; padding: 2px 2px 7px; margin-bottom: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #featured-products-style2-2 .tabs::-webkit-scrollbar { display: none; } #featured-products-style2-2 .tab-trigger { flex: 0 0 auto; } #featured-products-style2-2 .tab-trigger .s-button-element { min-height: 34px !important; padding: 6px 12px !important; font-size: 11px !important; } } /* ========================================================= 10. TOUCH & REDUCED MOTION FIXES ========================================================= */ @media (hover: none), (pointer: coarse) { #featured-products-style2-2 .s-product-card-entry:hover { transform: none !important; box-shadow: none !important; } #featured-products-style2-2 .s-product-card-image img { transform: none !important; } } @media (prefers-reduced-motion: reduce) { #featured-products-style2-2 *, #featured-products-style2-2 *::before, #featured-products-style2-2 *::after { animation: none !important; transition: none !important; } } /* ========================================================= WISHLIST — WHOLE BUTTON MOVE ========================================================= */ #featured-products-style2-2 .s-product-card-wishlist-btn { top: 14px !important; left: 14px !important; right: auto !important; z-index: 30 !important; overflow: visible !important; transform: translateX(0); transition: transform .3s ease !important; } /* الزر نفسه */ #featured-products-style2-2 .s-product-card-wishlist-btn .s-button-element { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.94) !important; border: 0 !important; color: #44362C !important; box-shadow: 0 5px 16px rgba(68,54,44,.08) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: visible !important; transform: none !important; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease !important; } /* منع أي Border / Ring قديم */ #featured-products-style2-2 .s-product-card-wishlist-btn .s-button-element::before, #featured-products-style2-2 .s-product-card-wishlist-btn .s-button-element::after { content: none !important; display: none !important; } /* ========================================================= HEART ICON — ثابت ========================================================= */ #featured-products-style2-2 .s-product-card-wishlist-btn .sicon-heart { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; font-size: 18px !important; line-height: 18px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; animation: none !important; } /* ========================================================= DESKTOP HOVER الدائرة كلها تتحرك ========================================================= */ @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-wishlist-btn:hover { animation: hayaaWishlistMove .65s ease-in-out; } #featured-products-style2-2 .s-product-card-wishlist-btn:hover .s-button-element { background: #85836A !important; color: #FFFFFF !important; border: 0 !important; box-shadow: 0 8px 20px rgba(133,131,106,.20) !important; } } /* ========================================================= WHOLE BUTTON RIGHT / LEFT ========================================================= */ @keyframes hayaaWishlistMove { 0% { transform: translateX(0); } 20% { transform: translateX(4px); } 40% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-2px); } 100% { transform: translateX(0); } } /* ========================================================= FAVORITED STATE ========================================================= */ #featured-products-style2-2 .s-product-card-wishlist-btn.added .s-button-element, #featured-products-style2-2 .s-product-card-wishlist-btn.favorited .s-button-element { background: #85836A !important; color: #FFFFFF !important; border: 0 !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { #featured-products-style2-2 .s-product-card-wishlist-btn { top: 9px !important; left: 9px !important; transform: none !important; animation: none !important; } #featured-products-style2-2 .s-product-card-wishlist-btn .s-button-element { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; background: rgba(247,243,236,.94) !important; color: #44362C !important; } #featured-products-style2-2 .s-product-card-wishlist-btn .sicon-heart { width: 17px !important; height: 17px !important; font-size: 17px !important; line-height: 17px !important; transform: none !important; animation: none !important; } } /* ========================================================= HAYAA — WISHLIST CLEAN القلب فقط بدون أي نص أو Animation ========================================================= */ custom-salla-product-card .s-product-card-wishlist-btn { top: 14px !important; left: 14px !important; right: auto !important; z-index: 30 !important; overflow: visible !important; transform: none !important; animation: none !important; } custom-salla-product-card .s-product-card-wishlist-btn .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.94) !important; border: 1px solid rgba(68,54,44,.08) !important; color: #44362C !important; box-shadow: 0 6px 18px rgba(68,54,44,.08) !important; transform: none !important; animation: none !important; overflow: visible !important; } /* نلغي أي كلام أو Fill قديم */ custom-salla-product-card .s-product-card-wishlist-btn .s-button-element::before, custom-salla-product-card .s-product-card-wishlist-btn .s-button-element::after { content: none !important; display: none !important; } /* القلب ثابت */ custom-salla-product-card .s-product-card-wishlist-btn .sicon-heart { width: 18px !important; height: 18px !important; font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; animation: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Hover بسيط فقط */ @media (hover: hover) and (pointer: fine) { custom-salla-product-card .s-product-card-wishlist-btn:hover .s-button-element { background: #85836A !important; color: #FFFFFF !important; border-color: #85836A !important; } } /* ========================================================= ADD TO CART Premium Fill Animation ========================================================= */ custom-salla-product-card .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate; overflow: hidden !important; width: auto !important; min-width: 150px !important; height: 44px !important; min-height: 44px !important; padding: 0 22px !important; background: rgba(247,243,236,.25) !important; color: #44362C !important; border: 1px solid rgba(133,131,106,.45) !important; border-radius: 50px !important; font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; transition: color .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ========================================================= FILL يبدأ من المنتصف ويتمدد لبرا ========================================================= */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: #85836A; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: -1; transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .5s ease; } /* ========================================================= CARD HOVER يظهر Border أوضح للزر ========================================================= */ @media (hover: hover) and (pointer: fine) { custom-salla-product-card:hover .s-product-card-content-footer .s-button-element { border-color: rgba(133,131,106,.75) !important; box-shadow: 0 6px 20px rgba(68,54,44,.08) !important; } } /* ========================================================= BUTTON HOVER الأخضر يتملى من جوه لبرا ========================================================= */ @media (hover: hover) and (pointer: fine) { custom-salla-product-card .s-product-card-content-footer .s-button-element:hover { color: #FFFFFF !important; border-color: #85836A !important; box-shadow: 0 9px 25px rgba(133,131,106,.20) !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(22); } } /* ========================================================= BAG ICON ========================================================= */ custom-salla-product-card .s-product-card-content-footer .sicon-shopping-bag { position: relative; z-index: 2; margin-left: 6px; transition: color .3s ease !important; } /* النص فوق الـFill */ custom-salla-product-card .s-product-card-content-footer .s-button-text { position: relative; z-index: 2; } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px), (hover: none), (pointer: coarse) { custom-salla-product-card .s-product-card-wishlist-btn { top: 9px !important; left: 9px !important; } custom-salla-product-card .s-product-card-wishlist-btn .s-button-element { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } custom-salla-product-card .s-product-card-wishlist-btn .sicon-heart { width: 17px !important; height: 17px !important; font-size: 17px !important; } custom-salla-product-card .s-product-card-content-footer .s-button-element { width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; background: #85836A !important; color: #FFFFFF !important; border-color: #85836A !important; box-shadow: none !important; transition: none !important; } /* مفيش Animation على الموبايل */ custom-salla-product-card .s-product-card-content-footer .s-button-element::before { display: none !important; } } /************************************************/ /* ========================================================= HAYAA — SLIDER HEADER ACTIONS VIEW ALL + NAV ARROWS + MOBILE NO ANIMATION ========================================================= */ /* ========================================================= TITLE LEFT WRAPPER ========================================================= */ .s-slider-block__title-left { display: flex !important; align-items: center !important; gap: 12px !important; } /* ========================================================= VIEW ALL ========================================================= */ .s-slider-block__display-all { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 42px; padding: 0 22px !important; border-radius: 50px; background: rgba(247,243,236,.75); border: 1px solid rgba(133,131,106,.32); color: #44362C !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; overflow: hidden; isolation: isolate; box-shadow: 0 5px 16px rgba(68,54,44,.06); transition: color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* ========================================================= VIEW ALL FILL من النص إلى الخارج ========================================================= */ .s-slider-block__display-all::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: #85836A; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: -1; transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .2s ease; } /* ========================================================= VIEW ALL ARROW ========================================================= */ .s-slider-block__display-all::after { content: "←"; margin-right: 8px; font-size: 15px; line-height: 1; transition: transform .3s ease; } /* ========================================================= VIEW ALL HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { .s-slider-block__display-all:hover { color: #FFFFFF !important; border-color: #85836A; box-shadow: 0 8px 22px rgba(133,131,106,.18); } .s-slider-block__display-all:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(20); } .s-slider-block__display-all:hover::after { transform: translateX(-4px); } } /* ========================================================= NAV WRAPPER ========================================================= */ .s-slider-block__title-nav { display: flex !important; align-items: center !important; gap: 8px !important; } /* ========================================================= NAV BUTTON ========================================================= */ .s-slider-block__title-nav .s-slider-nav-arrow { position: relative; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.82) !important; border: 1px solid rgba(133,131,106,.24) !important; color: #44362C !important; overflow: hidden; box-shadow: 0 5px 16px rgba(68,54,44,.06) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease, color .3s ease !important; } /* ========================================================= NAV FILL ========================================================= */ .s-slider-block__title-nav .s-slider-nav-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #85836A; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .2s ease; } /* ========================================================= NAV ICON ========================================================= */ .s-slider-block__title-nav .s-slider-button-icon { position: relative; z-index: 2; display: flex !important; align-items: center !important; justify-content: center !important; } .s-slider-block__title-nav .s-slider-button-icon svg { width: 20px !important; height: 20px !important; fill: currentColor !important; transition: transform .3s ease; } /* ========================================================= NAV HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { .s-slider-block__title-nav .s-slider-nav-arrow:not(:disabled):hover { color: #FFFFFF !important; border-color: #85836A !important; box-shadow: 0 8px 20px rgba(133,131,106,.20) !important; transform: translateY(-2px); } .s-slider-block__title-nav .s-slider-nav-arrow:not(:disabled):hover::before { opacity: 1; transform: translate(-50%, -50%) scale(6); } /* Previous */ .s-slider-block__title-nav .s-slider-prev:not(:disabled):hover svg { transform: translateX(3px); } /* Next */ .s-slider-block__title-nav .s-slider-next:not(:disabled):hover svg { transform: translateX(-3px); } } /* ========================================================= DISABLED STATE ========================================================= */ .s-slider-block__title-nav .s-slider-nav-arrow:disabled, .s-slider-block__title-nav .s-slider-nav-arrow.swiper-button-disabled { opacity: .32 !important; cursor: default !important; background: rgba(247,243,236,.45) !important; border-color: rgba(133,131,106,.12) !important; box-shadow: none !important; transform: none !important; } /* ========================================================= LAST SPACING FIX ========================================================= */ .s-slider-block__title-left > :not([hidden]) ~ :not([hidden]) { margin-top: 10px; --tw-space-x-reverse: 0; margin-right: calc( 1.5rem * var(--tw-space-x-reverse) ); margin-left: calc( 1.5rem * calc( 1 - var(--tw-space-x-reverse) ) ); } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .s-slider-block__title-left { gap: 9px !important; } .s-slider-block__display-all { min-height: 39px; padding: 0 18px !important; font-size: 12px !important; } .s-slider-block__title-nav .s-slider-nav-arrow { width: 39px !important; height: 39px !important; min-width: 39px !important; min-height: 39px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .s-slider-block__title-left { gap: 7px !important; align-items: center !important; } /* ========================= VIEW ALL ========================= */ .s-slider-block__display-all { min-height: 36px; padding: 0 14px !important; font-size: 11px !important; border-radius: 50px; transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__display-all::after { font-size: 13px; margin-right: 5px; transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__display-all::before { display: none !important; animation: none !important; transition: none !important; } /* ========================= NAV ========================= */ .s-slider-block__title-nav { gap: 6px !important; } .s-slider-block__title-nav .s-slider-nav-arrow { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__title-nav .s-slider-nav-arrow::before { display: none !important; animation: none !important; transition: none !important; } .s-slider-block__title-nav .s-slider-button-icon { transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__title-nav .s-slider-button-icon svg { width: 17px !important; height: 17px !important; transform: none !important; animation: none !important; transition: none !important; } /* ========================= NO HOVER EFFECT MOBILE ========================= */ .s-slider-block__display-all:hover { color: #44362C !important; background: rgba(247,243,236,.75) !important; border-color: rgba(133,131,106,.32) !important; box-shadow: 0 5px 16px rgba(68,54,44,.06) !important; transform: none !important; } .s-slider-block__display-all:hover::after { transform: none !important; } .s-slider-block__title-nav .s-slider-nav-arrow:hover { transform: none !important; animation: none !important; } .s-slider-block__title-nav .s-slider-prev:hover svg, .s-slider-block__title-nav .s-slider-next:hover svg { transform: none !important; } /* ========================= MOBILE SPACING FIX ========================= */ .s-slider-block__title-left > :not([hidden]) ~ :not([hidden]) { margin-top: 6px; margin-right: 0; margin-left: 10px; } } /* ========================================================= TOUCH DEVICES NO ANIMATION AT ALL ========================================================= */ @media (hover: none), (pointer: coarse) { .s-slider-block__display-all { transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__display-all::before { display: none !important; animation: none !important; transition: none !important; } .s-slider-block__display-all::after { transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__title-nav .s-slider-nav-arrow { transform: none !important; animation: none !important; transition: none !important; } .s-slider-block__title-nav .s-slider-nav-arrow::before { display: none !important; animation: none !important; transition: none !important; } .s-slider-block__title-nav .s-slider-button-icon, .s-slider-block__title-nav .s-slider-button-icon svg { transform: none !important; animation: none !important; transition: none !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .s-slider-block__display-all, .s-slider-block__display-all::before, .s-slider-block__display-all::after, .s-slider-block__title-nav .s-slider-nav-arrow, .s-slider-block__title-nav .s-slider-nav-arrow::before, .s-slider-block__title-nav .s-slider-button-icon, .s-slider-block__title-nav .s-slider-button-icon svg { animation: none !important; transition: none !important; } } /***************************************/ /* ========================================================= HAYAA — PREMIUM PRODUCT PAGE GLOBAL FOR ALL PRODUCTS ========================================================= */ /* ========================= LAYOUT ========================= */ [id^="product-"] { gap: 36px !important; align-items: flex-start !important; } [id^="product-"] .sidebar { background: #EEE8DE; border-radius: 22px; overflow: hidden !important; box-shadow: 0 12px 34px rgba(68,54,44,.07); } [id^="product-"] .main-content { background: #F7F3EC; border: 1px solid rgba(68,54,44,.07); border-radius: 22px; padding: 26px !important; box-shadow: 0 12px 34px rgba(68,54,44,.05); } /* ========================= IMAGE ========================= */ [id^="product-"] .details-slider, [id^="product-"] .details-slider .swiper-slide { background: #EEE8DE !important; border-radius: 22px !important; overflow: hidden !important; } [id^="product-"] .details-slider img { width: 100% !important; object-fit: cover !important; transition: transform .65s cubic-bezier(.22,.61,.36,1) !important; } @media (hover:hover) and (pointer:fine) { [id^="product-"] .details-slider:hover .swiper-slide-active img { transform: scale(1.018); } } /* ========================= IMAGE WISHLIST ========================= */ [id^="product-"] .details-slider .btn--wishlist { position: absolute !important; top: 16px !important; left: 16px !important; right: auto !important; z-index: 40 !important; } [id^="product-"] .details-slider .btn--wishlist .s-button-element { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.93) !important; border: 1px solid rgba(68,54,44,.08) !important; color: #44362C !important; box-shadow: 0 6px 18px rgba(68,54,44,.09) !important; transition: .3s ease !important; } @media (hover:hover) and (pointer:fine) { [id^="product-"] .details-slider .btn--wishlist:hover .s-button-element { background: #85836A !important; color: #FFF !important; transform: scale(1.06); } } /* ========================= TITLE ========================= */ [id^="product-"] [data-testid="store-product-title"] { color: #44362C !important; font-size: clamp(24px,2vw,32px) !important; font-weight: 700 !important; line-height: 1.5 !important; margin-bottom: 15px !important; } [id^="product-"] [data-testid="store-product-title"]::after { content: ""; display: block; width: 50px; height: 2px; margin-top: 10px; border-radius: 50px; background: #85836A; } /* ========================= PRICE ========================= */ [id^="product-"] [data-testid="store-product-price"] { margin-bottom: 18px; padding: 12px 14px; background: rgba(133,131,106,.08); border: 1px solid rgba(133,131,106,.12); border-radius: 13px; } [id^="product-"] [data-testid="store-product-price"] p, [id^="product-"] .total-price { color: #85836A !important; font-weight: 800 !important; } /* ========================= DESCRIPTION ========================= */ [id^="product-"] [data-testid="store-product-description"] { background: #FFF; border: 1px solid rgba(68,54,44,.07); border-radius: 16px; padding: 20px !important; margin-bottom: 18px !important; box-shadow: 0 6px 18px rgba(68,54,44,.035); } [id^="product-"] .product__description p, [id^="product-"] .product__description li { color: #66584C !important; font-size: 14px !important; line-height: 1.9 !important; } [id^="product-"] .product__description h2, [id^="product-"] .product__description h3 { color: #44362C !important; font-weight: 700 !important; margin-top: 18px !important; margin-bottom: 9px !important; } [id^="product-"] .product__description a { color: #85836A !important; text-decoration: none !important; } /* ========================= TAGS ========================= */ [id^="product-"] .main-content .mb-3 > a { display: inline-flex !important; padding: 6px 11px; margin: 0 0 6px 5px !important; border-radius: 50px; background: #EEE8DE; color: #66584C !important; text-decoration: none !important; font-size: 11.5px !important; transition: .3s ease !important; } @media (hover:hover) and (pointer:fine) { [id^="product-"] .main-content .mb-3 > a:hover { background: #85836A; color: #FFF !important; } } /* ========================= SHARE / SECOND WISHLIST ========================= */ [id^="product-"] .s-social-share-btn .s-button-element, [id^="product-"] [data-testid="store-product-wishlist-btn"] .s-button-element { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important; background: #EEE8DE !important; border: 1px solid rgba(68,54,44,.07) !important; color: #44362C !important; transition: .3s ease !important; } @media (hover:hover) and (pointer:fine) { [id^="product-"] .s-social-share-btn:hover .s-button-element, [id^="product-"] [data-testid="store-product-wishlist-btn"]:hover .s-button-element { background: #85836A !important; color: #FFF !important; transform: translateY(-2px); } } /* ========================= FORM PRICE BOX ========================= */ [id^="product-"] .product-form > section:first-of-type { background: transparent !important; border: 1px solid rgba(68,54,44,.08); border-radius: 15px !important; padding: 15px 17px !important; } /* ========================= QUANTITY ========================= */ [id^="product-"] .sticky-product-bar { background: transparent !important; padding: 16px 0 0 !important; } [id^="product-"] .sticky-product-bar__quantity { background: #FFF; border: 1px solid rgba(68,54,44,.07); border-radius: 14px; padding: 11px 13px; margin-bottom: 13px !important; } [id^="product-"] .s-quantity-input-container { background: #F7F3EC; border: 1px solid rgba(133,131,106,.18); border-radius: 50px; overflow: hidden; } [id^="product-"] .s-quantity-input-button { width: 40px; height: 40px; color: #44362C; transition: .25s ease !important; } @media (hover:hover) and (pointer:fine) { [id^="product-"] .s-quantity-input-button:hover { background: #85836A; color: #FFF; } } /* ========================= ADD TO CART ========================= */ [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element { position: relative !important; isolation: isolate; overflow: hidden !important; width: 100% !important; height: 52px !important; min-height: 52px !important; border-radius: 50px !important; background: transparent !important; border: 1px solid #85836A !important; color: #44362C !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; transition: color .35s ease, box-shadow .35s ease !important; } /* Fill من النص */ [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: #85836A; transform: translate(-50%,-50%) scale(0); opacity: 0; z-index: -1; transition: transform .58s cubic-bezier(.22,.61,.36,1), opacity .2s ease; } @media (hover:hover) and (pointer:fine) { [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element:hover { color: #FFF !important; box-shadow: 0 9px 26px rgba(133,131,106,.20) !important; } [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element:hover::before { opacity: 1; transform: translate(-50%,-50%) scale(35); } } /* ========================= QUICK BUY ========================= */ [id^="product-"] .s-fast-checkout-button { margin-top: 9px !important; min-height: 46px; border-radius: 50px !important; border: 1px solid rgba(68,54,44,.12) !important; background: #EEE8DE !important; color: #44362C !important; transition: .3s ease !important; } @media (hover:hover) and (pointer:fine) { [id^="product-"] .s-fast-checkout-button:hover { background: #44362C !important; color: #FFF !important; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { [id^="product-"] { gap: 16px !important; } [id^="product-"] .sidebar, [id^="product-"] .details-slider { border-radius: 15px !important; box-shadow: none !important; } [id^="product-"] .main-content { border-radius: 17px; padding: 17px 13px 19px !important; box-shadow: none; } [id^="product-"] [data-testid="store-product-title"] { font-size: 21px !important; margin-bottom: 13px !important; } [id^="product-"] [data-testid="store-product-price"] { padding: 10px 11px; margin-bottom: 14px; } [id^="product-"] [data-testid="store-product-description"] { padding: 15px !important; border-radius: 13px; box-shadow: none; } [id^="product-"] .product__description p, [id^="product-"] .product__description li { font-size: 13px !important; line-height: 1.8 !important; } [id^="product-"] .details-slider .btn--wishlist { top: 9px !important; left: 9px !important; } [id^="product-"] .details-slider .btn--wishlist .s-button-element { width: 37px !important; height: 37px !important; min-width: 37px !important; min-height: 37px !important; } [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element { height: 49px !important; min-height: 49px !important; background: #85836A !important; color: #FFF !important; transition: none !important; } [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element::before { display: none !important; } [id^="product-"] *, [id^="product-"] *::before, [id^="product-"] *::after { animation: none !important; } } /* ========================= TOUCH — NO ANIMATION ========================= */ @media (hover:none), (pointer:coarse) { [id^="product-"] img, [id^="product-"] .s-button-element, [id^="product-"] svg { animation: none !important; transition: none !important; } [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element::before { display: none !important; } } /**********************************************/ /* ========================================================= HAYAA — FOOTER BOTTOM GREEN ========================================================= */ footer .md\:flex.items-center.justify-between.py-4.container, .store-footer + .md\:flex.items-center.justify-between.py-4.container { background: #85836A !important; color: #F7F3EC !important; max-width: 100% !important; width: 100% !important; padding: 16px 5% !important; border: 0 !important; } /* Copyright */ .copyright-text, .copyright-text p { color: #F7F3EC !important; } /* رابط منصة سلة */ .copyright-text a { color: #FFFFFF !important; font-weight: 600 !important; } /* Hover */ @media (hover: hover) and (pointer: fine) { .copyright-text a:hover { color: #44362C !important; } } /* MOBILE */ @media (max-width: 767px) { footer .md\:flex.items-center.justify-between.py-4.container, .store-footer + .md\:flex.items-center.justify-between.py-4.container { padding: 14px 16px !important; } .copyright-text, .copyright-text p, .copyright-text a { animation: none !important; transition: none !important; } } /* ========================================================= HAYAA — MAIN FOOTER GREEN ========================================================= */ footer, .store-footer { background: #85836A !important; color: #F7F3EC !important; } /* العناوين */ footer h3, .store-footer h3, .s-contacts-title { color: #FFFFFF !important; font-weight: 700 !important; } /* روابط الفوتر */ .s-menu-footer-item { color: #F7F3EC !important; text-decoration: none !important; } /* Hover الروابط */ @media (hover: hover) and (pointer: fine) { .s-menu-footer-item:hover { color: #FFFFFF !important; } } /* ========================================================= TRUST BADGE ========================================================= */ .s-trust-badges-wrapper { background: rgba(247,243,236,.10) !important; border: 1px solid rgba(247,243,236,.20) !important; border-radius: 14px !important; padding: 11px 14px !important; } .s-trust-badges-label { color: #F7F3EC !important; } .s-trust-badges-number { color: #FFFFFF !important; } /* ========================================================= CONTACTS ========================================================= */ .s-contacts-item { color: #F7F3EC !important; } .s-contacts-icon { background: rgba(247,243,236,.12) !important; color: #FFFFFF !important; border-radius: 50%; width: 34px; height: 34px; display: flex !important; align-items: center !important; justify-content: center !important; } /* Hover التواصل */ @media (hover: hover) and (pointer: fine) { .s-contacts-item:hover { color: #FFFFFF !important; } .s-contacts-item:hover .s-contacts-icon { background: #F7F3EC !important; color: #44362C !important; } } /* ========================================================= SOCIAL ========================================================= */ .s-social-list a { background: rgba(247,243,236,.12) !important; color: #FFFFFF !important; border: 1px solid rgba(247,243,236,.18) !important; border-radius: 50% !important; } /* Hover السوشيال */ @media (hover: hover) and (pointer: fine) { .s-social-list a:hover { background: #F7F3EC !important; color: #44362C !important; } } /* ========================================================= APPS ICONS ========================================================= */ salla-apps-icons { opacity: .95; } /* ========================================================= MOBILE NO ANIMATION ========================================================= */ @media (max-width: 767px), (hover: none), (pointer: coarse) { .s-menu-footer-item, .s-contacts-item, .s-contacts-icon, .s-social-list a, .s-trust-badges-wrapper { transition: none !important; animation: none !important; transform: none !important; } } .footer-is-light .store-footer .store-footer__inner { --tw-border-opacity: 1; border-bottom-color: #e5e7eb; border-bottom-color: rgba(229, 231, 235, var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: #f3f4f6; background-color: #85836A !important; } /* ========================================================= HAYAA — PREMIUM HEADER MENU ========================================================= */ /* ========================= ROOT MENU ITEMS ========================= */ .main-menu .root-level > a, .main-menu .root-level > span, nav .root-level > a { position: relative; display: inline-flex !important; align-items: center; color: #44362C !important; font-size: 14px !important; font-weight: 600 !important; padding: 12px 6px !important; text-decoration: none !important; transition: color .3s ease !important; } /* الخط تحت العنصر */ .main-menu .root-level > a::after, nav .root-level > a::after { content: ""; position: absolute; right: 50%; bottom: 5px; width: 0; height: 2px; border-radius: 50px; background: #85836A; transform: translateX(50%); transition: width .35s cubic-bezier(.22,.61,.36,1); } /* ========================= ROOT HOVER ========================= */ @media (hover:hover) and (pointer:fine) { .main-menu .root-level:hover > a, nav .root-level:hover > a { color: #85836A !important; } .main-menu .root-level:hover > a::after, nav .root-level:hover > a::after { width: 70%; } } /* ========================================================= DROPDOWN ========================================================= */ .main-menu .sub-menu, nav .sub-menu { background: #F7F3EC !important; border: 1px solid rgba(68,54,44,.08) !important; border-radius: 16px !important; padding: 10px !important; box-shadow: 0 14px 34px rgba(68,54,44,.10) !important; overflow: hidden; min-width: 230px !important; } /* ========================= DROPDOWN ITEMS ========================= */ .main-menu .sub-menu li, nav .sub-menu li { margin: 0 !important; } .main-menu .sub-menu li a, nav .sub-menu li a { display: flex !important; align-items: center; width: 100%; padding: 11px 13px !important; border-radius: 10px; color: #66584C !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; transition: background-color .3s ease, color .3s ease, transform .3s ease !important; } /* نقطة ديكورية */ .main-menu .sub-menu li a::before, nav .sub-menu li a::before { content: ""; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: #AAA78D; flex: 0 0 auto; transition: transform .3s ease, background-color .3s ease; } /* ========================= DROPDOWN HOVER ========================= */ @media (hover:hover) and (pointer:fine) { .main-menu .sub-menu li a:hover, nav .sub-menu li a:hover { background: rgba(133,131,106,.11) !important; color: #44362C !important; transform: translateX(-4px); } .main-menu .sub-menu li a:hover::before, nav .sub-menu li a:hover::before { background: #85836A; transform: scale(1.35); } } /* ========================================================= SPECIAL: "غطوة راس" ========================================================= */ [id="1859484264"].root-level > a { color: #44362C !important; } @media (hover:hover) and (pointer:fine) { [id="1859484264"].root-level:hover > a { color: #85836A !important; } } /* ========================================================= MOBILE MENU ========================================================= */ @media (max-width: 1023px) { nav li.lg\:hidden { width: 100%; margin-bottom: 4px; } nav li.lg\:hidden > a, nav li.lg\:hidden > span { display: flex !important; align-items: center; width: 100%; padding: 12px 14px !important; border-radius: 10px; color: #44362C !important; font-size: 13px !important; font-weight: 600 !important; background: transparent !important; text-decoration: none !important; } /* عنوان عبايات */ nav li[id="1902924380"].lg\:hidden > span { background: rgba(133,131,106,.10) !important; color: #44362C !important; margin-bottom: 5px; } /* العناصر الداخلية */ nav li[id="1902924380"].lg\:hidden ul { padding-right: 10px; margin-top: 5px; } nav li[id="1902924380"].lg\:hidden ul li a { padding: 10px 12px !important; color: #66584C !important; font-size: 12.5px !important; border-radius: 8px; } /* عرض الكل */ nav li[id="1902924380"].lg\:hidden ul li:first-child a { color: #85836A !important; font-weight: 700 !important; } /* غطوة راس */ nav li[id="1859484264"].lg\:hidden > a { background: rgba(238,232,222,.55) !important; } /* زر القفل */ .close-mobile-menu { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: #EEE8DE !important; color: #44362C !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* مفيش Animation على الموبايل */ nav li, nav a, nav span, nav .sub-menu, .close-mobile-menu { animation: none !important; transition: none !important; transform: none !important; } } /* ========================================================= TOUCH — NO ANIMATION ========================================================= */ @media (hover:none), (pointer:coarse) { .main-menu a, .main-menu li, .main-menu .sub-menu, nav a, nav li { animation: none !important; transition: none !important; transform: none !important; } } /* ========================================================= HAYAA — GLOBAL ALT PRODUCT CARD product-entry structure ========================================================= */ /* ========================= CARD ========================= */ custom-salla-product-card:has(.product-entry__image) { position: relative; background: transparent !important; border: 0 !important; padding: 10px !important ; padding: 70px 0 80px !important; position: relative; box-shadow: none !important; overflow: visible !important; } /* ========================= IMAGE WRAPPER ========================= */ custom-salla-product-card .product-entry__image { position: relative; overflow: hidden !important; border-radius: 18px !important; background: #EEE8DE !important; } /* ========================= IMAGE ========================= */ custom-salla-product-card .product-entry__image img { display: block; width: 100% !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; transform: scale(1); transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .3s ease !important; } @media (hover:hover) and (pointer:fine) { custom-salla-product-card:hover .product-entry__image img { transform: scale(1.025); opacity: 1 !important; } } /* ========================= WISHLIST ========================= */ custom-salla-product-card .product-entry__image .btn--wishlist { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; z-index: 20 !important; overflow: visible !important; transform: none !important; } /* button */ custom-salla-product-card .product-entry__image .btn--wishlist .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.94) !important; border: 1px solid rgba(68,54,44,.08) !important; color: #44362C !important; box-shadow: 0 6px 18px rgba(68,54,44,.08) !important; transform: none !important; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease !important; } /* heart icon */ custom-salla-product-card .product-entry__image .btn--wishlist .sicon-heart { width: 18px !important; height: 18px !important; font-size: 18px !important; line-height: 18px !important; margin: 0 !important; padding: 0 !important; transform: none !important; animation: none !important; overflow: visible !important; } @media (hover:hover) and (pointer:fine) { custom-salla-product-card .product-entry__image .btn--wishlist:hover .s-button-element { background: #85836A !important; color: #FFFFFF !important; box-shadow: 0 8px 20px rgba(133,131,106,.20) !important; } } /* ========================= CONTENT ========================= */ custom-salla-product-card .content-wrap { padding-top: 14px !important; background: transparent !important; } custom-salla-product-card .product-entry__content { display: flex; flex-direction: column; min-height: 0 !important; } /* ========================= TITLE ========================= */ custom-salla-product-card .product-entry__title { color: #44362C !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important; text-decoration: none !important; margin: 0 !important; transition: color .25s ease !important; } @media (hover:hover) and (pointer:fine) { custom-salla-product-card .product-entry__title:hover { color: #85836A !important; } } /* ========================= PRICE ========================= */ custom-salla-product-card .price-wrapper { margin-top: 5px !important; } custom-salla-product-card .price-wrapper span { color: #85836A !important; font-size: 17px !important; font-weight: 700 !important; } /* ========================= ADD TO CART WRAPPER ========================= */ custom-salla-product-card .add-to-cart-conatiner { padding-top: 12px !important; margin-top: auto !important; min-height: 0 !important; } /* ========================= ADD TO CART BUTTON ========================= */ custom-salla-product-card .btn--add-to-cart .s-button-element { position: relative !important; isolation: isolate; overflow: hidden !important; width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 18px !important; border-radius: 50px !important; background: rgba(247,243,236,.22) !important; border: 1px solid rgba(133,131,106,.48) !important; color: #44362C !important; font-size: 12.5px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; transition: color .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ========================= CENTER FILL ========================= */ custom-salla-product-card .btn--add-to-cart .s-button-element::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: #85836A; transform: translate(-50%, -50%) scale(0); opacity: 0; z-index: -1; transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .2s ease; } /* ========================= BUTTON HOVER ========================= */ @media (hover:hover) and (pointer:fine) { custom-salla-product-card:hover .btn--add-to-cart .s-button-element { border-color: rgba(133,131,106,.75) !important; } custom-salla-product-card .btn--add-to-cart .s-button-element:hover { color: #FFFFFF !important; border-color: #85836A !important; box-shadow: 0 8px 24px rgba(133,131,106,.20) !important; } custom-salla-product-card .btn--add-to-cart .s-button-element:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(26); } } /* ========================= BUTTON ICON ========================= */ custom-salla-product-card .btn--add-to-cart .sicon-shopping-bag { position: relative; z-index: 2; font-size: 14px !important; transition: none !important; } custom-salla-product-card .btn--add-to-cart .s-button-text { position: relative; z-index: 2; } /* ========================= FAVORITED STATE ========================= */ custom-salla-product-card .btn--wishlist.added .s-button-element, custom-salla-product-card .btn--wishlist.favorited .s-button-element { background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; } /* ========================= MOBILE ========================= */ @media (max-width:767px) { custom-salla-product-card .product-entry__image { border-radius: 13px !important; } custom-salla-product-card .product-entry__image img { transform: none !important; animation: none !important; transition: none !important; } custom-salla-product-card .product-entry__image .btn--wishlist { top: 8px !important; left: 8px !important; } custom-salla-product-card .product-entry__image .btn--wishlist .s-button-element { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } custom-salla-product-card .product-entry__image .sicon-heart { width: 17px !important; height: 17px !important; font-size: 17px !important; } custom-salla-product-card .content-wrap { padding-top: 10px !important; } custom-salla-product-card .product-entry__title { font-size: 12.5px !important; line-height: 1.5 !important; } custom-salla-product-card .price-wrapper { margin-top: 3px !important; } custom-salla-product-card .price-wrapper span { font-size: 14px !important; } custom-salla-product-card .add-to-cart-conatiner { padding-top: 8px !important; } custom-salla-product-card .btn--add-to-cart .s-button-element { height: 38px !important; min-height: 38px !important; background: #85836A !important; color: #FFFFFF !important; border-color: #85836A !important; font-size: 11px !important; animation: none !important; transition: none !important; } custom-salla-product-card .btn--add-to-cart .s-button-element::before { display: none !important; } } /* ========================= TOUCH NO ANIMATION ========================= */ @media (hover:none), (pointer:coarse) { custom-salla-product-card .product-entry__image img, custom-salla-product-card .btn--wishlist, custom-salla-product-card .btn--wishlist .s-button-element, custom-salla-product-card .btn--add-to-cart .s-button-element { animation: none !important; transition: none !important; transform: none !important; } custom-salla-product-card .btn--add-to-cart .s-button-element::before { display: none !important; } } custom-salla-product-card:has(.product-entry__image) { position: relative; } custom-salla-product-card:has(.product-entry__image) .product-entry__image { border-radius: 18px !important; } /* ========================================================= HAYAA — CATEGORY PRODUCT CARDS V2 Premium / Clean / Editorial ========================================================= */ /* ========================================================= CARD ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry.product-entry--vertical { position: relative !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================= IMAGE AREA ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image { position: relative !important; width: 100% !important; overflow: hidden !important; background: #EEE8DE !important; border-radius: 20px !important; box-shadow: 0 8px 28px rgba(68,54,44,.055) !important; } /* الرابط */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image > a { display: block !important; width: 100% !important; } /* الصورة */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; opacity: 1 !important; transform: scale(1) !important; transition: transform .65s cubic-bezier(.22,.61,.36,1), filter .4s ease !important; } /* Desktop Image Hover */ @media (hover:hover) and (pointer:fine) { .s-products-list-wrapper > custom-salla-product-card.product-entry:hover .product-entry__image img { transform: scale(1.028) !important; } } /* ========================================================= WISHLIST ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image > salla-button.btn--wishlist { position: absolute !important; top: 13px !important; left: 13px !important; right: auto !important; z-index: 30 !important; width: 40px !important; height: 40px !important; margin: 0 !important; transform: none !important; } /* الدائرة */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image > salla-button.btn--wishlist > .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.94) !important; border: 1px solid rgba(68,54,44,.07) !important; color: #44362C !important; box-shadow: 0 6px 20px rgba(68,54,44,.08) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: none !important; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease !important; } /* القلب */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image .sicon-heart { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; font-size: 18px !important; line-height: 18px !important; padding: 0 !important; margin: 0 !important; transform: none !important; animation: none !important; } /* Wishlist Hover */ @media (hover:hover) and (pointer:fine) { .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image > salla-button.btn--wishlist:hover > .s-button-element { background: #85836A !important; color: #FFFFFF !important; box-shadow: 0 8px 22px rgba(133,131,106,.22) !important; } } /* Wishlist Active */ .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--wishlist.added .s-button-element, .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--wishlist.favorited .s-button-element { background: #85836A !important; color: #FFFFFF !important; border-color: #85836A !important; } /* ========================================================= CONTENT ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .content-wrap { padding: 14px 3px 0 !important; background: transparent !important; } /* Inner */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__content { display: flex !important; flex-direction: column !important; min-height: 0 !important; background: transparent !important; } /* ========================================================= TITLE ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__title { color: #44362C !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.65 !important; margin: 0 !important; text-decoration: none !important; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .25s ease !important; } @media (hover:hover) and (pointer:fine) { .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__title:hover { color: #85836A !important; } } /* ========================================================= PRICE ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper { margin-top: 5px !important; min-height: 25px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper span { color: #85836A !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.5 !important; } /* SAR Icon */ .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper .sicon-sar { font-size: .88em !important; } /* ========================================================= ADD TO CART WRAPPER ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .add-to-cart-conatiner { display: flex !important; width: 100% !important; min-height: 0 !important; margin-top: 11px !important; padding-top: 0 !important; } /* Salla component */ .s-products-list-wrapper > custom-salla-product-card.product-entry salla-add-product-button.btn--add-to-cart { display: block !important; width: 100% !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart > div, .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart salla-button { width: 100% !important; } /* ========================================================= ADD TO CART BUTTON ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element { position: relative !important; isolation: isolate; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 43px !important; min-height: 43px !important; padding: 0 18px !important; overflow: hidden !important; border-radius: 50px !important; background: rgba(247,243,236,.25) !important; border: 1px solid rgba(133,131,106,.48) !important; color: #44362C !important; font-size: 12px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; transition: color .35s ease, border-color .35s ease, box-shadow .35s ease !important; } /* ========================================================= CENTER GREEN FILL ========================================================= */ .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element::before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: #85836A; transform: translate(-50%,-50%) scale(0); opacity: 0; z-index: 0; pointer-events: none; transition: transform .58s cubic-bezier(.22,.61,.36,1), opacity .18s ease; } /* النص والأيقونة فوق الـFill */ .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-text, .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .sicon-shopping-bag { position: relative !important; z-index: 2 !important; } /* Bag */ .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .sicon-shopping-bag { font-size: 14px !important; transform: none !important; } /* Desktop Button Hover */ @media (hover:hover) and (pointer:fine) { .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element:hover { color: #FFFFFF !important; border-color: #85836A !important; box-shadow: 0 8px 24px rgba(133,131,106,.18) !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element:hover::before { opacity: 1; transform: translate(-50%,-50%) scale(30); } } /* ========================================================= GRID SPACING ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards { gap: 28px 22px !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) and (min-width:768px) { .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image { border-radius: 17px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__title { font-size: 13.5px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper span { font-size: 15px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { .s-products-list-wrapper.s-products-list-vertical-cards { gap: 20px 11px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry { transform: none !important; animation: none !important; } /* Image */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image { border-radius: 13px !important; box-shadow: none !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image img { transform: none !important; transition: none !important; animation: none !important; } /* Heart */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image > salla-button.btn--wishlist { top: 8px !important; left: 8px !important; width: 34px !important; height: 34px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image > salla-button.btn--wishlist > .s-button-element { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; box-shadow: 0 4px 12px rgba(68,54,44,.06) !important; transform: none !important; transition: none !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .sicon-heart { width: 16px !important; height: 16px !important; font-size: 16px !important; } /* Content */ .s-products-list-wrapper > custom-salla-product-card.product-entry .content-wrap { padding: 9px 1px 0 !important; } /* Title */ .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__title { font-size: 12px !important; line-height: 1.5 !important; transition: none !important; } /* Price */ .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper { margin-top: 3px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper span { font-size: 13.5px !important; } /* Cart */ .s-products-list-wrapper > custom-salla-product-card.product-entry .add-to-cart-conatiner { margin-top: 8px !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element { height: 37px !important; min-height: 37px !important; padding: 0 8px !important; border-radius: 10px !important; background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; font-size: 10.5px !important; box-shadow: none !important; transform: none !important; animation: none !important; transition: none !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element::before { display: none !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .sicon-shopping-bag { font-size: 12px !important; } } /* ========================================================= TOUCH — NO ANIMATIONS ========================================================= */ @media (hover:none), (pointer:coarse) { .s-products-list-wrapper > custom-salla-product-card.product-entry, .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image img, .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--wishlist, .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--wishlist .s-button-element, .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element { animation: none !important; transition: none !important; transform: none !important; } .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element::before { display: none !important; } } /* ========================================= HAYAA — UNIFY FIRST CATEGORY PAGE ========================================= */ main#main-content { width: 100% !important; } main#main-content > .container { width: 100% !important; max-width: 1400px !important; margin-inline: auto !important; padding-inline: 20px !important; } /* Main content full width */ main#main-content .main-content { width: 100% !important; max-width: 100% !important; } /* Product list wrapper */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px 18px !important; align-items: stretch !important; } /* Card */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry { width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; background: #fff !important; border: none !important; box-shadow: none !important; overflow: visible !important; } /* Image wrapper */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .product-entry__image { width: 100% !important; aspect-ratio: 3 / 4 !important; position: relative !important; overflow: hidden !important; border-radius: 16px !important; background: #f5f2ed !important; } /* Product image */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .product-entry__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .35s ease !important; } @media (hover:hover) and (pointer:fine) { main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry:hover .product-entry__image img { transform: scale(1.025) !important; } } /* Content */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .content-wrap { padding: 12px 2px 0 !important; background: transparent !important; } /* Title */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .product-entry__title { font-size: 14px !important; line-height: 1.6 !important; font-weight: 500 !important; color: #44362C !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Price */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .price-wrapper { margin-top: 5px !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .price-wrapper span { font-size: 15px !important; font-weight: 700 !important; color: #85836A !important; } /* Wishlist */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .product-entry__image .btn--wishlist { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; z-index: 20 !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .btn--wishlist .s-button-element { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,.94) !important; color: #85836A !important; border: 1px solid rgba(133,131,106,.18) !important; box-shadow: 0 4px 12px rgba(0,0,0,.05) !important; } /* Add to cart wrapper */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .add-to-cart-conatiner { padding-top: 10px !important; margin-top: auto !important; } /* Add to cart width */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .btn--add-to-cart { width: 100% !important; } /* Add to cart button */ main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element { width: 100% !important; height: 42px !important; min-height: 42px !important; border-radius: 50px !important; border: 1px solid #85836A !important; background: transparent !important; color: #44362C !important; font-size: 12px !important; font-weight: 600 !important; transition: background-color .25s ease, color .25s ease !important; } @media (hover:hover) and (pointer:fine) { main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element:hover { background: #85836A !important; color: #fff !important; } } /* ========================================= TABLET ========================================= */ @media (max-width: 1100px) { main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { main#main-content > .container { padding-inline: 12px !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 10px !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .product-entry__image { border-radius: 12px !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .product-entry__title { font-size: 12px !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .price-wrapper span { font-size: 13px !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .btn--wishlist .s-button-element { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } main#main-content .s-products-list-wrapper custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element { height: 38px !important; min-height: 38px !important; border-radius: 10px !important; background: #85836A !important; color: #fff !important; } } @media (max-width: 768px) { .main-menu, .mobile-menu, .sidebar, .menu-drawer { width: 85vw !important; max-width: 360px !important; min-width: 280px !important; right: 0 !important; left: auto !important; } } /* ========================================= HAYAA - MOBILE MENU SAFE FIX لا نكسر mm-spn ========================================= */ @media (max-width: 1023px) { /* القائمة بالكامل */ custom-main-menu .mm-spn { direction: rtl !important; text-align: right !important; } /* عناصر الموبايل */ custom-main-menu .mm-spn li.lg\:hidden { font-size: 14px !important; font-weight: 600 !important; } /* الروابط */ custom-main-menu .mm-spn li.lg\:hidden > a, custom-main-menu .mm-spn li.lg\:hidden > span { color: #44362C !important; font-size: 14px !important; line-height: 1.5 !important; text-align: right !important; } /* عناصر التصنيفات الفرعية */ custom-main-menu .mm-spn li[id="1902924380"].lg\:hidden > ul > li > a { color: #44362C !important; font-size: 13px !important; font-weight: 500 !important; text-align: right !important; opacity: 1 !important; visibility: visible !important; } /* مسافات القائمة الفرعية فقط بدون تغيير position أو left أو display */ custom-main-menu .mm-spn li[id="1902924380"].lg\:hidden > ul > li > a { padding-right: 20px !important; padding-left: 45px !important; } /* الخطوط بين العناصر */ custom-main-menu .mm-spn li::after { opacity: .12 !important; } } @media (max-width: 1023px) { nav li[id="1902924380"].lg\:hidden ul { padding-right: 136px; margin-top: 5px; } } .s-infinite-scroll-btn { width: auto !important; min-width: 120px !important; max-width: 150px !important; height: 38px !important; padding: 0 22px !important; margin: 20px auto !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #9a987e !important; color: #fff !important; border: 1px solid #9a987e !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: none !important; transition: 0.25s ease !important; } /* النص */ .s-infinite-scroll-btn .s-button-text { color: #fff !important; font-size: 12px !important; } /* Hover */ .s-infinite-scroll-btn:hover { background: #85836b !important; border-color: #85836b !important; } /* Hover Desktop */ @media (hover: hover) and (pointer: fine) { .s-infinite-scroll-btn:hover { background: #85836A !important; color: #FFFFFF !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(68, 54, 44, 0.10) !important; } } /* عند الضغط */ .s-infinite-scroll-btn:active { transform: translateY(0) !important; box-shadow: none !important; } /* Loader */ .s-infinite-scroll-btn-loader { margin-inline-start: 8px !important; } /* Mobile */ @media (max-width: 767px) { .s-infinite-scroll-wrapper { margin: 24px 0 8px !important; padding-inline: 12px !important; } .s-infinite-scroll-btn { width: 100% !important; max-width: 320px !important; min-width: 0 !important; height: 44px !important; background: #85836A !important; color: #FFFFFF !important; border-radius: 12px !important; font-size: 13px !important; } } /* ========================================================= 1. MAIN CONTAINER & GLASS CARD (أنيميشن الرفع والظلال) ========================================================= */ .s-products-slider-card .s-product-card-entry { position: relative !important; border-radius: 16px !important; overflow: hidden !important; background: transparent !important; border: none !important; box-shadow: none !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } @media (hover: hover) and (pointer: fine) { .s-products-slider-card .s-product-card-entry:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(68, 54, 44, 0.22) !important; } } /* ========================================================= 2. GLASSMORPHISM CONTENT LAYER ========================================================= */ .s-products-slider-card .s-product-card-content { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: fit-content !important; max-height: max-content !important; width: 100% !important; z-index: 20 !important; padding: 8px 12px 6px !important; /* خلفية زجاجية زيتية معتمة */ background: linear-gradient( 135deg, rgba(133, 131, 106, 0.82) 0%, rgba(133, 131, 106, 0.65) 100% ) !important; /* بلور للخلفية */ backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-top: 1px solid rgba(255, 255, 255, 0.55) !important; border-radius: 12px !important; box-shadow: 0 14px 32px rgba(68, 54, 44, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; box-sizing: border-box !important; transition: border-color 0.4s ease, background 0.4s ease !important; } @media (hover: hover) and (pointer: fine) { .s-products-slider-card .s-product-card-entry:hover .s-product-card-content { border-color: rgba(255, 255, 255, 0.45) !important; border-top-color: rgba(255, 255, 255, 0.8) !important; } } /* ========================================================= 3. PRODUCT TITLE ========================================================= */ .s-products-slider-card .s-product-card-content-title { margin: 0 0 2px 0 !important; padding: 0 !important; } .s-products-slider-card .s-product-card-content-title a { color: #FFFFFF !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================= 4. FOOTER & PRICE (دمج السعر والزر) ========================================================= */ .s-products-slider-card .s-product-card-content-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin-top: 4px !important; padding-top: 0 !important; width: 100% !important; } .s-products-slider-card .s-product-card-content-sub { margin: 0 !important; padding: 0 !important; display: inline-flex !important; background: transparent !important; border: none !important; } .s-products-slider-card .s-product-card-price { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #F7F3EC !important; font-size: 13.5px !important; font-weight: 700 !important; background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* ========================================================= 5. ADD TO CART BUTTON ========================================================= */ .s-products-slider-card .s-product-card-content-footer .s-button-element { flex: 1 !important; min-width: 0 !important; position: relative !important; overflow: hidden !important; background: rgba(247, 243, 236, .12) !important; color: #FFFFFF !important; border: 1px solid rgba(247, 243, 236, .75) !important; border-radius: 7px !important; min-height: 32px !important; height: 32px !important; padding: 0 8px !important; font-size: 11.5px !important; font-weight: 600 !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease !important; } .s-products-slider-card .s-product-card-content-footer .s-button-element::before { display: none !important; } @media (hover: hover) and (pointer: fine) { .s-products-slider-card .s-product-card-content-footer .s-button-element:hover { background: #F7F3EC !important; color: #44362C !important; border-color: #F7F3EC !important; transform: scale(1.02) !important; } } /* ========================================================= 6. IMAGE & HOVER ZOOM ========================================================= */ .s-products-slider-card .s-product-card-image { position: relative; overflow: hidden !important; border-radius: 16px !important; background: #EEE8DE !important; } .s-products-slider-card .s-product-card-image img { display: block; width: 100% !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; transform: scale(1); transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1) !important; } @media (hover: hover) and (pointer: fine) { .s-products-slider-card .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.06) !important; } } /* ========================================================= HAYAA — SALLA PRODUCT CARDS MATCH PREMIUM FEATURED CARDS ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry { position: relative !important; display: block !important; background: transparent !important; border: 0 !important; border-radius: 16px !important; box-shadow: none !important; overflow: hidden !important; min-width: 0 !important; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1) !important; } /* ========================================================= IMAGE ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image { position: relative !important; width: 100% !important; overflow: hidden !important; border-radius: 16px !important; background: #EEE8DE !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image > a { display: block !important; width: 100% !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; transform: scale(1) !important; transition: transform .6s cubic-bezier(.16,1,.3,1) !important; } /* ========================================================= GLASS CONTENT ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content { position: absolute !important; left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; height: auto !important; z-index: 20 !important; padding: 10px 12px 9px !important; background: linear-gradient( 135deg, rgba(133,131,106,.86) 0%, rgba(133,131,106,.70) 100% ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-top-color: rgba(255,255,255,.55) !important; border-radius: 13px !important; backdrop-filter: blur(12px) saturate(170%) !important; -webkit-backdrop-filter: blur(12px) saturate(170%) !important; box-shadow: 0 12px 28px rgba(68,54,44,.20), inset 0 1px 0 rgba(255,255,255,.18) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transition: border-color .35s ease, background .35s ease !important; } /* ========================================================= CONTENT MAIN ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-main { margin: 0 !important; padding: 0 !important; } /* ========================================================= TITLE ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-title { margin: 0 0 3px !important; padding: 0 !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-title a { display: block !important; color: #FFFFFF !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.45 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; } /* ========================================================= PRICE ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-sub { margin: 0 0 7px !important; padding: 0 !important; display: block !important; background: transparent !important; border: 0 !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-price { display: inline-flex !important; align-items: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.3 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-price .sicon-sar { font-size: .9em !important; } /* ========================================================= FOOTER ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer { display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer salla-add-product-button, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer salla-add-product-button > div, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer salla-button { width: 100% !important; } /* ========================================================= ADD TO CART ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element { position: relative !important; isolation: isolate !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; padding: 0 10px !important; border-radius: 8px !important; background: rgba(247,243,236,.12) !important; border: 1px solid rgba(247,243,236,.72) !important; color: #FFFFFF !important; font-size: 11.5px !important; font-weight: 600 !important; box-shadow: none !important; transform: none !important; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-text { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .sicon-shopping-bag { font-size: 13px !important; } /* ========================================================= WISHLIST ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn.s-button-wrap { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; z-index: 40 !important; width: 40px !important; height: 40px !important; margin: 0 !important; overflow: visible !important; transform: none !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.94) !important; border: 1px solid rgba(68,54,44,.08) !important; color: #44362C !important; box-shadow: 0 6px 18px rgba(68,54,44,.08) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; transform: none !important; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn .sicon-heart { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 18px !important; transform: none !important; animation: none !important; } /* active wishlist */ .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn.added .s-button-element, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn.favorited .s-button-element { background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; } /* ========================================================= DESKTOP HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(68,54,44,.18) !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.055) !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry:hover .s-product-card-content { border-color: rgba(255,255,255,.45) !important; border-top-color: rgba(255,255,255,.80) !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn:hover .s-button-element { background: #85836A !important; color: #FFFFFF !important; box-shadow: 0 8px 20px rgba(133,131,106,.22) !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element:hover { background: #F7F3EC !important; border-color: #F7F3EC !important; color: #44362C !important; transform: scale(1.02) !important; } } /* ========================================================= GRID SPACING ========================================================= */ .s-products-list-wrapper.s-products-list-vertical-cards { gap: 24px 18px !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) and (min-width: 768px) { .s-products-list-wrapper.s-products-list-vertical-cards { gap: 18px 14px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content { left: 7px !important; right: 7px !important; bottom: 7px !important; padding: 8px 10px 7px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-title a { font-size: 12.5px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .s-products-list-wrapper.s-products-list-vertical-cards { gap: 12px 10px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry { border-radius: 12px !important; transform: none !important; box-shadow: none !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image { border-radius: 12px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image img { transform: none !important; animation: none !important; transition: none !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content { left: 5px !important; right: 5px !important; bottom: 5px !important; padding: 6px 7px 6px !important; border-radius: 9px !important; backdrop-filter: blur(8px) saturate(150%) !important; -webkit-backdrop-filter: blur(8px) saturate(150%) !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-title { margin-bottom: 2px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-title a { font-size: 10.5px !important; line-height: 1.35 !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-sub { margin-bottom: 5px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-price { font-size: 11px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer .s-button-element { height: 29px !important; min-height: 29px !important; padding: 0 6px !important; border-radius: 7px !important; background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; font-size: 9.5px !important; transform: none !important; animation: none !important; transition: none !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn.s-button-wrap { top: 8px !important; left: 8px !important; width: 34px !important; height: 34px !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn .s-button-element { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; transform: none !important; animation: none !important; transition: none !important; } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-wishlist-btn .sicon-heart { width: 16px !important; height: 16px !important; font-size: 16px !important; line-height: 16px !important; } } /* ========================================================= TOUCH + REDUCED MOTION ========================================================= */ @media (hover: none), (pointer: coarse) { .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image img, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-button-element { transform: none !important; animation: none !important; transition: none !important; } } @media (prefers-reduced-motion: reduce) { .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry *, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry *::before, .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry *::after { animation: none !important; transition: none !important; } } @media (hover: hover) and (pointer: fine) { .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content { position: absolute !important; left: 0px !important; right: 0px !important; bottom: 0px !important; width: auto !important; height: auto !important; z-index: 20 !important; padding: 10px 12px 9px !important; background: linear-gradient(135deg, rgba(133, 131, 106, .86) 0%, rgba(133, 131, 106, .70) 100%) !important; border: 1px solid rgba(255, 255, 255, .30) !important; border-top-color: rgba(255, 255, 255, .55) !important; border-radius: 13px !important; backdrop-filter: blur(12px) saturate(170%) !important; -webkit-backdrop-filter: blur(12px) saturate(170%) !important; box-shadow: 0 12px 28px rgba(68, 54, 44, .20), inset 0 1px 0 rgba(255, 255, 255, .18) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transition: border-color .35s ease, background .35s ease !important; } } /* ========================================================= HAYAA — FINAL MOBILE PRODUCT CARDS FIX 2 CARDS / ROW ========================================================= */ @media (max-width: 767px) { /* GRID */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 8px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* CARD */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; background: transparent !important; border: 0 !important; border-radius: 13px !important; overflow: hidden !important; box-shadow: none !important; transform: none !important; animation: none !important; transition: none !important; } /* IMAGE WRAPPER */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image { position: relative !important; width: 100% !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; border-radius: 13px !important; background: #EEE8DE !important; } /* IMAGE LINK */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image > a { display: block !important; width: 100% !important; height: 100% !important; } /* IMAGE */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image img { display: block !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; transform: none !important; animation: none !important; transition: none !important; } /* ========================================= GLASS CONTENT ========================================= */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-content { position: absolute !important; right: 5px !important; left: 5px !important; bottom: 5px !important; top: auto !important; width: auto !important; height: auto !important; min-height: 0 !important; z-index: 20 !important; display: block !important; padding: 7px 7px 6px !important; margin: 0 !important; background: linear-gradient( 135deg, rgba(133,131,106,.88), rgba(133,131,106,.73) ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-top-color: rgba(255,255,255,.52) !important; border-radius: 9px !important; box-shadow: 0 7px 18px rgba(68,54,44,.18) !important; backdrop-filter: blur(8px) saturate(150%) !important; -webkit-backdrop-filter: blur(8px) saturate(150%) !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; transition: none !important; } /* TITLE */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-title { margin: 0 0 2px !important; padding: 0 !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-title a { display: block !important; color: #FFFFFF !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; } /* PRICE WRAPPER */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-sub { display: block !important; margin: 0 0 5px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* PRICE */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-price { display: flex !important; align-items: center !important; gap: 2px !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* FOOTER */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer salla-add-product-button, main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer salla-add-product-button > div, main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer salla-button { display: block !important; width: 100% !important; } /* ADD TO CART */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 29px !important; min-height: 29px !important; padding: 0 5px !important; border-radius: 7px !important; background: #85836A !important; border: 1px solid rgba(247,243,236,.48) !important; color: #FFFFFF !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; transform: none !important; animation: none !important; transition: none !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer .s-button-text { display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; overflow: hidden !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-content-footer .sicon-shopping-bag { font-size: 11px !important; flex-shrink: 0 !important; } /* ========================================= WISHLIST ========================================= */ main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-image > salla-button.s-product-card-wishlist-btn { position: absolute !important; top: 7px !important; left: 7px !important; right: auto !important; width: 32px !important; height: 32px !important; z-index: 40 !important; margin: 0 !important; transform: none !important; animation: none !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-wishlist-btn .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(247,243,236,.94) !important; border: 1px solid rgba(68,54,44,.07) !important; color: #44362C !important; box-shadow: 0 4px 12px rgba(68,54,44,.07) !important; transform: none !important; animation: none !important; transition: none !important; } main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-wishlist-btn .sicon-heart { display: flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; font-size: 15px !important; line-height: 15px !important; margin: 0 !important; padding: 0 !important; } } /* ========================================================= HAYAA — FINAL S-PRODUCT-CARD OVERRIDE SAME DESIGN ACROSS CATEGORY CARDS ========================================================= */ /* ========================= CARD ========================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; background: transparent !important; border: 0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: none !important; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1) !important; } /* ========================= IMAGE ========================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image { position: relative !important; width: 100% !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; border-radius: 16px !important; background: #EEE8DE !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image > a { display: block !important; width: 100% !important; height: 100% !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1) !important; transition: transform .6s cubic-bezier(.16,1,.3,1) !important; } /* ========================================================= GLASS CONTENT ========================================================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-content { position: absolute !important; top: auto !important; right: 8px !important; left: 8px !important; bottom: 8px !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 9px 11px 8px !important; z-index: 25 !important; background: linear-gradient( 135deg, rgba(133,131,106,.86) 0%, rgba(133,131,106,.70) 100% ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-top-color: rgba(255,255,255,.58) !important; border-radius: 12px !important; backdrop-filter: blur(12px) saturate(170%) !important; -webkit-backdrop-filter: blur(12px) saturate(170%) !important; box-shadow: 0 12px 28px rgba(68,54,44,.20), inset 0 1px 0 rgba(255,255,255,.18) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-sizing: border-box !important; } /* امسح أي Background أبيض داخلي */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-content-main, body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-content-sub, body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-content-footer { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================= TITLE ========================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-title { margin: 0 0 2px !important; padding: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-title a { display: block !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; } /* ========================= PRICE ========================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-sub { display: block !important; margin: 0 0 6px !important; padding: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-price { display: inline-flex !important; align-items: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; background: transparent !important; border: 0 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* ========================================================= ADD TO CART ========================================================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-footer { display: flex !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-add-product-button, body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-add-product-button > div, body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-button { width: 100% !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 33px !important; min-height: 33px !important; padding: 0 9px !important; background: rgba(247,243,236,.12) !important; color: #FFFFFF !important; border: 1px solid rgba(247,243,236,.70) !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 600 !important; box-shadow: none !important; white-space: nowrap !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-text { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; } /* ========================================================= WISHLIST ========================================================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image > salla-button.s-product-card-wishlist-btn { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; z-index: 50 !important; width: 40px !important; height: 40px !important; margin: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; background: rgba(247,243,236,.94) !important; color: #44362C !important; border: 1px solid rgba(68,54,44,.08) !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(68,54,44,.08) !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn .sicon-heart { display: flex !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; font-size: 18px !important; margin: 0 !important; padding: 0 !important; } /* ========================= DESKTOP HOVER ========================= */ @media (hover:hover) and (pointer:fine) { body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(68,54,44,.18) !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.055) !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element:hover { background: #F7F3EC !important; border-color: #F7F3EC !important; color: #44362C !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn:hover .s-button-element { background: #85836A !important; color: #FFFFFF !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width:767px) { body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px 8px !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry { border-radius: 12px !important; transform: none !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image { border-radius: 12px !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-content { right: 5px !important; left: 5px !important; bottom: 5px !important; padding: 6px 7px 6px !important; border-radius: 9px !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-title a { font-size: 10px !important; } body main#main-content .s-products-list-wrapper .s-product-card-price { font-size: 10.5px !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element { height: 28px !important; min-height: 28px !important; padding: 0 5px !important; font-size: 9px !important; background: #85836A !important; color: #FFFFFF !important; border-color: #85836A !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image > salla-button.s-product-card-wishlist-btn { top: 7px !important; left: 7px !important; width: 32px !important; height: 32px !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn .s-button-element { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn .sicon-heart { width: 15px !important; height: 15px !important; font-size: 15px !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry, body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry * { animation: none !important; } } @media (hover: hover) and (pointer: fine) { body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-content { position: absolute !important; top: auto !important; right: 0px !important; left: 0px !important; bottom: 0px !important; width: auto !important; left: 0px !important; bottom: 0px !important; max-height: none !important; margin: 0 !important; padding: 9px 11px 8px !important; z-index: 25 !important; background: linear-gradient(135deg, rgba(133, 131, 106, .86) 0%, rgba(133, 131, 106, .70) 100%) !important; border: 1px solid rgba(255, 255, 255, .30) !important; border-top-color: rgba(255, 255, 255, .58) !important; border-radius: 12px !important; backdrop-filter: blur(12px) saturate(170%) !important; -webkit-backdrop-filter: blur(12px) saturate(170%) !important; box-shadow: 0 12px 28px rgba(68, 54, 44, .20), inset 0 1px 0 rgba(255, 255, 255, .18) !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-sizing: border-box !important; } } @media (hover: hover) and (pointer: fine) { body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: initial !important; transform: scale(1.1) !important; transition: transform .6s cubic-bezier(.16, 1, .3, 1) !important; } } [id^="product-"] .details-slider img { width: 100% !important; scale: 1.1 !important; object-fit: cover !important; transition: transform .65s cubic-bezier(.22, .61, .36, 1) !important; } /* ========================================================= HAYAA — PRODUCT CARD BASE ALWAYS ACTIVE ========================================================= */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px 18px !important; width: 100% !important; align-items: stretch !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: none !important; } /* IMAGE */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-image { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; border-radius: 16px !important; background: #EEE8DE !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-image > a { display: block !important; width: 100% !important; height: 100% !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry .s-product-card-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= GLASS CONTENT ALWAYS ACTIVE ========================================================= */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-content { position: absolute !important; left: 6px !important; right: 6px !important; bottom: 6px !important; top: auto !important; z-index: 30 !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 9px 10px 8px !important; margin: 0 !important; background: linear-gradient( 135deg, rgba(133,131,106,.88), rgba(133,131,106,.72) ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-top-color: rgba(255,255,255,.55) !important; border-radius: 12px !important; backdrop-filter: blur(10px) saturate(160%) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; box-shadow: 0 8px 22px rgba(68,54,44,.17), inset 0 1px 0 rgba(255,255,255,.16) !important; opacity: 1 !important; visibility: visible !important; box-sizing: border-box !important; } /* TITLE */ body main#main-content .s-products-list-wrapper .s-product-card-content-title { margin: 0 0 3px !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-title a { display: block !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; } /* PRICE */ body main#main-content .s-products-list-wrapper .s-product-card-content-sub { display: block !important; margin: 0 0 6px !important; padding: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-price { display: inline-flex !important; align-items: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; font-size: 13px !important; font-weight: 700 !important; } /* CART */ body main#main-content .s-products-list-wrapper .s-product-card-content-footer { display: flex !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-add-product-button, body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-add-product-button > div, body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-button { width: 100% !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 33px !important; min-height: 33px !important; padding: 0 9px !important; background: rgba(247,243,236,.12) !important; color: #FFFFFF !important; border: 1px solid rgba(247,243,236,.70) !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 600 !important; box-shadow: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px 10px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px 8px !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry { border-radius: 13px !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-image { border-radius: 13px !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-content { left: 5px !important; right: 5px !important; bottom: 5px !important; padding: 7px !important; border-radius: 10px !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-title a { font-size: 10.5px !important; } body main#main-content .s-products-list-wrapper .s-product-card-price { font-size: 11px !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element { height: 28px !important; min-height: 28px !important; padding: 0 5px !important; font-size: 9.5px !important; } } /* ========================================================= HAYAA STORE — FINAL DELIVERY STABILIZATION LAYER One authoritative responsive layer for product cards. Reference behavior: Featured Products / "مختارات هياء". ========================================================= */ /* ---------- Global responsive safety ---------- */ html, body { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } body *, body *::before, body *::after { box-sizing: border-box; } img, svg, video, canvas, iframe { max-width: 100%; } main#main-content, main#main-content > .container, main#main-content .main-content, .s-products-list-wrapper, .s-slider-block, .s-slider-block__title, .s-slider-block__title-left { min-width: 0 !important; max-width: 100% !important; } main#main-content > .container { width: min(100%, 1400px) !important; margin-inline: auto !important; padding-inline: clamp(12px, 2.5vw, 20px) !important; } /* ---------- Category/product grids ---------- */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { display: grid !important; width: 100% !important; min-width: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px 18px !important; align-items: stretch !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } @media (max-width: 1199px) { body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px 14px !important; } } @media (max-width: 767px) { main#main-content > .container { padding-inline: 10px !important; } body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 8px !important; padding: 0 !important; margin: 0 !important; } } /* ========================================================= PRODUCT CARD FAMILY A — GLASS OVER IMAGE Featured + top product sliders ========================================================= */ #featured-products-style2-2 .s-product-card-entry, .s-products-slider-card .s-product-card-entry { min-width: 0 !important; overflow: hidden !important; } #featured-products-style2-2 .s-product-card-content, .s-products-slider-card .s-product-card-content { box-sizing: border-box !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 8px 10px 7px !important; border-radius: 0 0 13px 13px !important; } #featured-products-style2-2 .s-product-card-content-title, .s-products-slider-card .s-product-card-content-title { margin: 0 0 2px !important; padding: 0 !important; min-width: 0 !important; } #featured-products-style2-2 .s-product-card-content-title a, .s-products-slider-card .s-product-card-content-title a { display: block !important; min-width: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #featured-products-style2-2 .s-product-card-content-sub, .s-products-slider-card .s-product-card-content-sub { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; } #featured-products-style2-2 .s-product-card-price, .s-products-slider-card .s-product-card-price { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } #featured-products-style2-2 .s-product-card-content-footer, .s-products-slider-card .s-product-card-content-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 5px !important; width: 100% !important; min-width: 0 !important; margin: 4px 0 0 !important; padding: 0 !important; } /* Salla wrappers must be allowed to shrink. */ #featured-products-style2-2 .s-product-card-content-footer salla-add-product-button, #featured-products-style2-2 .s-product-card-content-footer salla-add-product-button > div, #featured-products-style2-2 .s-product-card-content-footer salla-add-product-button salla-button, .s-products-slider-card .s-product-card-content-footer salla-add-product-button, .s-products-slider-card .s-product-card-content-footer salla-add-product-button > div, .s-products-slider-card .s-product-card-content-footer salla-add-product-button salla-button { flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-element, .s-products-slider-card .s-product-card-content-footer .s-button-element, #featured-products-style2-2 .s-product-card-content-footer .s-button-wide, .s-products-slider-card .s-product-card-content-footer .s-button-wide { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 1 1 0 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 31px !important; min-height: 31px !important; margin: 0 !important; padding: 0 8px !important; border-radius: 7px !important; background: rgba(247, 243, 236, .12) !important; color: #FFFFFF !important; border: 1px solid rgba(247, 243, 236, .72) !important; box-shadow: none !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-text, .s-products-slider-card .s-product-card-content-footer .s-button-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; min-width: 0 !important; font-size: inherit !important; line-height: 1 !important; white-space: nowrap !important; } #featured-products-style2-2 .s-product-card-content-footer .sicon-shopping-bag, .s-products-slider-card .s-product-card-content-footer .sicon-shopping-bag { flex: 0 0 auto !important; margin: 0 !important; font-size: 10.5px !important; line-height: 1 !important; } @media (hover: hover) and (pointer: fine) { #featured-products-style2-2 .s-product-card-content-footer .s-button-element:hover, .s-products-slider-card .s-product-card-content-footer .s-button-element:hover { background: #F7F3EC !important; color: #44362C !important; border-color: #F7F3EC !important; } } /* ---------- Tablet ---------- */ @media (min-width: 768px) and (max-width: 1024px) { #featured-products-style2-2 .s-product-card-content, .s-products-slider-card .s-product-card-content { padding: 7px 9px 7px !important; } #featured-products-style2-2 .s-product-card-content-title a, .s-products-slider-card .s-product-card-content-title a { font-size: 11.5px !important; } #featured-products-style2-2 .s-product-card-price, .s-products-slider-card .s-product-card-price { font-size: 11px !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-element, .s-products-slider-card .s-product-card-content-footer .s-button-element { height: 30px !important; min-height: 30px !important; padding-inline: 7px !important; font-size: 9.5px !important; } } /* ---------- Mobile ---------- */ @media (max-width: 767px) { #featured-products-style2-2 .s-product-card-content, .s-products-slider-card .s-product-card-content { padding: 7px 8px 7px !important; } #featured-products-style2-2 .s-product-card-content-title a, .s-products-slider-card .s-product-card-content-title a { font-size: 10px !important; } #featured-products-style2-2 .s-product-card-price, .s-products-slider-card .s-product-card-price { font-size: 10px !important; } #featured-products-style2-2 .s-product-card-content-footer, .s-products-slider-card .s-product-card-content-footer { gap: 4px !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-element, .s-products-slider-card .s-product-card-content-footer .s-button-element, #featured-products-style2-2 .s-product-card-content-footer .s-button-wide, .s-products-slider-card .s-product-card-content-footer .s-button-wide { height: 30px !important; min-height: 30px !important; padding: 0 7px !important; border-radius: 7px !important; font-size: 9.5px !important; } #featured-products-style2-2 .s-product-card-content-footer .sicon-shopping-bag, .s-products-slider-card .s-product-card-content-footer .sicon-shopping-bag { font-size: 10px !important; } } /* Extra-narrow phones: preserve button readability instead of shrinking it. */ @media (max-width: 359px) { #featured-products-style2-2 .s-product-card-content, .s-products-slider-card .s-product-card-content { padding-inline: 6px !important; } #featured-products-style2-2 .s-product-card-content-footer .s-button-element, .s-products-slider-card .s-product-card-content-footer .s-button-element { height: 30px !important; min-height: 30px !important; padding-inline: 5px !important; font-size: 9px !important; } } /* ========================================================= PRODUCT CARD FAMILY B — PRODUCT ENTRY / CATEGORY CARDS ========================================================= */ body main#main-content .s-products-list-wrapper .product-entry__content, body main#main-content .s-products-list-wrapper .content-wrap, body main#main-content .s-products-list-wrapper .add-to-cart-conatiner, body main#main-content .s-products-list-wrapper .btn--add-to-cart, body main#main-content .s-products-list-wrapper .btn--add-to-cart > div, body main#main-content .s-products-list-wrapper .btn--add-to-cart salla-button { min-width: 0 !important; max-width: 100% !important; } body main#main-content .s-products-list-wrapper .btn--add-to-cart, body main#main-content .s-products-list-wrapper .btn--add-to-cart > div, body main#main-content .s-products-list-wrapper .btn--add-to-cart salla-button { width: 100% !important; } body main#main-content .s-products-list-wrapper .btn--add-to-cart .s-button-element { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 38px !important; min-height: 38px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; } @media (max-width: 767px) { body main#main-content .s-products-list-wrapper .btn--add-to-cart .s-button-element { height: 34px !important; min-height: 34px !important; padding-inline: 8px !important; font-size: 10px !important; } } /* ========================================================= PRODUCT DETAILS PAGE ========================================================= */ [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; padding: 0 16px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; } @media (max-width: 767px) { [id^="product-"] [data-testid="store-product-add-to-cart"] .s-button-element { height: 40px !important; min-height: 40px !important; padding-inline: 12px !important; border-radius: 10px !important; font-size: 11px !important; } } /* ========================================================= FINAL MOBILE SAFETY ========================================================= */ @media (max-width: 767px) { #featured-products-style2-2 .container::before { font-size: clamp(22px, 7vw, 27px) !important; line-height: 1.35 !important; } #featured-products-style2-2 .container::after { padding-inline: 12px !important; margin-bottom: 24px !important; } #featured-products-style2-2 .tabs { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overscroll-behavior-inline: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #featured-products-style2-2 .tabs::-webkit-scrollbar { display: none; } .s-slider-block__title, .s-slider-block__title-left { min-width: 0 !important; } .s-slider-block__title-left { flex-wrap: wrap !important; row-gap: 7px !important; } .s-slider-block__display-all { max-width: 100% !important; white-space: nowrap !important; } [id^="product-"] .sidebar, [id^="product-"] .main-content, [id^="product-"] .details-slider, [id^="product-"] .product-form { min-width: 0 !important; max-width: 100% !important; } .product__description, .product__description p, .product__description li, .product__description a, .copyright-text, footer a { overflow-wrap: anywhere; word-break: break-word; } } .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-content { left: 0px !important; right: : 0px !important; } /* ========================================================= HAYAA — ONE PRODUCT CARD DESIGN MASTER: "مختارات هياء" Put this at the VERY END of CSS ========================================================= */ /* ========================================================= 1. BOTH CARD TYPES ========================================================= */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry, body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.product-entry { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: none !important; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1) !important; } /* ========================================================= 2. IMAGE WRAPPERS ========================================================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry > .s-product-card-image, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image { position: relative !important; display: block !important; width: 100% !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; border-radius: 16px !important; background: #EEE8DE !important; box-shadow: none !important; } /* ========================================================= 3. IMAGES ========================================================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image img, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image img { display: block !important; width: 100% !important; height: 100% !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; transform: scale(1) !important; transition: transform .6s cubic-bezier(.16,1,.3,1) !important; } /* ========================================================= 4. NORMAL SALLA CARD — GLASS CONTENT ========================================================= */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.s-product-card-entry > .s-product-card-content { position: absolute !important; left: 6px !important; right: 6px !important; bottom: 6px !important; top: auto !important; z-index: 30 !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 9px 10px 8px !important; margin: 0 !important; background: linear-gradient( 135deg, rgba(133,131,106,.88), rgba(133,131,106,.72) ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-top-color: rgba(255,255,255,.55) !important; border-radius: 12px !important; backdrop-filter: blur(10px) saturate(160%) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; box-shadow: 0 8px 22px rgba(68,54,44,.17), inset 0 1px 0 rgba(255,255,255,.16) !important; box-sizing: border-box !important; } /* ========================================================= 5. PRODUCT-ENTRY CARD — TURN CONTENT INTO SAME GLASS BOX ========================================================= */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.product-entry { position: relative !important; } /* نخلي content-wrap هو الـGlass Box بدل الشكل الأبيض الموجود حاليًا */ body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card.product-entry .content-wrap { position: absolute !important; left: 6px !important; right: 6px !important; bottom: 6px !important; top: auto !important; z-index: 30 !important; width: auto !important; padding: 9px 10px 8px !important; margin: 0 !important; background: linear-gradient( 135deg, rgba(133,131,106,.88), rgba(133,131,106,.72) ) !important; border: 1px solid rgba(255,255,255,.30) !important; border-top-color: rgba(255,255,255,.55) !important; border-radius: 12px !important; backdrop-filter: blur(10px) saturate(160%) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; box-shadow: 0 8px 22px rgba(68,54,44,.17), inset 0 1px 0 rgba(255,255,255,.16) !important; box-sizing: border-box !important; } /* ========================================================= 6. TITLE — BOTH TYPES ========================================================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-title { margin: 0 0 3px !important; padding: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-title a, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__title { display: block !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; -webkit-line-clamp: unset !important; } /* ========================================================= 7. PRICE — NORMAL CARD ========================================================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-sub { display: block !important; margin: 0 0 6px !important; padding: 0 !important; background: transparent !important; } body main#main-content .s-products-list-wrapper .s-product-card-price { display: inline-flex !important; align-items: center !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; font-size: 13px !important; font-weight: 700 !important; background: transparent !important; border: 0 !important; } /* ========================================================= 8. PRICE — PRODUCT ENTRY ========================================================= */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper { margin: 0 0 6px !important; padding: 0 !important; min-height: 0 !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .price-wrapper span { color: #F7F3EC !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* ========================================================= 9. CART WRAPPERS ========================================================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-footer, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .add-to-cart-conatiner { display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* Salla internals */ body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-add-product-button, body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-add-product-button > div, body main#main-content .s-products-list-wrapper .s-product-card-content-footer salla-button, body main#main-content .s-products-list-wrapper .product-entry .add-to-cart-conatiner salla-add-product-button, body main#main-content .s-products-list-wrapper .product-entry .add-to-cart-conatiner salla-add-product-button > div, body main#main-content .s-products-list-wrapper .product-entry .add-to-cart-conatiner salla-button { width: 100% !important; } /* ========================================================= 10. ADD TO CART — BOTH TYPES ========================================================= */ body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; background: rgba(247,243,236,.12) !important; color: #FFFFFF !important; border: 1px solid rgba(247,243,236,.75) !important; border-radius: 7px !important; font-size: 11.5px !important; font-weight: 600 !important; box-shadow: none !important; overflow: hidden !important; transform: none !important; } /* إزالة الـFill القديم من النوع التاني */ body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .btn--add-to-cart .s-button-element::before { display: none !important; content: none !important; } /* ========================================================= 11. WISHLIST — SAME LOOK ========================================================= */ body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn, body main#main-content .s-products-list-wrapper .product-entry__image .btn--wishlist { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; z-index: 40 !important; margin: 0 !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn .s-button-element, body main#main-content .s-products-list-wrapper .product-entry__image .btn--wishlist .s-button-element { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; background: rgba(247,243,236,.94) !important; color: #44362C !important; border: 1px solid rgba(68,54,44,.08) !important; border-radius: 50% !important; box-shadow: 0 6px 18px rgba(68,54,44,.08) !important; } /* ========================================================= 12. DESKTOP HOVER ========================================================= */ @media (hover:hover) and (pointer:fine) { body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry:hover, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry:hover { transform: translateY(-6px) !important; box-shadow: 0 20px 40px rgba(68,54,44,.18) !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card:hover img { transform: scale(1.055) !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element:hover, body main#main-content .s-products-list-wrapper .product-entry .btn--add-to-cart .s-button-element:hover { background: #F7F3EC !important; border-color: #F7F3EC !important; color: #44362C !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn:hover .s-button-element, body main#main-content .s-products-list-wrapper .product-entry__image .btn--wishlist:hover .s-button-element { background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width:767px) { body main#main-content .s-products-list-wrapper.s-products-list-vertical-cards { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px 8px !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry { border-radius: 12px !important; transform: none !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry .s-product-card-image, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .product-entry__image { border-radius: 12px !important; } body main#main-content .s-products-list-wrapper > custom-salla-product-card.s-product-card-entry > .s-product-card-content, body main#main-content .s-products-list-wrapper > custom-salla-product-card.product-entry .content-wrap { left: 5px !important; right: 5px !important; bottom: 5px !important; padding: 6px 7px !important; border-radius: 9px !important; backdrop-filter: blur(8px) saturate(150%) !important; -webkit-backdrop-filter: blur(8px) saturate(150%) !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-title a, body main#main-content .s-products-list-wrapper .product-entry__title { font-size: 10.5px !important; line-height: 1.35 !important; } body main#main-content .s-products-list-wrapper .s-product-card-price, body main#main-content .s-products-list-wrapper .product-entry .price-wrapper span { font-size: 11px !important; } body main#main-content .s-products-list-wrapper .s-product-card-content-footer .s-button-element, body main#main-content .s-products-list-wrapper .product-entry .btn--add-to-cart .s-button-element { height: 29px !important; min-height: 29px !important; padding: 0 6px !important; border-radius: 7px !important; background: #85836A !important; border-color: #85836A !important; color: #FFFFFF !important; font-size: 9.5px !important; transition: none !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn, body main#main-content .s-products-list-wrapper .product-entry__image .btn--wishlist { top: 8px !important; left: 8px !important; } body main#main-content .s-products-list-wrapper .s-product-card-wishlist-btn .s-button-element, body main#main-content .s-products-list-wrapper .product-entry__image .btn--wishlist .s-button-element { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } } #featured-products-style2-2 .s-product-card-content, .s-products-slider-card .s-product-card-content { box-sizing: border-box !important; right: 6px !important; bottom: 6px !important; left: 6px !important ; top: auto !important; border-radius: 10px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 11px 12px 9px 10px !important; border-radius: 12 12 13px 13px !important; } #featured-products-style2-2 .s-product-card-price, .s-products-slider-card .s-product-card-price { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 !important; padding-top: 9px !important; padding-bottom: 7px !important; color: #F7F3EC !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 11.5px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } @media (max-width: 767px) { main#main-content .s-products-list-wrapper.s-products-list-vertical-cards .s-product-card-price { align-items: start !important; gap: 2px !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #F7F3EC !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.2 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } } .s-infinite-scroll-last { margin-bottom: 36em !important; text-align: center; } [id^="product-"] .product__description p, [id^="product-"] .product__description li { color: #66584C !important; font-size: 12px !important; line-height: 1.9 !important; } h2, h3 { font-size: 1rem; line-height: 1.75rem; }