:root{ --main-text-color:#EAEDF3; --main-text-color-dark:#EAEDF3; body{ background-color:#000 !important; background-image: radial-gradient(ellipse 65% 45% at 15% 10%, rgba(87,143,239,0.34), transparent 65%), radial-gradient(ellipse 55% 40% at 88% 8%, rgba(87,143,239,0.26), transparent 68%), radial-gradient(ellipse 60% 50% at 50% 95%, rgba(228,55,46,0.16), transparent 72%), radial-gradient(ellipse 50% 40% at 75% 55%, rgba(87,143,239,0.22), transparent 65%), radial-gradient(ellipse 45% 35% at 10% 70%, rgba(87,143,239,0.20), transparent 62%) !important; background-attachment:scroll !important; background-repeat:no-repeat !important; } --color-grey:#101216; --color-light-grey:#1b1e24; --bg-gray: rgba(255,255,255,.06); --infinte-color:#3a3f47; } body{ background-color:#000 !important; background-image: radial-gradient(ellipse 65% 45% at 15% 10%, rgba(87,143,239,0.34), transparent 65%), radial-gradient(ellipse 55% 40% at 88% 8%, rgba(87,143,239,0.26), transparent 68%), radial-gradient(ellipse 60% 50% at 50% 95%, rgba(228,55,46,0.16), transparent 72%), radial-gradient(ellipse 50% 40% at 75% 55%, rgba(87,143,239,0.22), transparent 65%), radial-gradient(ellipse 45% 35% at 10% 70%, rgba(87,143,239,0.20), transparent 62%) !important; background-attachment:scroll !important; background-repeat:no-repeat !important; } .bg-white,.bg-gray-50{ background-color:#000 !important; } .bg-gray-100{ background-color:#111318 !important; } .bg-gray-200{ background-color:#1b1e24 !important; } .main-nav-container, .sub-menu, .s-product-card-entry, .s-product-card-image, .s-product-card-wishlist-btn, .s-block--features__item, .s-reviews-testimonial, .s-add-product-toast, .s-modal-body, .s-search-input, .mm-ocd__content{ background-color:#0d0f13 !important; } .main-nav-container{ background-color:#0d0f13 !important; background-image: radial-gradient(ellipse 65% 45% at 15% 10%, rgba(87,143,239,0.34), transparent 65%), radial-gradient(ellipse 55% 40% at 88% 8%, rgba(87,143,239,0.26), transparent 68%), radial-gradient(ellipse 60% 50% at 50% 95%, rgba(228,55,46,0.16), transparent 72%), radial-gradient(ellipse 50% 40% at 75% 55%, rgba(87,143,239,0.22), transparent 65%), radial-gradient(ellipse 45% 35% at 10% 70%, rgba(87,143,239,0.20), transparent 62%) !important; background-attachment:scroll !important; background-repeat:no-repeat !important; } .text-gray-900,.text-gray-800,.text-black,.text-gray-700{ color:#EAEDF3 !important; } .text-gray-600,.text-gray-500{ color:#9aa3af !important; } .s-block--features__item h2 { color:#EAEDF3 !important; } .s-product-card-content-title a{ color:#EAEDF3 !important; } .s-cart-summary-total{ color:#EAEDF3 !important; } .header-btn__icon{ color:#EAEDF3 !important; } .s-cart-summary-icon{ color:#EAEDF3 !important; } .s-payments-list-item{ background-color:#fff !important; } .s-product-card-content-subtitle{ color:#9aa3af !important; } .s-user-menu-login-btn svg{ fill:#EAEDF3 !important; } .s-product-card-wishlist-btn{ background-color:transparent !important; } .square-photos-grid.square-photos-grid--equal-3, .square-photos-grid.square-photos-grid--featured-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } @media (min-width: 640px) { .square-photos-grid.square-photos-grid--equal-3, .square-photos-grid.square-photos-grid--featured-3 { grid-template-columns: repeat(3, 200px) !important; gap: 14px !important; justify-content: flex-start !important; } } .square-photos-grid { overflow: visible !important; height: auto !important; } section:has(.square-photos-grid) { height: auto !important; min-height: auto !important; overflow: visible !important; } .square-photos-grid .banner-entry.square-photos { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1 / 1 !important; height: auto !important; width: 100% !important; } .square-photos-grid .banner-entry.square-photos { position: relative !important; overflow: hidden !important; background: #14161c !important; box-shadow: none !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .square-photos-grid .banner-entry.square-photos .lazy__bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 18px !important; background-size: cover !important; background-position: center !important; box-shadow: none !important; z-index: 1; } .square-photos-grid .banner-entry.square-photos::after { content: ""; display: none !important; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.10%200%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%2523n%29%27/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .5; pointer-events: none; z-index: 2; } .square-photos-grid .banner-entry.square-photos::before { content: ""; display: none !important; position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 7px; background-image: url("https://cdn.files.salla.network/other/156100395/f664daa1-64e4-44d7-b34c-8dc174779f8f-original.webp"); background-size: cover; box-shadow: 0 2px 6px rgba(0,0,0,.6); z-index: 3; opacity: .95; } .square-photos-grid.square-photos-grid--equal-3 > a.banner-entry:nth-child(4) { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg,#1a0e2e,#3a1c6e 55%,#6a2ee0) !important; } .square-photos-grid.square-photos-grid--equal-3 > a.banner-entry:nth-child(5) { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 60%), linear-gradient(135deg,#241a00,#5a4200 55%,#e0b400) !important; } .square-photos-grid.square-photos-grid--equal-3 > a.banner-entry:nth-child(6) { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg,#1a0d00,#5c3400 55%,#ff8a1e) !important; } select { background-color: #0d0f13 !important; color: #EAEDF3 !important; border: 1px solid rgba(255,255,255,.12) !important; } select option { background-color: #0d0f13 !important; color: #EAEDF3 !important; } select option:checked, select option:hover { background-color: #1b2a28 !important; color: #5dd5c4 !important; } /* Fix: account-type select/dropdown to match dark theme */ select.s-form-control { background-color: #111318 !important; color: #EAEDF3 !important; border-color: rgba(255,255,255,.16) !important; } select.s-form-control option { background-color: #111318 !important; color: #EAEDF3 !important; } /* Fix: quantity stepper number invisible (light text on white input bg) */ .s-quantity-input-input { background-color: #111318 !important; color: #EAEDF3 !important; border-color: rgba(255,255,255,.16) !important; } /* Fix: white "Account info" metadata box clashing with dark theme */ .s-metadata-box { background-color: #111318 !important; border: 1px solid rgba(255,255,255,.12) !important; } .s-metadata-box-header { color: #EAEDF3 !important; } /* Fix: white product-options box (account type selector card) clashing with dark theme */ .s-product-options-wrapper { background-color: #111318 !important; } .s-product-options-wrapper b { color: #EAEDF3 !important; } .s-product-options-wrapper small { color: #9aa3af !important; } /* Fix: white comments/reviews strip below product clashing with dark theme */ .s-comments.s-comments-product { background-color: #111318 !important; } .s-comments-container { background-color: #111318 !important; } /* Fix: white cart order-summary card clashing with dark theme */ .s-cart-summary-card, .s-cart-summary-card-bar { background-color: #111318 !important; } .s-cart-summary-card-sheet-title, .s-cart-summary-card-bar-label-text, .s-cart-summary-card-bar-total, .s-cart-summary-card-line b { color: #EAEDF3 !important; } .s-cart-summary-card-line span, .s-cart-summary-card-bar-count { color: #9aa3af !important; } /* Fix: white email/password order-form inputs clashing with dark theme */ input.s-form-control { background-color: #111318 !important; color: #EAEDF3 !important; border-color: rgba(255,255,255,.16) !important; } input.s-form-control::placeholder { color: #9aa3af !important; } /* Fix: light gray border/line around product image gallery clashing with dark theme */ .swiper.s-slider-container { border: none !important; } .swiper-slide.magnify-wrapper { box-shadow: none !important; } /* Fix: category "square photos" boxes overflowing/overlaying page content. Root cause: base theme sets a fixed grid-auto-rows: 200px for the featured-3/featured-5 layouts, but our forced aspect-ratio:1/1 square tiles render taller than 200px at wider column widths (e.g. the 4-column featured-5 layout), and with overflow:visible on the grid/section that extra height spills out and overlaps the content below. */ .square-photos-grid { grid-auto-rows: auto !important; } .square-photos-grid.square-photos-grid--featured-5 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; } /* Fix: body background-attachment:fixed with multi-layer radial-gradient fails to render the color gradient on many mobile browsers (iOS Safari / Android Chrome), leaving only the solid black background-color visible. Switch to normal scroll attachment on mobile widths so the gradient colors always paint, even though the effect no longer stays pinned while scrolling on small screens. */ @media (max-width: 768px) { body { background-attachment: scroll !important; } } /* Fix: mobile off-canvas main menu (the hamburger nav, built on the "mm-spn--light" slide-out menu widget) renders in its default light theme instead of the site's dark theme. Force dark colors broadly enough to override both the widget's own stylesheet rules and any inline styles it applies at runtime. */ nav#mobile-menu, nav#mobile-menu .main-menu, nav#mobile-menu .sub-menu, .mm-spn__panel, .mm-spn__title, .mm-spn__header { background-color: #0d0f13 !important; color: #EAEDF3 !important; } nav#mobile-menu li, nav#mobile-menu a, nav#mobile-menu span, nav#mobile-menu .btn--close, nav#mobile-menu [class*="close"] { background-color: transparent !important; color: #EAEDF3 !important; border-color: rgba(255,255,255,.1) !important; } nav#mobile-menu a:hover, nav#mobile-menu a:focus { background-color: rgba(255,255,255,.06) !important; } /* Product description: ONE unified box, flat deep-teal-black background (no pattern) — matching the site's dark theme but tinted teal instead of neutral gray. Box background/border lives on the
wrapper; each h3/blockquote inside is transparent and only contributes a thin divider line. */ .product__description article { position: relative !important; background-color: #071312 !important; background-image: none !important; border: 1px solid rgba(20,184,166,.3) !important; border-radius: 12px !important; } .product__description article > h3, .product__description article > blockquote { background: transparent !important; border-left: none !important; border-right: none !important; border-top: none !important; border-bottom: none !important; border-radius: 0 !important; margin: 0 !important; padding: 12px 16px !important; } .product__description article > h3:first-child, .product__description article > blockquote:first-child { border-top: none !important; } .product__description article > h3 { display: flex !important; align-items: center !important; gap: 8px !important; color: #5eead4 !important; font-size: 15px !important; font-weight: 700 !important; } .product__description article > h3 span[style*="background-color"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; border-radius: 7px !important; padding: 0 !important; font-size: 13px !important; margin-inline-end: 0 !important; } .product__description blockquote p { color: #d7dce3 !important; margin: 0 !important; font-size: 14px !important; } .product__description blockquote strong { color: #ffffff !important; } .product__description span[style*="background-color"] { display: inline-block !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 13px !important; font-weight: bold !important; color: #EAEDF3 !important; margin-inline-end: 6px !important; } /* Dark-theme fixes: price label, apple pay button, like/share icons, slider arrows */ .form-label { color: rgba(255,255,255,.65) !important; } .s-button-light-outline { background-color: rgba(0,0,0,.55) !important; border-color: rgba(255,255,255,.25) !important; color: #fff !important; } .s-button-light-outline svg { fill: #fff !important; color: #fff !important; } html body .s-product-card-wishlist-btn.s-product-card-wishlist-btn.s-product-card-wishlist-btn button.s-button-light-outline.s-button-light-outline, html body .s-product-card-wishlist-btn.s-product-card-wishlist-btn.s-product-card-wishlist-btn button { background-color: rgba(0,0,0,.85) !important; border-color: rgba(255,255,255,.4) !important; } html body .s-product-card-wishlist-btn.s-product-card-wishlist-btn.s-product-card-wishlist-btn button svg, html body .s-product-card-wishlist-btn.s-product-card-wishlist-btn.s-product-card-wishlist-btn button i { color: #fff !important; fill: #fff !important; } .s-slider-nav-arrow { background-color: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.25) !important; } .s-slider-nav-arrow svg { fill: #fff !important; color: #fff !important; } apple-pay-button.s-quick-buy-apple-pay { border: 1px solid rgba(255,255,255,.3) !important; border-radius: 8px !important; overflow: hidden !important; } /* /* Ensure dark background always fills full page height, even on short pages. 100dvh with a 100vh fallback so this tracks the real visible viewport on mobile (see sticky-footer rule below for why). */ html { background-color: #000 !important; min-height: 100% !important; } body { min-height: 100vh !important; min-height: 100dvh !important; } /* Sticky footer: keep footer pinned to bottom of viewport on short pages so no background gap/strip shows below it. Uses 100dvh (dynamic viewport height) with a 100vh fallback: on phones, 100vh is calculated against the full viewport as if the browser's address-bar/toolbar were hidden, which is often MORE height than what's actually visible, so a page that looked flush on desktop can leave a gap (or need extra scrolling) below the footer on mobile as the toolbar shows/hides. 100dvh tracks the real, currently-visible viewport instead. Browsers that don't support dvh simply ignore that line and keep the vh value. */ .app-inner { min-height: 100vh !important; min-height: 100dvh !important; } .app-inner > footer { margin-top: auto !important; } /* "اقرأ المزيد" read-more link inside the product description box: match AimBull teal branding; disappears after being clicked (native behavior) */ .product__description #btn-show-more, .product__description .link--primary { color: rgb(20,184,166) !important; font-weight: 700 !important; text-decoration: none !important; } /* Top nav category links: hover highlight box was oversized/misaligned because the link had 0 top / 32px bottom padding, pushing the text to the top of the hover box and leaving an empty gap below. Keep the same total box size (same clickable/hover area) but center the text within it. */ .main-menu > li > a { padding: 16px 12px !important; } /* Make "اقرأ المزيد" visually part of the description box: same teal background, seamless bottom edge, instead of floating below it as plain text. Once expanded, hide it entirely (not just fade) so it doesn't leave an empty colored strip. */ .product__description article#more-content { border-radius: 12px 12px 0 0 !important; } .product__description #btn-show-more { display: block !important; width: 100% !important; background-color: rgb(7,19,18) !important; margin-top: 0 !important; padding: 8px 16px 16px !important; border-radius: 0 0 12px 12px !important; box-sizing: border-box !important; } .product__description #btn-show-more.is-expanded { display: none !important; } /* AimBull custom dropdown (TEST BUILD) — styles the JS-built replacement for native