/* Add custom CSS styles below */ /* ========================================== ENGLISH ZONE | PREMIUM DARK DESIGN SALLA RAED THEME - VERSION 3 ========================================== */ /* ========================= 01 - COLOR SYSTEM ========================= */ body.theme-raed { --color-primary: #E63946; --color-primary-dark: #B91F2C; --color-primary-light: #FF6673; --color-primary-reverse: #FFFFFF; --ez-bg: #101416; --ez-surface: #1B2025; --ez-surface-light: #242A30; --ez-red: #E63946; --ez-white: #F8F9FA; --ez-muted: #AEB7C0; } /* ========================= 02 - MAIN BACKGROUND ========================= */ body.theme-raed #main-content { background: #101416 !important; min-height: 100vh; } /* ========================= 03 - PREMIUM DARK HEADER ========================= */ body.theme-raed .store-header { background: #101416 !important; } body.theme-raed .store-header .top-navbar { background: #15191D !important; color: #FFFFFF !important; border-bottom: 1px solid rgba(230, 57, 70, 0.25); } body.theme-raed .store-header #mainnav, body.theme-raed .store-header #mainnav .inner { background: #101416 !important; color: #FFFFFF !important; } body.theme-raed .store-header #mainnav { border-bottom: 2px solid rgba(230, 57, 70, 0.75) !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 4px 18px rgba(230, 57, 70, 0.08) !important; } /* ========================= 04 - STORE LOGO ========================= */ body.theme-raed #mainnav .navbar-brand { background: #FFFFFF !important; border-radius: 12px !important; padding: 5px 8px !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; } body.theme-raed #mainnav .navbar-brand:hover { transform: scale(1.04); } body.theme-raed #mainnav .navbar-brand img { object-fit: contain; } /* ========================= 05 - HEADER ICONS ========================= */ body.theme-raed #mainnav .sicon-menu { color: #E63946 !important; font-size: 25px !important; } body.theme-raed #mainnav .header-btn__icon { background: #20262B !important; color: #FFFFFF !important; border: 1.5px solid rgba(230, 57, 70, 0.65) !important; border-radius: 50% !important; transition: all 0.3s ease; } body.theme-raed #mainnav .header-btn__icon:hover { background: #E63946 !important; border-color: #E63946 !important; } body.theme-raed #mainnav .s-cart-summary-total { color: #FFFFFF !important; } body.theme-raed #mainnav .s-cart-summary-count { background: #E63946 !important; color: #FFFFFF !important; } body.theme-raed #mainnav .dropdown-toggler { color: #FFFFFF !important; } body.theme-raed #mainnav .dropdown__trigger { color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.25); } body.theme-raed #mainnav .dropdown__trigger i { color: #FFFFFF !important; } /* ========================= 06 - HEADER SEARCH ========================= */ body.theme-raed .top-navbar .s-search-input { background: #252B31 !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 30px !important; } body.theme-raed .top-navbar .s-search-input::placeholder { color: #BFC6CC !important; } body.theme-raed .top-navbar .s-search-input:focus { border-color: #E63946 !important; } body.theme-raed .top-navbar .sicon-sar { color: #FFFFFF !important; } /* ========================= 07 - NAVIGATION LINKS ========================= */ body.theme-raed #mainnav .main-menu > li.root-level > a { color: #FFFFFF !important; font-weight: 700 !important; } body.theme-raed #mainnav .main-menu > li.root-level > a:hover { color: #FF6673 !important; } /* ========================= 08 - SECTION HEADINGS ========================= */ body.theme-raed #main-content .s-block__title h2, body.theme-raed #main-content .s-slider-block__title h2, body.theme-raed #main-content .s-block--categories__title, body.theme-raed #main-content .s-reviews-header { color: #FFFFFF !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.5 !important; } body.theme-raed #main-content .s-block__title h2, body.theme-raed #main-content .s-slider-block__title h2, body.theme-raed #main-content .s-block--categories__title { border-inline-start: 4px solid #E63946 !important; padding-inline-start: 12px !important; } body.theme-raed #main-content .s-slider-block__title { color: #FFFFFF !important; } body.theme-raed #main-content .s-block__title p { color: #BFC6CC !important; } body.theme-raed #main-content .s-block__display-all, body.theme-raed #main-content .s-slider-block__display-all { color: #FF6673 !important; } /* ========================= 09 - CATEGORY CARDS ========================= */ body.theme-raed #main-content .slide--cat-entry { background: linear-gradient( 145deg, #252B31 0%, #171B20 100% ) !important; border: 2px solid rgba(230, 57, 70, 0.65) !important; border-radius: 16px !important; color: #FFFFFF !important; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3), 0 0 14px rgba(230, 57, 70, 0.08); transition: all 0.3s ease; } body.theme-raed #main-content .slide--cat-entry h2 { color: #FFFFFF !important; font-weight: 800 !important; } body.theme-raed #main-content .slide--cat-entry i { color: #E63946 !important; } @media (hover: hover) { body.theme-raed #main-content .slide--cat-entry:hover { border-color: #FF6673 !important; box-shadow: 0 0 25px rgba(230, 57, 70, 0.25); transform: translateY(-5px); } } /* ========================= 10 - PREMIUM PRODUCT CARDS ========================= */ body.theme-raed #main-content .s-product-card-entry { background: #1B2025 !important; border: 2.5px solid #D93B49 !important; border-radius: 18px !important; overflow: hidden !important; box-shadow: 0 0 0 1px rgba(230, 57, 70, 0.15), 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 22px rgba(230, 57, 70, 0.12) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* ========================= 11 - PRODUCT CARD CONTENT ========================= */ body.theme-raed #main-content .s-product-card-content { background: #1B2025 !important; color: #FFFFFF !important; } body.theme-raed #main-content .s-product-card-content-title, body.theme-raed #main-content .s-product-card-content-title a { color: #FFFFFF !important; font-weight: 800 !important; line-height: 1.7 !important; } body.theme-raed #main-content .s-product-card-content-subtitle { color: #AEB7C0 !important; } body.theme-raed #main-content .s-product-card-price { color: #FFFFFF !important; font-weight: 800 !important; } body.theme-raed #main-content .s-product-card-sale-price h4, body.theme-raed #main-content .s-product-card-starting-price h4 { color: #FF6673 !important; font-weight: 800 !important; } body.theme-raed #main-content .s-product-card-sale-price span { color: #B0B8C0 !important; } /* ========================= 12 - ADD TO CART BUTTON ========================= */ body.theme-raed #main-content .s-product-card-entry salla-add-product-button .s-button-element { background: #E63946 !important; color: #FFFFFF !important; border: 1.5px solid #FF6673 !important; border-radius: 12px !important; font-weight: 800 !important; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.2) !important; transition: all 0.3s ease; } body.theme-raed #main-content .s-product-card-entry salla-add-product-button .s-button-text, body.theme-raed #main-content .s-product-card-entry salla-add-product-button .s-button-text i { color: #FFFFFF !important; } body.theme-raed #main-content .s-product-card-entry salla-add-product-button .s-button-element:hover { background: #C72B39 !important; border-color: #FF6673 !important; box-shadow: 0 5px 22px rgba(230, 57, 70, 0.4) !important; } /* ========================= 13 - CARD GLOW EFFECT ========================= */ @media (hover: hover) { body.theme-raed #main-content .s-product-card-entry:hover { transform: translateY(-6px); border-color: #FF6673 !important; box-shadow: 0 0 0 1px rgba(255, 102, 115, 0.4), 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 30px rgba(230, 57, 70, 0.3) !important; } } /* ========================= 14 - CUSTOMER REVIEWS ========================= */ body.theme-raed #main-content .s-reviews-testimonial { background: #1B2025 !important; color: #FFFFFF !important; border: 2px solid rgba(230, 57, 70, 0.65) !important; border-radius: 16px !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3), 0 0 15px rgba(230, 57, 70, 0.1); } body.theme-raed #main-content .s-reviews-testimonial__info h2, body.theme-raed #main-content .s-reviews-testimonial__text p { color: #FFFFFF !important; } body.theme-raed #main-content .s-reviews-testimonial__icon svg { fill: #E63946 !important; } body.theme-raed #main-content .s-reviews-container .swiper-slide:not(.swiper-slide-active) .s-reviews-testimonial { opacity: 0.85; } /* ========================= 15 - MOBILE OPTIMIZATION ========================= */ @media (max-width: 767px) { body.theme-raed #main-content .s-block__title h2, body.theme-raed #main-content .s-slider-block__title h2, body.theme-raed #main-content .s-block--categories__title, body.theme-raed #main-content .s-reviews-header { font-size: 21px !important; } body.theme-raed #main-content .s-product-card-entry { border-radius: 15px !important; } body.theme-raed #main-content .s-product-card-content-title a { font-size: 15px !important; } body.theme-raed #main-content .slide--cat-entry { border-radius: 14px !important; } body.theme-raed #mainnav .navbar-brand { padding: 4px 6px !important; } } /* ========================= 16 - ACCESSIBILITY ========================= */ @media (prefers-reduced-motion: reduce) { body.theme-raed #main-content .s-product-card-entry, body.theme-raed #main-content .slide--cat-entry { transition: none !important; transform: none !important; } } /* ========================================== ENGLISH ZONE | PREMIUM FOOTER ADD-ON VERSION 4 ========================================== */ /* ============================== 01 - MAIN FOOTER BACKGROUND ============================== */ body.theme-raed .store-footer { background: #0B0E11 !important; color: #FFFFFF !important; margin-top: 0 !important; border-top: 3px solid #E63946 !important; } /* ============================== 02 - FOOTER INNER BACKGROUND ============================== */ body.theme-raed .store-footer__inner { background: linear-gradient( 145deg, #171C21 0%, #101416 55%, #0B0E11 100% ) !important; padding-top: 45px !important; padding-bottom: 45px !important; border-bottom: 1px solid rgba(230, 57, 70, 0.25) !important; } /* ============================== 03 - FOOTER CONTENT CARDS ============================== */ body.theme-raed .store-footer__inner > .container.grid > div { background: #1B2025 !important; border: 1.5px solid rgba(230, 57, 70, 0.65) !important; border-radius: 18px !important; padding: 24px 20px !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(230, 57, 70, 0.08); transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* ============================== 04 - STORE NAME ============================== */ body.theme-raed .store-footer__inner h3 { color: #FFFFFF !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.6 !important; } /* ============================== 05 - FOOTER HEADINGS ============================== */ body.theme-raed .store-footer__inner h3 { border-inline-start: 4px solid #E63946 !important; padding-inline-start: 12px !important; margin-bottom: 18px !important; } /* ============================== 06 - STORE DESCRIPTION ============================== */ body.theme-raed .store-footer__inner p { color: #BFC6CC !important; font-size: 14px !important; line-height: 1.9 !important; } /* ============================== 07 - FOOTER LINKS ============================== */ body.theme-raed .store-footer__inner a { color: #E9EDF0 !important; text-decoration: none !important; transition: color 0.3s ease, opacity 0.3s ease; } body.theme-raed .store-footer__inner a:hover { color: #FF6673 !important; } /* ============================== 08 - CONTACT INFORMATION ============================== */ body.theme-raed .store-footer salla-contacts { display: block; color: #FFFFFF !important; } /* CONTACT TITLES */ body.theme-raed .store-footer salla-contacts h3 { color: #FFFFFF !important; font-weight: 800 !important; } /* CONTACT LINKS */ body.theme-raed .store-footer salla-contacts a { color: #E9EDF0 !important; font-weight: 600 !important; overflow-wrap: anywhere; } /* CONTACT ICONS */ body.theme-raed .store-footer salla-contacts i, body.theme-raed .store-footer salla-contacts svg { color: #FF6673 !important; } /* ============================== 09 - SOCIAL MEDIA ICONS ============================== */ body.theme-raed .store-footer .social-link { background: #252B31 !important; color: #FFFFFF !important; border: 1.5px solid rgba(230, 57, 70, 0.7) !important; border-radius: 50% !important; transition: all 0.3s ease; } body.theme-raed .store-footer .social-link:hover { background: #E63946 !important; border-color: #FF6673 !important; box-shadow: 0 0 18px rgba(230, 57, 70, 0.4); } /* ============================== 10 - MOBILE SOCIAL SECTION ============================== */ body.theme-raed .store-footer .contact-social { border-top: 1px solid rgba(230, 57, 70, 0.3) !important; padding-top: 20px !important; } /* ============================== 11 - FOOTER COPYRIGHT AREA ============================== */ body.theme-raed .store-footer > .container { background: #0B0E11 !important; padding-top: 25px !important; padding-bottom: 25px !important; } /* COPYRIGHT TEXT */ body.theme-raed .store-footer .copyright-text, body.theme-raed .store-footer .copyright-text p { color: #BFC6CC !important; font-size: 13px !important; line-height: 1.8 !important; } /* COPYRIGHT LINKS */ body.theme-raed .store-footer .copyright-text a { color: #FF6673 !important; } /* ============================== 12 - HOVER GLOW ============================== */ @media (hover: hover) { body.theme-raed .store-footer__inner > .container.grid > div:hover { border-color: #FF6673 !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(230, 57, 70, 0.18); } } /* ============================== 13 - MOBILE OPTIMIZATION ============================== */ @media (max-width: 767px) { body.theme-raed .store-footer__inner { padding-top: 30px !important; padding-bottom: 30px !important; } body.theme-raed .store-footer__inner > .container.grid > div { padding: 22px 18px !important; border-radius: 15px !important; } body.theme-raed .store-footer__inner h3 { font-size: 18px !important; } body.theme-raed .store-footer__inner p { font-size: 14px !important; line-height: 1.9 !important; } } /* ========================================== ENGLISH ZONE | PRODUCT PAGE TYPOGRAPHY ADD-ON VERSION 5 ========================================== */ /* 01 - PRODUCT TITLE */ body.theme-raed .container--product-details [data-testid="store-product-title"] { color: #FFFFFF !important; font-weight: 800 !important; line-height: 1.7 !important; } /* 02 - PRODUCT SUBTITLE */ body.theme-raed .container--product-details .product-entry__sub-title { color: #C5CDD5 !important; font-weight: 500 !important; line-height: 1.9 !important; } /* 03 - CURRENT PRODUCT PRICE */ body.theme-raed .container--product-details [data-testid="store-product-price"] p { color: #FFFFFF !important; font-weight: 800 !important; } /* 04 - DISCOUNTED PRICE */ body.theme-raed .container--product-details [data-testid="store-product-price"] p.text-red-800 { color: #FF6673 !important; font-size: 25px !important; font-weight: 900 !important; text-shadow: 0 0 14px rgba(230, 57, 70, 0.18); } /* 05 - OLD PRICE */ body.theme-raed .container--product-details [data-testid="store-product-price"] .line-through { color: #BFC6CC !important; opacity: 0.95 !important; } /* 06 - PRODUCT DESCRIPTION */ body.theme-raed .container--product-details .product__description { color: #DCE3E9 !important; line-height: 2 !important; } /* 07 - DESCRIPTION TEXT ELEMENTS */ body.theme-raed .container--product-details .product__description .article--main :is(p, span, li, strong, b, em, h2, h3, h4) { color: #DCE3E9 !important; line-height: 2 !important; } /* 08 - READ MORE LINK */ body.theme-raed .container--product-details #btn-show-more { color: #FF6673 !important; font-weight: 800 !important; text-decoration: underline !important; text-underline-offset: 5px; transition: color 0.3s ease; } body.theme-raed .container--product-details #btn-show-more:hover { color: #FFFFFF !important; } /* 09 - LINKS INSIDE DESCRIPTION */ body.theme-raed .container--product-details .product__description a { color: #FF7984 !important; font-weight: 700 !important; } /* 10 - PRODUCT TAGS */ body.theme-raed .container--product-details .main-content a.text-gray-500 { color: #C5CDD5 !important; text-decoration-color: #E63946 !important; } body.theme-raed .container--product-details .main-content a.text-gray-500:hover { color: #FF6673 !important; } /* 11 - TAX INFORMATION */ body.theme-raed .container--product-details .color-grey { color: #BDC6CF !important; } /* 12 - BREADCRUMBS */ body.theme-raed #main-content:has(.container--product-details) .container--breadcrumbs salla-breadcrumb { color: #C5CDD5 !important; } body.theme-raed #main-content:has(.container--product-details) .container--breadcrumbs .s-breadcrumb-item { color: #C5CDD5 !important; } body.theme-raed #main-content:has(.container--product-details) .container--breadcrumbs .s-breadcrumb-item a { color: #DCE3E9 !important; } body.theme-raed #main-content:has(.container--product-details) .container--breadcrumbs .s-breadcrumb-item a:hover { color: #FF6673 !important; } /* 13 - MOBILE PRODUCT TITLE */ @media (max-width: 767px) { body.theme-raed .container--product-details [data-testid="store-product-title"] { font-size: 21px !important; line-height: 1.7 !important; } body.theme-raed .container--product-details [data-testid="store-product-price"] p.text-red-800 { font-size: 23px !important; } } /* ========================================== ENGLISH ZONE | PREMIUM MOBILE MENU ADD-ON VERSION 6 ========================================== */ @media (max-width: 1024px) { /* 01 - MENU BACKGROUND */ body.theme-raed .mm-ocd__content { background: #101416 !important; box-shadow: -10px 0 35px rgba(0,0,0,0.5) !important; } body.theme-raed .mm-spn, body.theme-raed .mm-spn.mm-spn--light { background: #101416 !important; color: #FFFFFF !important; } /* 02 - MENU HEADER */ body.theme-raed .mm-spn.mm-spn--navbar::after { background: #1B2025 !important; color: #FFFFFF !important; font-size: 20px !important; font-weight: 800 !important; border-bottom: 2px solid #E63946 !important; opacity: 1 !important; } /* 03 - MENU ITEMS */ body.theme-raed .mm-spn li > a, body.theme-raed .mm-spn li > span { color: #F8F9FA !important; font-size: 16px !important; font-weight: 700 !important; transition: color 0.3s ease; } /* 04 - ROW SEPARATORS */ body.theme-raed .mm-spn li::after { border-color: rgba(230,57,70,0.35) !important; } /* 05 - MENU ARROWS */ body.theme-raed .mm-spn li::before { border-color: #FF6673 !important; } /* 06 - BACK BUTTON */ body.theme-raed .mm-spn.mm-spn--navbar::before { border-color: #FF6673 !important; } /* 07 - CATEGORY LOGOS */ body.theme-raed .mm-spn li img { background: #FFFFFF !important; border-radius: 12px !important; padding: 5px !important; border: 1px solid rgba(230,57,70,0.4) !important; } /* 08 - DISCOUNT LINK */ body.theme-raed .mm-spn a[href*="offer"] { color: #FF6673 !important; } /* 09 - CLOSE BUTTON */ body.theme-raed .btn--close-sm.close-mobile-menu { background: #E63946 !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 4px 20px rgba(230,57,70,0.3) !important; } body.theme-raed .btn--close-sm.close-mobile-menu i { color: #FFFFFF !important; } /* 10 - DARK OVERLAY */ body.theme-raed .mm-ocd__backdrop { background: rgba(0,0,0,0.7) !important; } /* 11 - MENU LINK HOVER */ @media (hover: hover) { body.theme-raed .mm-spn li > a:hover { color: #FF6673 !important; } } } /* ========================================== ENGLISH ZONE | FOOTER LAYOUT FIX ADD-ON VERSION 7 ========================================== */ /* 01 - HIDE EMPTY IMPORTANT LINKS CARD */ body.theme-raed .store-footer__inner > .container.grid > div:nth-child(2) { display: none !important; } /* 02 - WIDER CONTACT CARD ON DESKTOP */ @media (min-width: 1024px) { body.theme-raed .store-footer__inner > .container.grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; gap: 28px !important; align-items: stretch !important; } /* STORE DESCRIPTION CARD */ body.theme-raed .store-footer__inner > .container.grid > div:first-child { grid-column: span 1 !important; min-width: 0 !important; } /* CONTACT CARD */ body.theme-raed .store-footer__inner > .container.grid > div:nth-child(3) { grid-column: span 1 !important; min-width: 0 !important; } /* TRUST / APP ICONS SECTION */ body.theme-raed .store-footer__inner > .container.grid > salla-apps-icons { grid-column: 1 / -1 !important; } } /* 03 - IMPROVE CONTACT LINKS */ body.theme-raed .store-footer salla-contacts { width: 100% !important; min-width: 0 !important; } /* 04 - PREVENT PHONE NUMBERS FROM SPLITTING */ body.theme-raed .store-footer salla-contacts a[href^="tel:"] { white-space: nowrap !important; direction: ltr; unicode-bidi: isolate; } /* 05 - LONG LINKS AND EMAILS */ body.theme-raed .store-footer salla-contacts a[href^="mailto:"], body.theme-raed .store-footer salla-contacts a[href*="t.me/"] { overflow-wrap: anywhere !important; } /* 06 - MOBILE LAYOUT */ @media (max-width: 1023px) { body.theme-raed .store-footer__inner > .container.grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } } /* ========================================== ENGLISH ZONE | FOOTER REFINEMENT V8 ========================================== */ /* 01 - STOP CARDS FROM STRETCHING */ body.theme-raed .store-footer__inner > .container.grid { align-items: start !important; } /* 02 - ENGLISH ZONE: AUTO HEIGHT */ body.theme-raed .store-footer__inner > .container.grid > div:first-child { height: fit-content !important; min-height: 0 !important; align-self: start !important; padding-bottom: 24px !important; } /* 03 - CONTACT SECTION: RIGHT ALIGN */ body.theme-raed .store-footer salla-contacts { display: block !important; width: 100% !important; direction: rtl !important; text-align: right !important; } /* 04 - CONTACT ITEMS IN ONE COLUMN */ body.theme-raed .store-footer salla-contacts :is(.grid, ul) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } /* 05 - ALIGN CONTACT ROWS TO RIGHT */ body.theme-raed .store-footer salla-contacts :is(li, .s-contacts-item) { width: 100% !important; direction: rtl !important; text-align: right !important; justify-content: flex-start !important; } /* 06 - ALIGN ICONS AND LINKS */ body.theme-raed .store-footer salla-contacts a[href] { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; direction: rtl !important; text-align: right !important; width: 100% !important; gap: 12px !important; } /* 07 - KEEP PHONE NUMBERS READABLE */ body.theme-raed .store-footer salla-contacts a[href^="tel:"] { direction: rtl !important; white-space: nowrap !important; } body.theme-raed .store-footer salla-contacts a[href^="tel:"] span { direction: ltr !important; unicode-bidi: isolate; } /* 08 - LONG EMAILS AND LINKS */ body.theme-raed .store-footer salla-contacts a[href] { overflow-wrap: anywhere !important; } /* 09 - CONTACT CARD NATURAL HEIGHT */ body.theme-raed .store-footer__inner > .container.grid > div:nth-child(3) { height: auto !important; min-height: 0 !important; align-self: start !important; } /* ========================================== ENGLISH ZONE | UI REFINEMENT V16 HEADER + CATEGORIES + PRODUCT CARDS ========================================== */ /* ================================== 01 - REMOVE TOP CONTACT INFORMATION ================================== */ body.theme-raed .store-header .top-navbar salla-contacts[data-testid="store-header-contacts"] { display: none !important; } /* Keep search area flexible */ body.theme-raed .store-header .header-search { flex: 1 1 auto !important; min-width: 0 !important; } /* ================================== 02 - WHITE USER PROFILE ICON ================================== */ body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger, body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger-avatar-only { color: #FFFFFF !important; } /* Profile icon */ body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger i, body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger svg, body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger-avatar-only i, body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger-avatar-only svg { color: #FFFFFF !important; stroke: #FFFFFF !important; } /* Profile circle border */ body.theme-raed #mainnav salla-user-menu .s-user-menu-trigger-avatar-only { border-color: rgba(255,255,255,0.85) !important; } /* ================================== 03 - HIDE CATEGORY SLIDER ARROWS ONLY CATEGORIES SECTION ================================== */ body.theme-raed #main-content .s-block--categories .s-slider-nav-arrow, body.theme-raed #main-content .s-block--categories .s-slider-block__title-nav, body.theme-raed #main-content .s-block:has(.slide--cat-entry) .s-slider-nav-arrow, body.theme-raed #main-content .s-block:has(.slide--cat-entry) .s-slider-block__title-nav, body.theme-raed #main-content .s-block:has(.slide--cat-entry) .swiper-button-next, body.theme-raed #main-content .s-block:has(.slide--cat-entry) .swiper-button-prev { display: none !important; } /* ========================================== ENGLISH ZONE | PRODUCT CARDS V20 UNIFIED PRODUCT CARDS - ALL SECTIONS ========================================== */ /* ================================== 01 - PRODUCT SLIDER WIDTH ALL PRODUCT SLIDERS ================================== */ @media (min-width: 1024px) { body.theme-raed #main-content salla-products-slider .swiper-slide:has(.s-product-card-entry), body.theme-raed #main-content salla-products-slider .s-products-slider-card { width: 390px !important; min-width: 390px !important; max-width: 390px !important; flex: 0 0 390px !important; } } /* ================================== 02 - CATEGORY PRODUCT GRIDS ================================== */ @media (min-width: 1024px) { body.theme-raed #main-content salla-products-list .s-products-list-grid, body.theme-raed #main-content salla-products-list .s-products-list-wrapper.grid, body.theme-raed #main-content salla-products-list .grid:has(> salla-product-card) { grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ) !important; gap: 20px !important; } } /* ================================== 03 - UNIFIED CARD SIZE ================================== */ body.theme-raed #main-content .s-product-card-entry { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* ================================== 04 - UNIFIED PRODUCT IMAGE HEIGHT ================================== */ body.theme-raed #main-content .s-product-card-entry .s-product-card-image { height: 310px !important; min-height: 0 !important; max-height: 310px !important; aspect-ratio: auto !important; overflow: hidden !important; background: #F5F5F5 !important; } /* ================================== 05 - KEEP FULL POSTERS VISIBLE ================================== */ body.theme-raed #main-content .s-product-card-entry .s-product-card-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } /* ================================== 06 - COMPACT CARD INFORMATION ================================== */ body.theme-raed #main-content .s-product-card-entry .s-product-card-content { padding: 12px 16px !important; min-height: 0 !important; } /* ================================== 07 - PRODUCT TITLES ================================== */ body.theme-raed #main-content .s-product-card-entry .s-product-card-content-title a { font-size: 15px !important; line-height: 1.5 !important; font-weight: 700 !important; } /* ================================== 08 - PRODUCT DESCRIPTION ================================== */ body.theme-raed #main-content .s-product-card-entry .s-product-card-content-subtitle { font-size: 12px !important; line-height: 1.5 !important; } /* ================================== 09 - ADD TO CART BUTTON ================================== */ body.theme-raed #main-content .s-product-card-entry salla-add-product-button .s-button-element { min-height: 42px !important; padding: 9px 12px !important; font-size: 13px !important; border-radius: 10px !important; } /* ================================== 10 - MOBILE PRODUCT CARDS ================================== */ @media (max-width: 767px) { body.theme-raed #main-content .s-product-card-entry .s-product-card-image { height: 235px !important; max-height: 235px !important; } body.theme-raed #main-content .s-product-card-entry .s-product-card-content { padding: 10px !important; } body.theme-raed #main-content .s-product-card-entry .s-product-card-content-title a { font-size: 13px !important; line-height: 1.5 !important; } } /* ================================== 11 - TABLET PRODUCT CARDS ================================== */ @media (min-width: 768px) and (max-width: 1023px) { body.theme-raed #main-content .s-product-card-entry .s-product-card-image { height: 280px !important; max-height: 280px !important; } } /* ========================================== ENGLISH ZONE | CATEGORY CARDS V18 PREMIUM 3-COLUMN GRID ========================================== */ /* 01 - CATEGORY SLIDER LAYOUT */ @media (min-width: 768px) { body.theme-raed #main-content .s-block:has(.slide--cat-entry) .swiper-wrapper { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; height: auto !important; transform: none !important; } /* EQUAL WIDTH FOR 3 CATEGORIES */ body.theme-raed #main-content .s-block:has(.slide--cat-entry) .swiper-slide { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; flex: none !important; } } /* 02 - PREMIUM CATEGORY CARDS */ body.theme-raed #main-content .slide--cat-entry { width: 100% !important; height: 180px !important; min-height: 180px !important; padding: 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; background: linear-gradient( 145deg, #252B31, #171B20 ) !important; border: 2px solid rgba(230,57,70,0.8) !important; border-radius: 20px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 16px rgba(230,57,70,0.08) !important; text-decoration: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } /* 03 - CATEGORY TITLES */ body.theme-raed #main-content .slide--cat-entry h2 { color: #FFFFFF !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.6 !important; text-align: center !important; margin: 0 !important; } /* 04 - REMOVE CURRENT THREE DOTS */ body.theme-raed #main-content .slide--cat-entry > i { display: none !important; } /* 05 - DECORATIVE RED ACCENT */ body.theme-raed #main-content .slide--cat-entry::before { content: ""; display: block; width: 46px; height: 4px; background: #E63946; border-radius: 20px; box-shadow: 0 0 12px rgba(230,57,70,0.35); } /* 06 - HOVER EFFECT */ @media (hover: hover) { body.theme-raed #main-content .slide--cat-entry:hover { transform: translateY(-5px) !important; border-color: #FF6673 !important; box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 25px rgba(230,57,70,0.3) !important; } } /* 07 - HIDE CATEGORY ARROWS ONLY */ body.theme-raed #main-content .s-block:has(.slide--cat-entry) .s-slider-nav-arrow, body.theme-raed #main-content .s-block:has(.slide--cat-entry) .s-slider-block__title-nav { display: none !important; } /* 08 - MOBILE CATEGORY LAYOUT */ @media (max-width: 767px) { body.theme-raed #main-content .s-block:has(.slide--cat-entry) .swiper-wrapper { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; height: auto !important; transform: none !important; } body.theme-raed #main-content .s-block:has(.slide--cat-entry) .swiper-slide { width: 100% !important; max-width: none !important; margin: 0 !important; } body.theme-raed #main-content .slide--cat-entry { height: 110px !important; min-height: 110px !important; border-radius: 15px !important; padding: 14px !important; } body.theme-raed #main-content .slide--cat-entry h2 { font-size: 16px !important; } } /* 09 - REDUCE GAP AFTER CATEGORIES */ body.theme-raed #main-content .s-block:has(.slide--cat-entry) { margin-bottom: 20px !important; } /* ========================================== ENGLISH ZONE | CATEGORY LOGOS V19 ========================================== */ /* نخفي الخط الأحمر الصغير القديم */ body.theme-raed #main-content .slide--cat-entry::before { display: none !important; } /* تحسين ترتيب محتوى البطاقة */ body.theme-raed #main-content .slide--cat-entry { padding: 24px 18px !important; gap: 14px !important; justify-content: center !important; } /* صندوق الشعار */ body.theme-raed #main-content .slide--cat-entry .ez-cat-logo-box { width: 132px; height: 74px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); overflow: hidden; } /* صورة الشعار */ body.theme-raed #main-content .slide--cat-entry .ez-cat-logo-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } /* عنوان البطاقة */ body.theme-raed #main-content .slide--cat-entry h2 { font-size: 18px !important; line-height: 1.55 !important; margin: 0 !important; text-align: center !important; max-width: 90%; } /* الجوال */ @media (max-width: 767px) { body.theme-raed #main-content .slide--cat-entry { padding: 18px 14px !important; gap: 12px !important; } body.theme-raed #main-content .slide--cat-entry .ez-cat-logo-box { width: 110px; height: 60px; border-radius: 12px; padding: 8px 10px; } body.theme-raed #main-content .slide--cat-entry h2 { font-size: 16px !important; } } /* ========================================== ENGLISH ZONE | ABOUT SECTION REFINEMENT V21 LIGHT SECTION MATCHING NEW BANNER ========================================== */ /* 01 - الحاوية العامة لهذا الجزء */ body.theme-raed .store-footer { background: #060b10 !important; padding-top: 22px !important; } /* 02 - صندوق النبذة العلوي */ body.theme-raed .store-footer__inner > .container.grid > div:first-child { position: relative; background: linear-gradient(145deg, #f8f8f8 0%, #ffffff 100%) !important; border: 1px solid rgba(205, 95, 38, 0.18) !important; border-radius: 24px !important; padding: 40px 42px !important; overflow: hidden !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255,255,255,0.4) inset !important; } /* زخارف خفيفة تشبه روح البنر */ body.theme-raed .store-footer__inner > .container.grid > div:first-child::before { content: ""; position: absolute; inset-inline-start: -55px; inset-block-start: 30px; width: 150px; height: 150px; border: 2px dashed rgba(190, 70, 35, 0.20); border-radius: 50%; pointer-events: none; } body.theme-raed .store-footer__inner > .container.grid > div:first-child::after { content: ""; position: absolute; inset-inline-end: 18px; inset-block-start: 18px; width: 86px; height: 86px; border: 3px solid rgba(194, 99, 30, 0.18); border-radius: 50%; pointer-events: none; } /* 03 - عنوان القسم */ body.theme-raed .store-footer__inner > .container.grid > div:first-child h3, body.theme-raed .store-footer__inner > .container.grid > div:first-child a > h3 { color: #b95a1f !important; font-size: 40px !important; line-height: 1.25 !important; font-weight: 900 !important; text-align: center !important; margin-bottom: 18px !important; } /* 04 - نص النبذة */ body.theme-raed .store-footer__inner > .container.grid > div:first-child p, body.theme-raed .store-footer__inner > .container.grid > div:first-child .max-w-sm, body.theme-raed .store-footer__inner > .container.grid > div:first-child .leading-6, body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-dynamic-description, body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-v15-about-text { color: #121212 !important; font-size: 18px !important; line-height: 2 !important; text-align: center !important; max-width: 1100px !important; margin-inline: auto !important; } /* 05 - خط زخرفي تحت النص */ body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-about-accent, body.theme-raed .store-footer__inner > .container.grid > div:first-child .max-w-sm::after, body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-dynamic-description::after, body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-v15-about-text::after { content: ""; display: block; width: 140px; height: 5px; margin: 22px auto 0 auto; border-radius: 999px; background: linear-gradient(90deg, #d57a20, #be1f32); box-shadow: 0 0 14px rgba(190, 31, 50, 0.18); } /* 06 - قائمة روابط الفوتر الوسطى */ body.theme-raed .store-footer__inner > .container:not(.grid) a, body.theme-raed .store-footer .store-footer__inner .footer-links a, body.theme-raed .store-footer .store-footer__inner .menu a { color: #111111 !important; font-weight: 700 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 16px !important; margin: 6px !important; border-radius: 999px !important; background: #ffffff !important; border: 1px solid rgba(190, 70, 35, 0.14) !important; transition: all .25s ease !important; } body.theme-raed .store-footer__inner > .container:not(.grid) a:hover, body.theme-raed .store-footer .store-footer__inner .footer-links a:hover, body.theme-raed .store-footer .store-footer__inner .menu a:hover { color: #ffffff !important; background: linear-gradient(90deg, #d57a20, #be1f32) !important; border-color: transparent !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(190, 31, 50, 0.18) !important; } /* 07 - السطر السفلي (الرقم الضريبي / المركز السعودي) */ body.theme-raed .store-footer__inner > .container:last-child { border-top: 1px solid rgba(0,0,0,0.10) !important; margin-top: 18px !important; padding-top: 22px !important; padding-bottom: 10px !important; color: #1b1b1b !important; font-size: 16px !important; text-align: center !important; } /* 08 - إزالة أي خلفيات باهتة غير مرغوبة */ body.theme-raed .store-footer__inner { background: transparent !important; } /* 09 - الجوال */ @media (max-width: 767px) { body.theme-raed .store-footer__inner > .container.grid > div:first-child { padding: 24px 18px !important; border-radius: 18px !important; } body.theme-raed .store-footer__inner > .container.grid > div:first-child h3, body.theme-raed .store-footer__inner > .container.grid > div:first-child a > h3 { font-size: 24px !important; line-height: 1.35 !important; } body.theme-raed .store-footer__inner > .container.grid > div:first-child p, body.theme-raed .store-footer__inner > .container.grid > div:first-child .max-w-sm, body.theme-raed .store-footer__inner > .container.grid > div:first-child .leading-6, body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-dynamic-description, body.theme-raed .store-footer__inner > .container.grid > div:first-child .ez-v15-about-text { font-size: 15px !important; line-height: 1.9 !important; } body.theme-raed .store-footer__inner > .container:not(.grid) a, body.theme-raed .store-footer .store-footer__inner .footer-links a, body.theme-raed .store-footer .store-footer__inner .menu a { font-size: 13px !important; padding: 8px 12px !important; margin: 4px !important; } body.theme-raed .store-footer__inner > .container:last-child { font-size: 14px !important; line-height: 1.8 !important; } } /* ========================================== ENGLISH ZONE | SOCIAL ICONS COLOR FIX V22 ========================================== */ /* أيقونات السوشال داخل بطاقة النبذة الفاتحة */ body.theme-raed .store-footer .ez-social-row a, body.theme-raed .store-footer .contact-social a, body.theme-raed .store-footer salla-social a { width: 52px !important; height: 52px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: #ffffff !important; border: 2px solid rgba(185, 90, 31, 0.28) !important; box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important; color: #b95a1f !important; transition: all .25s ease !important; } /* لون الأيقونة نفسها */ body.theme-raed .store-footer .ez-social-row a i, body.theme-raed .store-footer .contact-social a i, body.theme-raed .store-footer salla-social a i, body.theme-raed .store-footer .ez-social-row a svg, body.theme-raed .store-footer .contact-social a svg, body.theme-raed .store-footer salla-social a svg, body.theme-raed .store-footer .ez-social-row a path, body.theme-raed .store-footer .contact-social a path, body.theme-raed .store-footer salla-social a path { color: #b95a1f !important; stroke: #b95a1f !important; fill: currentColor !important; } /* hover */ body.theme-raed .store-footer .ez-social-row a:hover, body.theme-raed .store-footer .contact-social a:hover, body.theme-raed .store-footer salla-social a:hover { background: linear-gradient(90deg, #d57a20, #be1f32) !important; border-color: transparent !important; transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(190, 31, 50, 0.18) !important; } /* الأيقونة داخل hover تصير بيضاء */ body.theme-raed .store-footer .ez-social-row a:hover i, body.theme-raed .store-footer .contact-social a:hover i, body.theme-raed .store-footer salla-social a:hover i, body.theme-raed .store-footer .ez-social-row a:hover svg, body.theme-raed .store-footer .contact-social a:hover svg, body.theme-raed .store-footer salla-social a:hover svg, body.theme-raed .store-footer .ez-social-row a:hover path, body.theme-raed .store-footer .contact-social a:hover path, body.theme-raed .store-footer salla-social a:hover path { color: #ffffff !important; stroke: #ffffff !important; fill: currentColor !important; } /* ========================================== ENGLISH ZONE | TELEGRAM FIX V24 MATCH INSTAGRAM & SNAPCHAT ========================================== */ /* 01 - TELEGRAM CIRCLE */ body.theme-raed .store-footer .ez-social-wrap > a.ez-telegram-link.social-link { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; flex: 0 0 52px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: #FFFFFF !important; border: 2px solid rgba(185, 90, 31, 0.28) !important; color: #B95A1F !important; box-shadow: 0 6px 14px rgba(0,0,0,0.08) !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; transition: all 0.25s ease !important; } /* 02 - TELEGRAM SVG ICON */ body.theme-raed .store-footer .ez-social-wrap > a.ez-telegram-link.social-link svg { display: block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; color: #B95A1F !important; stroke: #B95A1F !important; fill: none !important; stroke-width: 1.8px !important; opacity: 1 !important; } /* 03 - TELEGRAM SVG PATHS */ body.theme-raed .store-footer .ez-social-wrap > a.ez-telegram-link.social-link svg path { stroke: #B95A1F !important; fill: none !important; } /* 04 - HOVER EFFECT */ body.theme-raed .store-footer .ez-social-wrap > a.ez-telegram-link.social-link:hover { background: linear-gradient( 90deg, #D57A20, #BE1F32 ) !important; border-color: transparent !important; color: #FFFFFF !important; transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(190,31,50,0.18) !important; } /* 05 - WHITE ICON ON HOVER */ body.theme-raed .store-footer .ez-social-wrap > a.ez-telegram-link.social-link:hover svg, body.theme-raed .store-footer .ez-social-wrap > a.ez-telegram-link.social-link:hover svg path { color: #FFFFFF !important; stroke: #FFFFFF !important; fill: none !important; }