/* Road Biker global header polish: styles existing Journal Arabic header/menu only. */ :root { --rb-page-bg: #E8E8E8; --rb-surface-bg: #fff; --rb-text: #222; --rb-muted-text: #666; --rb-border: #d7d7d7; --rb-home-accent: #F3BF3C; --rb-home-accent-hover: #d8a52b; --rb-home-accent-ink: #111; } html, body, .site-wrapper { background: var(--rb-page-bg) !important; } html:not(.route-common-home):not(.popup) #top, html:not(.route-common-home):not(.popup) .site-wrapper, html:not(.route-common-home):not(.popup) .grid-row:not(.grid-row-4):not(.grid-row-5), html:not(.route-common-home):not(.popup) .grid-row:not(.grid-row-4):not(.grid-row-5) > .row-bg, html:not(.route-common-home):not(.popup) .grid-row:not(.grid-row-4):not(.grid-row-5) > .grid-cols-wrapper > .grid-cols, html:not(.route-common-home):not(.popup) .site-wrapper > .page-title, html:not(.route-common-home):not(.popup) .breadcrumbs { background: var(--rb-page-bg) !important; } html:not(.route-common-home):not(.popup) #content, html:not(.route-common-home):not(.popup) .page-title, html:not(.route-common-home):not(.popup) .page-title *, html:not(.route-common-home):not(.popup) .breadcrumbs, html:not(.route-common-home):not(.popup) .breadcrumbs *, html:not(.route-common-home):not(.popup) .main-products, html:not(.route-common-home):not(.popup) .main-products *, html:not(.route-common-home):not(.popup) .product-info, html:not(.route-common-home):not(.popup) .product-info *, html:not(.route-common-home):not(.popup) .module-filter, html:not(.route-common-home):not(.popup) .module-filter *, html:not(.route-common-home):not(.popup) .module-categories, html:not(.route-common-home):not(.popup) .module-categories *, html:not(.route-common-home):not(.popup) .module-side_products, html:not(.route-common-home):not(.popup) .module-side_products *, html:not(.route-common-home):not(.popup) .module-products, html:not(.route-common-home):not(.popup) .module-products * { color: var(--rb-text) !important; } html:not(.route-common-home):not(.popup) .product-thumb, html:not(.route-common-home):not(.popup) .product-thumb .caption, html:not(.route-common-home):not(.popup) .product-thumb .image, html:not(.route-common-home):not(.popup) .product-thumb .product-img, html:not(.route-common-home):not(.popup) .product-thumb .product-img > div, html:not(.route-common-home):not(.popup) .module-filter, html:not(.route-common-home):not(.popup) .module-filter .module-body, html:not(.route-common-home):not(.popup) .module-filter .panel, html:not(.route-common-home):not(.popup) .module-filter .panel-body, html:not(.route-common-home):not(.popup) .module-filter .panel-collapse, html:not(.route-common-home):not(.popup) .module-categories, html:not(.route-common-home):not(.popup) .module-categories .module-body, html:not(.route-common-home):not(.popup) .category-thumb, html:not(.route-common-home):not(.popup) .product-info .product-left-wrapper, html:not(.route-common-home):not(.popup) .product-info .product-right-wrapper, html:not(.route-common-home):not(.popup) .product-info .product-left, html:not(.route-common-home):not(.popup) .product-info .product-right, html:not(.route-common-home):not(.popup) .product-info .product-image, html:not(.route-common-home):not(.popup) .product-info .product-details, html:not(.route-common-home):not(.popup) .product-info .product-options, html:not(.route-common-home):not(.popup) .product-info .product-blocks > *, html:not(.route-common-home):not(.popup) .module-side_products, html:not(.route-common-home):not(.popup) .module-side_products .module-body, html:not(.route-common-home):not(.popup) .module-products, html:not(.route-common-home):not(.popup) .module-products .module-body { background: var(--rb-surface-bg) !important; } html:not(.route-common-home):not(.popup) .product-thumb, html:not(.route-common-home):not(.popup) .module-filter, html:not(.route-common-home):not(.popup) .category-thumb, html:not(.route-common-home):not(.popup) .product-info .product-left-wrapper, html:not(.route-common-home):not(.popup) .product-info .product-right-wrapper, html:not(.route-common-home):not(.popup) .module-side_products, html:not(.route-common-home):not(.popup) .module-products { border-color: var(--rb-border) !important; } html:not(.route-common-home):not(.popup) .price-old, html:not(.route-common-home):not(.popup) .price-tax, html:not(.route-common-home):not(.popup) .description, html:not(.route-common-home):not(.popup) .product-stats, html:not(.route-common-home):not(.popup) .product-stats *, html:not(.route-common-home):not(.popup) .module-filter .count-badge { color: var(--rb-muted-text) !important; } html:not(.route-common-home):not(.popup) .product-label, html:not(.route-common-home):not(.popup) .module-filter .module-title, html:not(.route-common-home):not(.popup) .module-filter .filter-title { color: inherit; } html:not(.route-common-home):not(.popup) .btn.btn-cart, html:not(.route-common-home):not(.popup) .btn.btn-cart *, html:not(.route-common-home):not(.popup) .btn.btn-extra, html:not(.route-common-home):not(.popup) .btn.btn-extra * { color: #111 !important; } html:not(.route-common-home):not(.popup) .btn.btn-cart, html:not(.route-common-home):not(.popup) .btn.btn-extra { background: #f6c334 !important; border-color: #d5a500 !important; } html:not(.route-common-home):not(.popup) .products-filter, html:not(.route-common-home):not(.popup) .grid-list, html:not(.route-common-home):not(.popup) .grid-list .compare-btn, html:not(.route-common-home):not(.popup) .grid-list .compare-btn .links-text, html:not(.route-common-home):not(.popup) .grid-list .compare-btn::before, html:not(.route-common-home):not(.popup) .grid-list .view-btn, html:not(.route-common-home):not(.popup) .grid-list .view-btn::before, html:not(.route-common-home):not(.popup) .products-filter .input-group-addon, html:not(.route-common-home):not(.popup) .products-filter label { color: var(--rb-text) !important; } html.route-product-product:not(.popup) #product .rb-buy-module, html.route-product-product:not(.popup) .rb-buy-module { background: var(--rb-surface-bg) !important; color: var(--rb-text) !important; border: 1px solid var(--rb-border) !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .12) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .product-price-group, html.route-product-product:not(.popup) .rb-buy-module .product-price-group { background: #f6f6f6 !important; border-color: var(--rb-border) !important; color: var(--rb-text) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .price-wrapper, html.route-product-product:not(.popup) .rb-buy-module .price-wrapper { border-bottom-color: var(--rb-border) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .price-wrapper::before, html.route-product-product:not(.popup) .rb-buy-module .price-wrapper::before, html.route-product-product:not(.popup) #product .rb-buy-module .product-price-old, html.route-product-product:not(.popup) #product .rb-buy-module .product-tax, html.route-product-product:not(.popup) #product .rb-buy-module .product-points, html.route-product-product:not(.popup) #product .rb-buy-module .discounts, html.route-product-product:not(.popup) .rb-buy-module .product-price-old, html.route-product-product:not(.popup) .rb-buy-module .product-tax, html.route-product-product:not(.popup) .rb-buy-module .product-points, html.route-product-product:not(.popup) .rb-buy-module .discounts, html.route-product-product:not(.popup) #product .rb-buy-module .product-stats, html.route-product-product:not(.popup) #product .rb-buy-module .product-stats li, html.route-product-product:not(.popup) #product .rb-buy-module .product-stats b, html.route-product-product:not(.popup) #product .rb-buy-module .product-stats span, html.route-product-product:not(.popup) #product .rb-buy-module .product-stats a, html.route-product-product:not(.popup) .rb-buy-module .product-stats, html.route-product-product:not(.popup) .rb-buy-module .product-stats li, html.route-product-product:not(.popup) .rb-buy-module .product-stats b, html.route-product-product:not(.popup) .rb-buy-module .product-stats span, html.route-product-product:not(.popup) .rb-buy-module .product-stats a { color: var(--rb-muted-text) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .product-price, html.route-product-product:not(.popup) #product .rb-buy-module .product-price-new, html.route-product-product:not(.popup) .rb-buy-module .product-price, html.route-product-product:not(.popup) .rb-buy-module .product-price-new, html.route-product-product:not(.popup) #product .rb-buy-module .cart-group > .control-label, html.route-product-product:not(.popup) #product .rb-buy-module .stepper-group.cart-group > label.control-label, html.route-product-product:not(.popup) #product .rb-buy-module .product-options, html.route-product-product:not(.popup) #product .rb-buy-module .form-group, html.route-product-product:not(.popup) .rb-buy-module .cart-group > .control-label, html.route-product-product:not(.popup) .rb-buy-module .product-options, html.route-product-product:not(.popup) .rb-buy-module .form-group { color: var(--rb-text) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .form-control, html.route-product-product:not(.popup) #product .rb-buy-module select, html.route-product-product:not(.popup) #product .rb-buy-module textarea, html.route-product-product:not(.popup) #product .rb-buy-module input[type="text"], html.route-product-product:not(.popup) .rb-buy-module .form-control, html.route-product-product:not(.popup) .rb-buy-module select, html.route-product-product:not(.popup) #product .rb-buy-module .stepper, html.route-product-product:not(.popup) .rb-buy-module .stepper, html.route-product-product:not(.popup) #product .rb-buy-module .stepper button, html.route-product-product:not(.popup) #product .rb-buy-module .stepper input#product-quantity, html.route-product-product:not(.popup) #product .rb-buy-module .stepper input, html.route-product-product:not(.popup) .rb-buy-module .stepper button, html.route-product-product:not(.popup) .rb-buy-module .stepper input { background: var(--rb-surface-bg) !important; color: var(--rb-text) !important; border-color: var(--rb-border) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .stepper button::before, html.route-product-product:not(.popup) .rb-buy-module .stepper button::before { color: var(--rb-text) !important; } html.route-product-product:not(.popup) #product .rb-buy-module .extra-group .btn.btn-extra, html.route-product-product:not(.popup) .rb-buy-module .extra-group .btn.btn-extra { background: #f6c334 !important; border-color: #d5a500 !important; color: #111 !important; } html.route-product-product:not(.popup) #product .rb-buy-module .extra-group .btn.btn-extra *, html.route-product-product:not(.popup) .rb-buy-module .extra-group .btn.btn-extra * { color: #111 !important; } html.route-product-product:not(.popup) .product_blocks.product_blocks-image .rb-product-actions .btn, html.route-product-product:not(.popup) .product_blocks.product_blocks-image .rb-product-actions .btn .btn-text, html.route-product-product:not(.popup) .product-blocks-popup-btn, html.route-product-product:not(.popup) .product-blocks-popup-btn .btn-text { color: #444 !important; } html.desktop.route-product-product:not(.popup) body #content .product-info .product-blocks button.btn.product-blocks-popup-btn, html.desktop.route-product-product:not(.popup) body #content .product-info .product-blocks button.btn.product-blocks-popup-btn *, html.desktop.route-product-product:not(.popup) body #content .product-info .product-blocks button.btn.product-blocks-popup-btn::before, html.route-product-product:not(.popup) body #content .product-info .product_blocks.product_blocks-image .product-blocks-popup-btn, html.route-product-product:not(.popup) body #content .product-info .product_blocks.product_blocks-image .product-blocks-popup-btn *, html.route-product-product:not(.popup) body #content .product-info .product_blocks.product_blocks-image .product-blocks-popup-btn::before { color: #444 !important; } html.route-product-product:not(.popup) .module-side_products .module-body, html.route-product-product:not(.popup) .module-side_products .tab-content, html.route-product-product:not(.popup) .module-side_products .module-item, html.route-product-product:not(.popup) .module-side_products .side-products, html.route-product-product:not(.popup) .module-side_products .auto-grid-items, html.route-product-product:not(.popup) .module-side_products .product-layout, html.route-product-product:not(.popup) .module-side_products .side-product, html.route-product-product:not(.popup) .module-side_products .side-product .caption, html.route-product-product:not(.popup) .module-side_products .side-product .image { background: var(--rb-surface-bg) !important; color: var(--rb-text) !important; } html.route-product-product:not(.popup) .module-side_products .side-product .name a, html.route-product-product:not(.popup) .module-side_products .side-product .price, html.route-product-product:not(.popup) .module-side_products .side-product .price *, html.route-product-product:not(.popup) .module-side_products .btn-wishlist, html.route-product-product:not(.popup) .module-side_products .btn-compare, html.route-product-product:not(.popup) .module-side_products .btn-wishlist::before, html.route-product-product:not(.popup) .module-side_products .btn-compare::before, html.route-product-product:not(.popup) .module-side_products .btn-wishlist *, html.route-product-product:not(.popup) .module-side_products .btn-compare * { color: var(--rb-text) !important; } @media (min-width: 992px) { .desktop-header-active .header-classic, .desktop-header-active .header-classic .header, .desktop-header-active .header-classic .mid-bar, .desktop-header-active .header-classic .mid-bar::before { background: #191b1b !important; } .desktop-header-active .header-classic .top-bar { display: none !important; } .desktop-header-active .header-classic .mid-bar { height: 92px !important; min-height: 92px !important; display: grid !important; grid-template-columns: minmax(360px, 1fr) 250px minmax(360px, 1fr) !important; column-gap: 34px !important; align-items: center !important; padding-left: max(72px, calc((100vw - 1480px) / 2)) !important; padding-right: max(72px, calc((100vw - 1480px) / 2)) !important; direction: ltr !important; box-sizing: border-box !important; } .desktop-header-active .header-classic .desktop-logo-wrapper { grid-column: 2 !important; width: 250px !important; min-width: 250px !important; position: static !important; transform: none !important; justify-content: center !important; } .desktop-header-active .header-classic #logo, .desktop-header-active .header-classic #logo a { width: 250px !important; max-width: 250px !important; justify-content: center !important; } .desktop-header-active .header-classic #logo img { max-width: 230px !important; max-height: 76px !important; margin: 0 !important; object-fit: contain !important; } .desktop-header-active .header-classic .desktop-search-wrapper { grid-column: 3 !important; width: min(520px, 100%) !important; min-width: 320px !important; justify-self: end !important; justify-content: stretch !important; margin: 0 !important; direction: rtl !important; } .desktop-header-active .header-classic .full-search #search, .desktop-header-active .header-classic .full-search #search > .dropdown-menu, .desktop-header-active .header-classic .header-search { width: 100% !important; height: 42px !important; } .desktop-header-active .header-classic .header-search { display: flex !important; align-items: center !important; background: #f6f6f6 !important; border: 1px solid #d7d7d7 !important; border-radius: 3px !important; overflow: hidden !important; box-shadow: none !important; } .desktop-header-active .header-classic .header-search input { height: 40px !important; background: #f6f6f6 !important; border: 0 !important; border-radius: 0 !important; color: #333 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 40px !important; padding: 0 16px !important; text-align: right !important; letter-spacing: 0 !important; box-shadow: none !important; } .desktop-header-active .header-classic .header-search input::placeholder { color: #777 !important; opacity: 1 !important; } .desktop-header-active .header-classic .header-search .search-button, .desktop-header-active .header-classic .header-search > button { width: 46px !important; min-width: 46px !important; height: 40px !important; background: #f6f6f6 !important; color: #9f9f9f !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .desktop-header-active .header-classic .classic-cart-wrapper { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; justify-self: start !important; justify-content: flex-start !important; gap: 10px !important; margin: 0 !important; direction: rtl !important; } .desktop-header-active .header-classic .classic-cart-wrapper .top-menu.secondary-menu { margin: 0 !important; } .desktop-header-active .header-classic .classic-cart-wrapper .top-menu.secondary-menu > .top-menu, .desktop-header-active .header-classic .classic-cart-wrapper .top-menu.secondary-menu .j-menu { height: 58px !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; } .desktop-header-active .header-classic .classic-cart-wrapper .top-menu.secondary-menu .j-menu > li > a { height: 58px !important; min-width: 58px !important; padding: 0 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; color: #fff !important; border-inline-start: 1px solid rgba(255, 255, 255, .28) !important; text-decoration: none !important; line-height: 1.1 !important; letter-spacing: 0 !important; } .desktop-header-active .header-classic .classic-cart-wrapper .top-menu.secondary-menu .links-text { color: #fff !important; font-size: 11px !important; font-weight: 800 !important; max-width: 68px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .desktop-header-active .header-classic .classic-cart-wrapper .top-menu.secondary-menu .count-badge { top: 6px !important; inset-inline-end: 6px !important; background: #f60808 !important; color: #fff !important; } .desktop-header-active .header-classic .desktop-cart-wrapper #cart > a { height: 44px !important; min-height: 44px !important; border: 1px solid rgba(255, 255, 255, .55) !important; border-radius: 24px !important; color: #fff !important; padding: 0 14px !important; background: transparent !important; box-shadow: none !important; } .desktop-header-active .header-classic .desktop-cart-wrapper #cart > a > em { width: 34px !important; min-width: 34px !important; color: #fff !important; } .desktop-header-active .header-classic #cart-total { padding: 0 6px !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; max-width: 200px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .desktop-header-active .header-classic #cart-total .cart-title { display: none !important; } .desktop-header-active .header-classic #cart-items { background: #f60808 !important; color: #fff !important; } .desktop-main-menu-wrapper.menu-bar, .desktop-main-menu-wrapper.menu-bar::after { height: 52px !important; min-height: 52px !important; background: #f60808 !important; } .desktop-main-menu-wrapper.menu-bar { z-index: 100 !important; padding: 0 !important; box-shadow: none !important; } .desktop-main-menu-wrapper.menu-bar > .main-menu-1, .desktop-main-menu-wrapper.menu-bar #main-menu, .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu { height: 52px !important; } .desktop-main-menu-wrapper.menu-bar .main-menu-1 { justify-content: center !important; } .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu { justify-content: center !important; flex-wrap: nowrap !important; width: min(1480px, calc(100vw - 48px)) !important; margin: 0 auto !important; direction: rtl !important; } .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item { height: 52px !important; padding: 0 !important; } .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item > a { height: 52px !important; padding: 0 18px !important; color: #fff !important; font-size: 15px !important; font-weight: 900 !important; line-height: 52px !important; text-decoration: none !important; letter-spacing: 0 !important; border: 0 !important; background: transparent !important; } .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item > a > .links-text { color: inherit !important; max-width: 190px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; text-decoration: none !important; } .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item:hover > a, .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item.open > a, .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item.active > a, .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item.panel-active > a { background: #c70000 !important; color: #fff !important; } .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item > a::after { border-left-color: currentColor !important; opacity: .9 !important; } header .main-menu .mega-menu > .j-dropdown { padding-top: 0 !important; } header .main-menu .mega-menu .mega-menu-content { width: min(1280px, calc(100vw - 180px)) !important; margin: 0 auto !important; padding: 30px 34px !important; background: #fff !important; color: #333 !important; border-radius: 0 !important; box-shadow: 0 18px 38px rgba(0, 0, 0, .18) !important; direction: rtl !important; } header .main-menu .mega-menu .mega-menu-content.rb-roadbiker-mega { min-height: 360px !important; padding: 28px 34px 30px !important; background: #fff !important; color: #333 !important; overflow: visible !important; } .rb-roadbiker-mega .rb-mega-heading { display: none !important; } .rb-roadbiker-mega .rb-mega-columns { display: grid !important; grid-template-columns: .9fr 1fr 1.1fr 1.1fr !important; gap: 0 !important; min-height: 300px !important; direction: rtl !important; } .rb-roadbiker-mega .rb-mega-col { min-width: 0 !important; padding: 0 26px !important; border-left: 1px solid #e8e8e8 !important; } .rb-roadbiker-mega .rb-mega-col:first-child { padding-right: 0 !important; } .rb-roadbiker-mega .rb-mega-col:last-child { border-left: 0 !important; padding-left: 0 !important; } .rb-roadbiker-mega .rb-mega-title { display: block !important; margin: 0 0 18px !important; color: #666 !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.2 !important; text-align: center !important; text-transform: none !important; letter-spacing: 0 !important; } .rb-roadbiker-mega .rb-mega-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 11px !important; } .rb-roadbiker-mega .rb-mega-list li, .rb-roadbiker-mega .rb-mega-list a { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } .rb-roadbiker-mega .rb-mega-list a { display: grid !important; grid-template-columns: 31px minmax(0, 1fr) !important; gap: 10px !important; align-items: center !important; color: #333 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; text-decoration: none !important; min-height: 31px !important; direction: rtl !important; } .rb-roadbiker-mega .rb-mega-list a:hover, .rb-roadbiker-mega .rb-mega-brand-card:hover { color: #f60808 !important; text-decoration: none !important; } .rb-roadbiker-mega .rb-mega-icon { width: 31px !important; height: 31px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .rb-roadbiker-mega .rb-mega-icon img { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; object-fit: contain !important; margin: 0 !important; } .rb-roadbiker-mega .rb-mega-dot { width: 22px !important; height: 22px !important; display: inline-block !important; border: 2px solid #f60808 !important; border-radius: 50% !important; background: #fff !important; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px #222 !important; } .rb-roadbiker-mega .rb-mega-brand-grid { display: grid !important; grid-template-columns: repeat(2, 72px) !important; gap: 14px 18px !important; justify-content: center !important; } .rb-roadbiker-mega .rb-mega-brand-card { width: 72px !important; height: 66px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 3px !important; padding: 6px !important; border: 1px solid #d5d5d5 !important; border-radius: 8px !important; background: #fff !important; color: #333 !important; text-decoration: none !important; overflow: hidden !important; } .rb-roadbiker-mega .rb-mega-brand-card img { width: 50px !important; height: 34px !important; max-width: 50px !important; max-height: 34px !important; object-fit: contain !important; margin: 0 !important; } .rb-roadbiker-mega .rb-mega-brand-card span { max-width: 58px !important; color: inherit !important; font-size: 10px !important; font-weight: 900 !important; line-height: 1.05 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } header .main-menu .mega-menu .mega-menu-content .category-grid .auto-grid-items { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 20px 18px !important; overflow: visible !important; } header .main-menu .mega-menu .mega-menu-content .category-layout, header .main-menu .mega-menu .mega-menu-content .category-thumb { min-width: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; text-align: center !important; } header .main-menu .mega-menu .mega-menu-content .category-thumb .image { margin: 0 auto 10px !important; } header .main-menu .mega-menu .mega-menu-content .category-thumb .image a { width: 74px !important; height: 74px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid #d8d8d8 !important; border-radius: 8px !important; background: #fff !important; overflow: hidden !important; } header .main-menu .mega-menu .mega-menu-content .category-thumb .image img { width: 66px !important; height: 66px !important; max-width: 66px !important; max-height: 66px !important; object-fit: contain !important; margin: 0 !important; } header .main-menu .mega-menu .mega-menu-content .category-thumb .caption, header .main-menu .mega-menu .mega-menu-content .category-thumb .name { display: block !important; padding: 0 !important; margin: 0 !important; } header .main-menu .mega-menu .mega-menu-content .category-thumb .name a { color: #333 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.35 !important; text-decoration: none !important; letter-spacing: 0 !important; } header .main-menu .mega-menu .mega-menu-content .category-thumb .product-count, header .main-menu .mega-menu .mega-menu-content .category-thumb .description { display: none !important; } } @media (max-width: 991px) { .mobile-header, .mobile-header .mobile-top-bar, .mobile-header .mobile-bar { background: #191b1b !important; } .mobile-header .mobile-bar { border-bottom: 4px solid #f60808 !important; } .mobile-header .header-search { background: #f6f6f6 !important; border-radius: 3px !important; overflow: hidden !important; } .mobile-header .header-search input { background: #f6f6f6 !important; color: #333 !important; text-align: right !important; letter-spacing: 0 !important; } } html.route-common-home body, html.route-common-home .site-wrapper { background: var(--rb-page-bg) !important; } html.route-common-home .grid-row-top-1 > .grid-cols-wrapper > .grid-cols, html.route-common-home .grid-row-top-1 .grid-items, html.route-common-home .grid-row-top-2 > .grid-cols-wrapper > .grid-cols, html.route-common-home .grid-row-top-2 .grid-items { padding-top: 0 !important; padding-bottom: 0 !important; } html.route-common-home .grid-row-top-1, html.route-common-home .grid-row-top-1 > .row-bg, html.route-common-home .grid-row-top-1 > .grid-cols-wrapper > .grid-cols { background: #070808 !important; } @media (min-width: 992px) { html.route-common-home.rb-hero-enhanced .grid-row-top-1 { height: 398px !important; min-height: 398px !important; max-height: 398px !important; overflow: hidden !important; background: #151818 !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 > .grid-cols-wrapper, html.route-common-home.rb-hero-enhanced .grid-row-top-1 > .grid-cols-wrapper > .grid-cols, html.route-common-home.rb-hero-enhanced .grid-row-top-1 .grid-col-top-1-1, html.route-common-home.rb-hero-enhanced .grid-row-top-1 .grid-items, html.route-common-home.rb-hero-enhanced .grid-row-top-1 .grid-module-top-1-1-1 { width: 100% !important; max-width: none !important; height: 398px !important; min-height: 398px !important; max-height: 398px !important; margin: 0 !important; padding: 0 !important; position: relative !important; display: block !important; overflow: hidden !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 .grid-module-top-1-1-1 { left: calc(50% - 50vw) !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] { position: absolute !important; top: 0 !important; right: 0 !important; left: 0 !important; /* filter moved below the hero */ width: auto !important; height: 398px !important; min-height: 398px !important; max-height: 398px !important; margin: 0 !important; padding: 0 !important; z-index: 2 !important; overflow: hidden !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .swiper-slide { background: #050505 !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content::before, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content-image::before, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content::after, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content-image::after { display: none !important; opacity: 0 !important; background: transparent !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content-image { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-color: #050505 !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slider-wrapper, /* .module-item (the slide) deliberately excluded: forcing width:100% !important overrode Swiper's inline per-slide width, which pinned the hero to one slide per view regardless of slidesPerView. */ html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .swiper-container, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .swiper-wrapper, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content-image { width: 100% !important; height: 398px !important; min-height: 398px !important; max-height: 398px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Custom paint layer disabled: the real slide image is visible again, so Swiper's own two-up rendering shows through (slidesPerView: 2). */ html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content-image img { width: 100% !important; height: 398px !important; min-height: 398px !important; max-height: 398px !important; object-fit: cover !important; object-position: center center !important; display: block !important; background: transparent !important; opacity: 1 !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .slide-content-image .rb-hero-slide-paint { position: absolute !important; inset: 0 !important; width: 100% !important; height: 398px !important; min-height: 398px !important; max-height: 398px !important; object-fit: cover !important; object-position: center center !important; display: block !important; opacity: 1 !important; z-index: 4 !important; pointer-events: none !important; background: transparent !important; } html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .swiper-buttons, html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] .swiper-pagination-wrapper { z-index: 8 !important; } /* :not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) — this hide rule targets whatever generic row sits at index top-2; the imported Journal3 HOME modules must stay visible. */ html.route-common-home.rb-hero-enhanced .grid-row-top-2:not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) { display: none !important; } } @media (min-width: 1860px) { html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] { right: 0 !important; /* reels moved to the Collection List row */ } } html.route-common-home .module-marquee-981 { height: 53px !important; min-height: 53px !important; background: #333c3d !important; overflow: hidden !important; } html.route-common-home.rb-home-enhanced .grid-row-top-3:not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) { display: none !important; } /* --- RB_ILM_HOME_MODULES_START (2026-07-26) ------------------------------ The homepage now shows the imported Journal3 modules HOME Collection List (1217) and HOME New Arrivals (1221) in place of the enhancer's own best-sellers + promo banner block, so that block must not render too. */ html.route-common-home .rb-champion-lower-home .rb-home-banner-row { display: none !important; } /* --- RB_ILM_HOME_MODULES_END --- */ html.route-common-home.rb-home-enhanced #top .grid-row:not(.grid-row-top-1):not(.grid-row-top-2):not(.grid-row-top-3):not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) > .row-bg, html.route-common-home.rb-home-enhanced #top .grid-row:not(.grid-row-top-1):not(.grid-row-top-2):not(.grid-row-top-3):not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) > .grid-cols-wrapper > .grid-cols { background: var(--rb-page-bg) !important; } @media (min-width: 992px) { html.route-common-home.rb-home-enhanced #top .grid-row:not(.grid-row-top-1):not(.grid-row-top-2):not(.grid-row-top-3):not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) > .grid-cols-wrapper { width: min(1280px, calc(100vw - 48px)) !important; max-width: min(1280px, calc(100vw - 48px)) !important; margin-left: auto !important; margin-right: auto !important; } html.route-common-home.rb-home-enhanced #top .grid-row:not(.grid-row-top-1):not(.grid-row-top-2):not(.grid-row-top-3):not(.rb-imported-ilm-home):not(:has(.ilm-coll-module)):not(:has(.rb-new-arrivals)) > .grid-cols-wrapper > .grid-cols { width: 100% !important; max-width: 100% !important; } html.route-common-home.rb-home-enhanced #top .module-banners_grid { background: #fff !important; overflow: hidden !important; } html.route-common-home.rb-home-enhanced #top .module-banners_grid .module-item, html.route-common-home.rb-home-enhanced #top .module-banners_grid .slide-content-image, html.route-common-home.rb-home-enhanced #top .module-banners_grid .slide-content-image a { border-radius: 0 !important; } html.route-common-home.rb-home-enhanced #top .module-banners_grid img { display: block !important; width: 100% !important; object-fit: cover !important; } html.route-common-home.rb-home-enhanced #top .module-products { border-radius: 0 !important; box-shadow: none !important; } } .rb-champion-home-panel { width: min(1280px, calc(100vw - 48px)); margin: 36px auto 30px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; direction: ltr; box-sizing: border-box; } .rb-quick-search-panel { display: none; } @media (min-width: 992px) { .rb-quick-search-panel { width: 300px; height: 398px; position: absolute; top: 0; left: max(24px, calc(50vw - 640px)); z-index: 9; display: grid; grid-template-rows: 45px repeat(4, 58px) 50px; gap: 11px; padding: 19px 25px 18px; background: #191b1b; color: #fff; direction: rtl; overflow: visible; box-sizing: border-box; } .rb-quick-search-panel::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: #070808; z-index: -1; } .rb-quick-search-panel h2 { margin: 0; color: #fff; font-size: 21px; font-weight: 900; line-height: 45px; text-align: center; letter-spacing: 0; } .rb-quick-field { position: relative; min-width: 0; z-index: 1; } .rb-quick-field.is-open { z-index: 40; } .rb-quick-toggle { width: 100%; height: 49px; padding: 0 16px 0 44px; display: flex; align-items: center; justify-content: flex-start; background: #f6f6f6; border: 0; border-radius: 4px; color: #444; font-size: 14px; font-weight: 700; line-height: 49px; text-align: right; letter-spacing: 0; cursor: pointer; box-shadow: none; position: relative; } .rb-quick-toggle::after { content: "\f107"; font-family: FontAwesome, sans-serif; width: 22px; height: 22px; position: absolute; left: 12px; top: 50%; margin-top: -11px; display: flex; align-items: center; justify-content: center; color: #f60808; border: 1px solid #f60808; border-radius: 50%; font-size: 12px; line-height: 1; } .rb-quick-toggle span { min-width: 0; max-width: 100%; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rb-quick-menu { display: none; position: absolute; left: 0; right: 0; top: 51px; max-height: 190px; overflow: auto; background: #fff; border: 1px solid #e1e1e1; box-shadow: 0 14px 28px rgba(0, 0, 0, .22); z-index: 30; box-sizing: border-box; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .rb-quick-menu.rb-quick-menu-floating { display: block !important; position: fixed !important; right: auto !important; bottom: auto !important; max-width: calc(100vw - 16px); overflow-x: hidden; overflow-y: auto; z-index: 2147483000 !important; } .rb-quick-field[data-field="department"] .rb-quick-menu, .rb-quick-field[data-field="style"] .rb-quick-menu { top: auto; bottom: 51px; } .rb-quick-field.is-open .rb-quick-menu { display: block; } .rb-quick-option { width: 100%; min-height: 36px; padding: 8px 14px; display: block; background: #fff; border: 0; border-bottom: 1px solid #ededed; color: #333; font-size: 13px; font-weight: 700; line-height: 1.25; text-align: right; cursor: pointer; } .rb-quick-option:hover { background: #f60808; color: #fff; } .rb-quick-submit { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #f60808; border: 0; border-radius: 0; color: #fff; font-size: 14px; font-weight: 900; line-height: 1; letter-spacing: 0; cursor: pointer; } .rb-quick-submit::before { content: "\f002"; font-family: FontAwesome, sans-serif; font-size: 14px; } .rb-quick-submit:hover { background: #d90000; } } .rb-hero-reels-card { display: none; } @media (min-width: 1860px) { html.route-common-home.rb-hero-enhanced .rb-hero-reels-card { width: 250px; height: 398px; display: block; position: absolute; top: 0; left: max(24px, calc(50vw - 910px)); z-index: 10; overflow: hidden; background: #fff; color: #222; box-shadow: 0 12px 26px rgba(0, 0, 0, .22); box-sizing: border-box; } .rb-hero-reels-title { height: 28px; margin: 0; padding: 0 12px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: transparent; color: #fff; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); pointer-events: none; } .rb-hero-reels-player { width: 100%; height: 398px; display: block; overflow: hidden; background: #050505; position: relative; } .rb-hero-reels-video { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center center; background: #000; } .rb-hero-reels-nav { height: 34px; position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); color: #fff; box-sizing: border-box; } .rb-hero-reels-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; cursor: pointer; padding: 0; } .rb-hero-reels-btn::before { font-family: FontAwesome, sans-serif; font-size: 14px; line-height: 1; } .rb-hero-reels-prev::before { content: "\f104"; } .rb-hero-reels-next::before { content: "\f105"; } .rb-hero-reels-count { min-width: 34px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0, 0, 0, .42); font-size: 11px; font-weight: 800; line-height: 1; direction: ltr; } } .rb-home-best, .rb-home-cats { min-width: 0; background: #fff; color: #242424; direction: rtl; box-sizing: border-box; } .rb-home-red-title { height: 48px; margin: 0; padding: 0 20px; display: flex; align-items: center; justify-content: flex-start; background: #f60808; color: #fff; font-size: 18px; font-weight: 900; line-height: 1; letter-spacing: 0; } .rb-home-best-list { background: #fff; } .rb-home-best-stage { width: 100%; overflow: hidden; background: #fff; direction: ltr; cursor: grab; touch-action: pan-y; } .rb-home-best-stage:active { cursor: grabbing; } .rb-home-best-stage .rb-home-best-list { display: flex; width: 100%; background: #fff; direction: ltr; transition: transform .28s ease; will-change: transform; } .rb-home-best-page { flex: 0 0 100%; min-width: 100%; background: #fff; direction: rtl; } .rb-home-best-dots.owl-dots { height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #ececec; background: #fff; direction: ltr; } .rb-home-best-dots .owl-dot { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; padding: 0; cursor: pointer; } .rb-home-best-dots .owl-dot span { width: 10px; height: 10px; display: block; border-radius: 999px; background: #d2d2d2; } .rb-home-best-dots .owl-dot.active span, .rb-home-best-dots .owl-dot:hover span { background: #f60808; } .rb-home-best-item { min-height: 112px; display: grid; grid-template-columns: 92px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 15px 18px; border-bottom: 1px solid #e2e2e2; direction: ltr; box-sizing: border-box; } .rb-home-best-image { width: 92px; height: 82px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; } .rb-home-best-image img { width: 92px; height: 82px; object-fit: contain; display: block; } .rb-home-best-meta { min-width: 0; display: grid; gap: 4px; direction: rtl; text-align: right; } .rb-home-best-name { color: #333; font-size: 13px; font-weight: 800; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rb-home-best-name:hover { color: #f60808; text-decoration: none; } .rb-home-stars::before { content: "\2605\2605\2605\2605\2605"; color: #ffb800; font-size: 14px; line-height: 1; letter-spacing: 0; } .rb-home-price { color: #222; font-size: 16px; font-weight: 900; line-height: 1.1; direction: ltr; unicode-bidi: isolate; } .rb-home-price::before { content: "\e900"; font-family: "marvel-saudi-riyal-symbol" !important; margin-inline-end: 4px; font-size: .95em; font-style: normal; font-weight: normal; line-height: 1; } .rb-home-cart { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0; background: #f8f8f8; color: #f60808; border-radius: 0; cursor: pointer; padding: 0; position: relative; z-index: 3; pointer-events: auto; } .rb-home-cart::before { content: "\f07a"; font-family: FontAwesome, sans-serif; font-size: 14px; line-height: 1; } .rb-home-cart:hover { background: #f60808; border-color: #f60808; color: #fff; } .rb-home-cart.is-loading, .rb-row-cart.is-loading { opacity: .55; pointer-events: none; } .rb-home-cats { min-height: 220px; padding: 0 20px 20px; } .rb-home-section-title { height: 48px; margin: 0; display: flex; align-items: center; justify-content: flex-start; color: #242424; direction: ltr; font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: 0; } .rb-home-section-title::before { content: "\00bb\00bb\00bb"; margin-right: 10px; color: #f60808; font-size: 25px; font-weight: 900; } .rb-home-cat-grid { display: flex; gap: 20px; direction: ltr; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .rb-home-cat-grid::-webkit-scrollbar { display: none; } .rb-home-cat-card { flex: 0 0 calc((100% - 80px) / 5); min-width: calc((100% - 80px) / 5); display: grid; grid-template-rows: 124px 48px; background: #f4f4f4; color: #333; text-decoration: none; overflow: hidden; scroll-snap-align: start; } .rb-home-cat-image { display: block; width: 100%; height: 124px; overflow: hidden; background: #ddd; } .rb-home-cat-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .rb-home-cat-card strong { min-width: 0; height: 48px; padding: 0 8px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 13px; font-weight: 900; line-height: 1.2; text-align: center; direction: rtl; overflow: hidden; } .rb-home-cat-card:hover strong { color: #f60808; } html.route-common-home.rb-home-enhanced .module-products { background: #fff !important; padding: 18px 18px 24px !important; box-sizing: border-box !important; } html.route-common-home.rb-home-enhanced .module-products .product-thumb { background: #fff !important; } html.route-common-home.rb-home-enhanced .module-products .name a, html.route-common-home.rb-home-enhanced .module-products .price, html.route-common-home.rb-home-enhanced .module-products .price-normal { color: #222 !important; } html.route-common-home.rb-home-full-enhanced .rb-home-source-hidden, html.route-common-home.rb-home-full-enhanced .rb-home-source-row-hidden { display: none !important; } html.route-common-home.rb-home-full-enhanced .rb-champion-home-panel { grid-template-rows: auto auto; row-gap: 24px; } html.route-common-home.rb-home-full-enhanced .rb-home-best { grid-column: 1; grid-row: 1 / span 2; } html.route-common-home.rb-home-full-enhanced .rb-home-cats { grid-column: 2; grid-row: 1; } .rb-home-inline-promo { grid-column: 2; grid-row: 2; min-width: 0; height: 212px; background: #111; overflow: hidden; } .rb-home-promo-link { width: 100%; height: 212px; display: block; background: #111; } .rb-home-promo-link img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; } .rb-champion-lower-home { width: min(1280px, calc(100vw - 48px)); margin: 0 auto; direction: ltr; box-sizing: border-box; } .rb-product-showcase { margin: 28px 0 0; color: #242424; } .rb-row-heading { height: 42px; display: flex; align-items: center; justify-content: space-between; direction: ltr; } @media (min-width: 992px) { .rb-row-heading { width: calc(100% - 255px); margin-left: 255px; } } .rb-row-heading h2 { margin: 0; display: flex; align-items: center; color: #252525; font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: 0; text-transform: none; direction: rtl; } .rb-row-heading h2::before { content: "\00bb\00bb\00bb"; margin-right: 10px; color: #f60808; font-size: 25px; font-weight: 900; direction: ltr; } .rb-row-controls { display: flex; align-items: center; gap: 4px; } .rb-row-arrow { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: #fff; color: #f60808; cursor: pointer; padding: 0; } .rb-row-arrow::before { font-family: FontAwesome, sans-serif; font-size: 18px; line-height: 1; } .rb-row-prev::before { content: "\f104"; } .rb-row-next::before { content: "\f105"; } .rb-row-arrow:hover { background: #f60808; color: #fff; } .rb-row-body { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 20px; background: #fff; min-height: 356px; padding: 0; box-sizing: border-box; } .rb-row-feature { width: 235px; height: 356px; display: block; background: #111; overflow: hidden; } .rb-row-feature img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .rb-row-feature img[src*="8.39.34%20PM-410x545w"], .rb-row-feature img[src*="8.49.41%20PM-410x545w"] { object-fit: fill; } .rb-row-strip { min-width: 0; height: 356px; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; background: #fff; } .rb-row-strip::-webkit-scrollbar { display: none; } .rb-row-product { position: relative; flex: 0 0 calc((100% - 42px) / 4); min-width: 0; height: 356px; scroll-snap-align: start; display: grid; grid-template-rows: 184px 44px 16px 30px 34px; align-content: start; gap: 5px; padding: 13px 14px 12px; border: 1px solid #e3e3e3; background: #fff; color: #222; direction: rtl; text-align: center; box-sizing: border-box; } .rb-row-product-image { width: 100%; height: 184px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; } .rb-row-product-image img { width: 100%; height: 180px; object-fit: contain; display: block; } .rb-row-product-name { min-width: 0; color: #222; font-size: 12px; font-weight: 800; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rb-row-product-name:hover { color: #f60808; text-decoration: none; } .rb-row-stars::before { content: "\2605\2605\2605\2605\2605"; color: #ffb800; font-size: 12px; line-height: 1; } .rb-row-price-wrap { min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 7px; color: #222; direction: rtl; line-height: 1.1; } .rb-row-price-wrap strong { color: #222; font-size: 14px; font-weight: 900; direction: ltr; unicode-bidi: isolate; } .rb-row-price-wrap strong::before { content: "\e900"; font-family: "marvel-saudi-riyal-symbol" !important; margin-inline-end: 4px; font-size: .95em; font-style: normal; font-weight: normal; line-height: 1; } .rb-row-price-wrap del { color: #aaa; font-size: 12px; font-weight: 700; direction: ltr; unicode-bidi: isolate; } .rb-row-price-wrap del::before { content: "\e900"; font-family: "marvel-saudi-riyal-symbol" !important; margin-inline-end: 3px; font-size: .95em; font-style: normal; font-weight: normal; line-height: 1; } .price, .price-new, .price-old, .price-normal { direction: ltr; unicode-bidi: isolate; } .rb-row-sale { position: absolute; top: 10px; right: 10px; min-width: 28px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: #f60808; color: #fff; font-size: 10px; font-weight: 900; z-index: 2; } .rb-row-cart { width: 34px; height: 30px; justify-self: center; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dedede; border-radius: 0; background: #f8f8f8; color: #f60808; cursor: pointer; padding: 0; position: relative; z-index: 3; pointer-events: auto; } .rb-row-cart::before { content: "\f07a"; font-family: FontAwesome, sans-serif; font-size: 14px; line-height: 1; } .rb-row-cart:hover { background: #f60808; border-color: #f60808; color: #fff; } .rb-home-gallery, .rb-home-terms { margin: 20px 0 0; background: #fff; color: #242424; direction: rtl; } .rb-home-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 18px; direction: ltr; } .rb-home-gallery-card { height: 185px; display: block; overflow: hidden; background: #111; } .rb-home-gallery-card img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .rb-home-term-list { min-height: 58px; padding: 16px 18px 18px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; background: #fff; } .rb-home-term-list a { display: inline-flex; align-items: center; min-height: 27px; padding: 0 12px; background: #f4f4f4; color: #555; border: 1px solid #e0e0e0; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; } .rb-home-term-list a:hover { color: #fff; border-color: #f60808; background: #f60808; text-decoration: none; } html.route-common-home.rb-home-full-enhanced .module-manufacturers-588 { width: min(1280px, calc(100vw - 48px)) !important; margin: 20px auto 0 !important; padding: 16px 18px !important; position: relative !important; left: calc(max(24px, (100vw - 1280px) / 2) - max(0px, (100vw - 1470px) / 2)) !important; background: #fff !important; box-sizing: border-box !important; } html.route-common-home.rb-home-full-enhanced .module-manufacturers-588 .module-body, html.route-common-home.rb-home-full-enhanced .module-manufacturers-588 .swiper-container, html.route-common-home.rb-home-full-enhanced .module-manufacturers-588 .swiper-wrapper { background: #fff !important; } html.route-common-home.rb-home-full-enhanced .module-manufacturers-588 .manufacturer-thumb { border: 1px solid #e2e2e2 !important; border-radius: 3px !important; background: #fff !important; min-height: 58px !important; } html.route-common-home.rb-home-full-enhanced footer { margin-top: 34px !important; background: #171919 !important; color: #d8d8d8 !important; } html.route-common-home.rb-home-full-enhanced footer > .grid-rows > .grid-row-4, html.route-common-home.rb-home-full-enhanced footer > .grid-rows > .grid-row-5 { background: #171919 !important; } html.route-common-home.rb-home-full-enhanced footer > .grid-rows > .grid-row-4 > .row-bg, html.route-common-home.rb-home-full-enhanced footer > .grid-rows > .grid-row-5 > .row-bg { background: #171919 !important; } html.route-common-home.rb-home-full-enhanced footer a, html.route-common-home.rb-home-full-enhanced footer .links-text, html.route-common-home.rb-home-full-enhanced footer .module-description, html.route-common-home.rb-home-full-enhanced footer .info-block-title, html.route-common-home.rb-home-full-enhanced footer .info-block-text { color: #d8d8d8 !important; } html.route-common-home.rb-home-full-enhanced footer .grid-cols-wrapper { width: min(1280px, calc(100vw - 48px)) !important; max-width: min(1280px, calc(100vw - 48px)) !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 991px) { .rb-champion-home-panel { width: calc(100vw - 24px); margin: 22px auto; grid-template-columns: 1fr; gap: 18px; } .rb-home-cat-grid { gap: 12px; } .rb-home-cat-card { flex-basis: calc((100% - 12px) / 2); min-width: calc((100% - 12px) / 2); grid-template-rows: 110px 44px; } .rb-home-cat-image { height: 110px; } html.route-common-home.rb-home-full-enhanced .rb-home-best, html.route-common-home.rb-home-full-enhanced .rb-home-cats, .rb-home-inline-promo { grid-column: 1; grid-row: auto; } .rb-champion-lower-home { width: calc(100vw - 24px); } .rb-row-body { grid-template-columns: 1fr; gap: 12px; } .rb-row-heading { width: 100%; margin-left: 0; } .rb-row-feature { width: 100%; height: 170px; } .rb-row-strip { height: 300px; } .rb-row-product { flex-basis: 210px; height: 300px; grid-template-rows: 150px 42px 16px 30px 34px; } .rb-home-gallery-grid { grid-template-columns: 1fr; } html.route-common-home.rb-home-full-enhanced .module-manufacturers-588 { width: calc(100vw - 24px) !important; } } /* Homepage yellow accent pass. Keep cart and discount/sale cues red. */ html.route-common-home .desktop-main-menu-wrapper.menu-bar, html.route-common-home .desktop-main-menu-wrapper.menu-bar::after, html.route-common-home .rb-home-red-title, html.route-common-home .rb-quick-submit { background: var(--rb-home-accent) !important; color: var(--rb-home-accent-ink) !important; } html.route-common-home .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item > a, html.route-common-home .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item > a > .links-text, html.route-common-home .rb-home-red-title strong { color: var(--rb-home-accent-ink) !important; } html.route-common-home .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item:hover > a, html.route-common-home .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item.open > a, html.route-common-home .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item.active > a, html.route-common-home .desktop-main-menu-wrapper.menu-bar #main-menu > .j-menu > .main-menu-item.panel-active > a, html.route-common-home .rb-quick-option:hover, html.route-common-home .rb-quick-submit:hover, html.route-common-home .rb-row-arrow:hover, html.route-common-home .rb-home-term-list a:hover { background: var(--rb-home-accent-hover) !important; border-color: var(--rb-home-accent-hover) !important; color: var(--rb-home-accent-ink) !important; } html.route-common-home .rb-roadbiker-mega .rb-mega-list a:hover, html.route-common-home .rb-roadbiker-mega .rb-mega-brand-card:hover, html.route-common-home .rb-quick-toggle::after, html.route-common-home .rb-home-best-dots .owl-dot.active span, html.route-common-home .rb-home-best-dots .owl-dot:hover span, html.route-common-home .rb-home-best-name:hover, html.route-common-home .rb-home-section-title::before, html.route-common-home .rb-home-cat-card:hover strong, html.route-common-home .rb-row-heading h2::before, html.route-common-home .rb-row-arrow, html.route-common-home .rb-row-product-name:hover { color: var(--rb-home-accent) !important; } html.route-common-home .rb-roadbiker-mega .rb-mega-icon, html.route-common-home .rb-quick-toggle::after { border-color: var(--rb-home-accent) !important; } html.route-common-home .rb-home-best-dots .owl-dot.active span, html.route-common-home .rb-home-best-dots .owl-dot:hover span { background: var(--rb-home-accent) !important; } html.route-common-home .mobile-header .mobile-bar { border-bottom-color: var(--rb-home-accent) !important; } .rb-home-journal-source-assets { display: none !important; } html.route-common-home.rb-hero-enhanced .rb-home-showcase > .rb-home-rail-right { display: none !important; } /* The home panel is kept as an empty sentinel for initFullHome(); with BUILD_HOME_PANEL = false it must not occupy any space. */ html.route-common-home .rb-champion-home-panel:empty { display: none !important; } /* --- RB_ILM_HOME_MODULE_ORDER (2026-07-26) ------------------------------- #top .grid-rows is a flex column and every child defaults to order:0, so the enhancer's generated .rb-champion-lower-home — injected early in the DOM — rendered ABOVE the imported Journal3 HOME modules, pushing them ~2600px down the page. Put the hero first, then the two HOME modules, then the generated showcase rows. Keyed off .rb-imported-ilm-home so admin reordering is safe. */ /* No explicit order on the module rows: leaving them at the default 0 means the Journal layout order decides where they (and any copies) appear. Only the enhancer's generated block is pushed last. */ html.route-common-home .grid-rows > .rb-champion-lower-home { order: 2; } /* --- RB_ILM_COLL_LOOK (2026-07-26) --------------------------------------- ILM's Collection List styling. Journal's Custom CSS never reaches the Lightning bundle on this install, so the rules live here (this file is verified to reach the page). The same rules are also stored in Journal Custom Code so an admin re-save stays consistent. */ /*ILM-COLLECTIONS-START*/ .ilm-coll-row{background:#131313!important;padding:34px 0 44px!important} .ilm-coll-row .row-bg{background:#131313!important} .ilm-coll-module{position:relative} .ilm-coll-module > .module-title{color:#fff!important;text-align:center;font-size:15px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;margin:0 0 30px!important} .ilm-coll-module > .module-title:after{content:"";display:block;width:28px;height:2px;background:#8a8a8a;margin:14px auto 0} .ilm-coll-module .module-body{max-width:1140px!important;margin:0 auto!important;padding:0 20px} .ilm-coll-module .blocks-grid{display:flex!important;flex-wrap:nowrap!important;direction:ltr;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch} .ilm-coll-module .blocks-grid::-webkit-scrollbar{display:none} .ilm-coll-module .blocks-grid.ilm-coll-dragging{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto!important} .ilm-coll-module .module-item{flex:0 0 calc(25% - 12px);min-width:calc(25% - 12px);aspect-ratio:0.545;scroll-snap-align:start;position:relative;overflow:hidden;margin:0!important;padding:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important} .ilm-coll-module .block-body{background:transparent!important;padding:0!important;margin:0!important;height:100%} .ilm-coll-module .block-header{margin:0!important;height:100%;background:transparent!important} .ilm-coll-module .block-header img{width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block;transition:transform .5s ease;-webkit-user-drag:none;user-select:none} .ilm-coll-module .module-item:hover .block-header img{transform:scale(1.04)} .ilm-coll-module .module-item::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.1);pointer-events:none} .ilm-coll-module .block-wrapper{display:none!important} .ilm-coll-btn{position:absolute;top:calc(50% + 18px);transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.95);border:0;cursor:pointer;z-index:6;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .2s ease,opacity .25s ease,background .2s ease;padding:0} .ilm-coll-btn:hover{transform:translateY(-50%) scale(1.1);background:#fff} .ilm-coll-btn:active{transform:translateY(-50%) scale(.96)} .ilm-coll-btn.is-disabled{opacity:.2;pointer-events:none} .ilm-coll-btn span{width:10px;height:10px;border-top:2.5px solid #111;border-left:2.5px solid #111;display:block;border-radius:1px} .ilm-coll-prev{left:calc(50% - 570px - 62px)} .ilm-coll-prev span{transform:rotate(-45deg);margin-left:4px} .ilm-coll-next{right:calc(50% - 570px - 62px)} .ilm-coll-next span{transform:rotate(135deg);margin-right:4px} @media(max-width:1330px){.ilm-coll-prev{left:10px}.ilm-coll-next{right:10px}} @media(max-width:767px){.ilm-coll-btn{display:none}} @media(max-width:900px){.ilm-coll-module .module-body{padding:0 12px}.ilm-coll-module .blocks-grid{gap:12px}.ilm-coll-module .module-item{flex:0 0 45.4%;min-width:45.4%}} /*ILM-COLLECTIONS-END*/ /* RoadBiker's Journal renders this module as .ilm-coll-module.blocks-grid > .module-body > .ipr-grid > .block-item, while ILM's CSS targets .blocks-grid as a CHILD and the cards as .module-item. Journal's generated per-module rule (.module-blocks-1217.blocks-grid > .module-body > .ipr-grid > .block-item) therefore outranks it and forces 5-up wrapped cards. Re-assert ILM's 4-up horizontal scroller against the real structure. */ html.route-common-home .ilm-coll-module .module-body > .ipr-grid { display: flex !important; flex-wrap: nowrap !important; direction: ltr; gap: 16px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; } html.route-common-home .ilm-coll-module .module-body > .ipr-grid::-webkit-scrollbar { display: none; } html.route-common-home .ilm-coll-module .module-body > .ipr-grid.ilm-coll-dragging { cursor: grabbing; scroll-snap-type: none !important; scroll-behavior: auto !important; } html.route-common-home .ilm-coll-module .module-body > .ipr-grid > .block-item { flex: 0 0 calc(25% - 12px) !important; width: calc(25% - 12px) !important; min-width: calc(25% - 12px) !important; max-width: none !important; aspect-ratio: 0.545 !important; height: auto !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start; position: relative; overflow: hidden; background: transparent !important; } @media (max-width: 900px) { html.route-common-home .ilm-coll-module .module-body > .ipr-grid > .block-item { flex: 0 0 45.4% !important; width: 45.4% !important; min-width: 45.4% !important; } } /* --- RB_ILM_FEATURED_LOOK (2026-07-26) ----------------------------------- HOME New Arrivals (1221). On ILM this row's black background comes from the Journal layout row setting, which did not survive the import — the module rendered white while its title is white text, making the title invisible. Restore the dark row + ILM's centred title. */ html.route-common-home .ilm-featured-row, html.route-common-home .ilm-featured-row > .row-bg, html.route-common-home .ilm-featured-row > .grid-cols-wrapper > .grid-cols, html.route-common-home .ilm-featured-row .grid-col, html.route-common-home .ilm-featured-row .grid-items { background: #000 !important; } html.route-common-home .ilm-featured-row .rb-new-arrivals, html.route-common-home .ilm-featured-row .rb-new-arrivals .module-body { background: transparent !important; } html.route-common-home .rb-new-arrivals .title-main { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 80px !important; margin: 0 !important; padding: 14px 20px !important; box-sizing: border-box !important; } html.route-common-home .rb-new-arrivals .title-main .module-title { margin: 0 !important; align-self: center !important; line-height: 1.2 !important; color: #fff !important; } /* --- RB_ILM_HOME_MODULE_COMPACT (2026-07-27) ------------------------------ Both imported HOME modules rendered too tall once the rows went full-width. Trim card heights ~30% while keeping the ILM proportions and cover crops. */ /* Collection List: aspect-ratio .545 gave 263x483 cards; .78 gives ~263x337. */ html.route-common-home .ilm-coll-module .module-body > .ipr-grid > .block-item { aspect-ratio: 0.78 !important; } html.route-common-home .ilm-coll-row { padding: 22px 0 28px !important; } html.route-common-home .ilm-coll-module > .module-title { margin: 0 0 20px !important; } /* New Arrivals: 304px square image box drove 444px cards; cap it at 210px. */ html.route-common-home .rb-new-arrivals .image-group, html.route-common-home .rb-new-arrivals .image, html.route-common-home .rb-new-arrivals .product-img, html.route-common-home .rb-new-arrivals .product-img > div { height: 210px !important; max-height: 210px !important; min-height: 0 !important; } html.route-common-home .rb-new-arrivals .product-img img, html.route-common-home .rb-new-arrivals .image img { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* The shorter image box letterboxes 350x350 product images (object-fit:contain); the row's black background was showing through as bars on the white cards. */ html.route-common-home .rb-new-arrivals .product-thumb, html.route-common-home .rb-new-arrivals .image-group, html.route-common-home .rb-new-arrivals .image, html.route-common-home .rb-new-arrivals .product-img, html.route-common-home .rb-new-arrivals .product-img > div { background: #fff !important; } /* --- RB_ILM_NA_NARROW (2026-07-27) --------------------------------------- New Arrivals cards were 320px wide. The grid declares one explicit 320px column per product, so use auto-columns instead — narrower cards without depending on how many products the module returns. Image box follows in proportion (overrides the 210px set above). */ html.route-common-home .rb-new-arrivals .auto-grid-items { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 240px !important; } html.route-common-home .rb-new-arrivals .product-layout { width: 240px !important; max-width: 240px !important; min-width: 0 !important; } html.route-common-home .rb-new-arrivals .image-group, html.route-common-home .rb-new-arrivals .image, html.route-common-home .rb-new-arrivals .product-img, html.route-common-home .rb-new-arrivals .product-img > div { height: 165px !important; max-height: 165px !important; } /* The elements themselves carry background-color:#232829, which showed as dark bars beside letterboxed (object-fit:contain) product images. */ html.route-common-home .rb-new-arrivals img, html.route-common-home .rb-new-arrivals .product-img img, html.route-common-home .rb-new-arrivals .image img { background: transparent !important; background-color: transparent !important; } /* --- RB_ILM_HOME_ANY_COPY (2026-07-27) ------------------------------------ Style these modules by their own custom class plus :has() on the row, so a duplicate made in Journal admin works anywhere: the copy inherits .ilm-coll-module / .rb-new-arrivals from the module settings, and whatever row it lands in picks up the right background automatically. */ html.route-common-home .grid-row:has(.ilm-coll-module), html.route-common-home .grid-row:has(.ilm-coll-module) > .row-bg { background: #131313 !important; } html.route-common-home .grid-row:has(.rb-new-arrivals), html.route-common-home .grid-row:has(.rb-new-arrivals) > .row-bg { background: #000 !important; } /* Inner wrappers stay transparent so the row colour shows edge to edge. */ html.route-common-home .grid-row:has(.ilm-coll-module) > .grid-cols-wrapper > .grid-cols, html.route-common-home .grid-row:has(.rb-new-arrivals) > .grid-cols-wrapper > .grid-cols, html.route-common-home .grid-row:has(.ilm-coll-module) .grid-col, html.route-common-home .grid-row:has(.rb-new-arrivals) .grid-col, html.route-common-home .grid-row:has(.ilm-coll-module) .grid-items, html.route-common-home .grid-row:has(.rb-new-arrivals) .grid-items { background: transparent !important; } /* --- RB_REELS_ON_COLLECTION (2026-07-27) ---------------------------------- The two reels players moved off the hero slider onto the Collection List row, so the slider can run full width. Selectors are deliberately stronger than the originals (which live in header.twig / above) to win the cascade. */ html.route-common-home .ilm-coll-row { position: relative !important; } @media (min-width: 1400px) { html.route-common-home .ilm-coll-row aside.rb-hero-reels-card, html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right { display: block !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 230px !important; height: 340px !important; z-index: 10 !important; overflow: hidden !important; background: #fff !important; box-shadow: 0 12px 26px rgba(0, 0, 0, .28) !important; box-sizing: border-box !important; } html.route-common-home .ilm-coll-row aside.rb-hero-reels-card { left: max(16px, calc(50vw - 900px)) !important; right: auto !important; } html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right { right: max(16px, calc(50vw - 900px)) !important; left: auto !important; } html.route-common-home .ilm-coll-row aside.rb-hero-reels-card .rb-hero-reels-player, html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right .rb-hero-reels-player { height: calc(100% - 34px) !important; } html.route-common-home .ilm-coll-row aside.rb-hero-reels-card .rb-hero-reels-video, html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right .rb-hero-reels-video { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* Hero slider reclaims the strip the right-hand reel used to occupy. */ @media (min-width: 1860px) { html.route-common-home.rb-hero-enhanced .grid-row-top-1 [class*="module-slider-"] { right: 0 !important; } } /* Collection List arrows (built by the enhancer). */ html.route-common-home .ilm-coll-module .ilm-coll-btn { position: absolute; top: calc(50% + 18px); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .95); border: 0; cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; } html.route-common-home .ilm-coll-module .ilm-coll-btn:hover { transform: translateY(-50%) scale(1.1); background: #fff; } html.route-common-home .ilm-coll-module .ilm-coll-btn.is-disabled { opacity: .2; pointer-events: none; } html.route-common-home .ilm-coll-module .ilm-coll-btn span { width: 10px; height: 10px; border-top: 2.5px solid #111; border-left: 2.5px solid #111; display: block; border-radius: 1px; } html.route-common-home .ilm-coll-module .ilm-coll-prev { left: calc(50% - 570px - 62px); } html.route-common-home .ilm-coll-module .ilm-coll-prev span { transform: rotate(-45deg); margin-left: 4px; } html.route-common-home .ilm-coll-module .ilm-coll-next { right: calc(50% - 570px - 62px); } html.route-common-home .ilm-coll-module .ilm-coll-next span { transform: rotate(135deg); margin-right: 4px; } @media (max-width: 1330px) { html.route-common-home .ilm-coll-module .ilm-coll-prev { left: 10px; } html.route-common-home .ilm-coll-module .ilm-coll-next { right: 10px; } } @media (max-width: 767px) { html.route-common-home .ilm-coll-module .ilm-coll-btn { display: none; } } /* Reels sit on the dark Collection List row now — drop the white card background (and the white strip under the video) and let the clip fill. */ html.route-common-home .ilm-coll-row aside.rb-hero-reels-card, html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right { background: transparent !important; box-shadow: none !important; } html.route-common-home .ilm-coll-row aside.rb-hero-reels-card .rb-hero-reels-title, html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right .rb-hero-reels-title { display: none !important; } html.route-common-home .ilm-coll-row aside.rb-hero-reels-card .rb-hero-reels-player, html.route-common-home .ilm-coll-row aside.rb-hero-reels-card-right .rb-hero-reels-player { height: 100% !important; background: transparent !important; } /* --- RB_HIDE_NOLAN_ROW (2026-07-27) -------------------------------------- Hide only the Nolan helmets showcase row. Matched on its banner image (".../WhatsApp Image 2026-05-05 at 8.49.41 PM-410x545w.jpeg") so the other showcase rows are untouched and row order can change safely. */ html.route-common-home .rb-champion-lower-home .rb-product-showcase:has(img[src*="8.49.41"]) { display: none !important; } /* --- RB_QUICK_PANEL_BELOW_HERO (2026-07-27) ------------------------------- The filter sits under the hero as a single full-width horizontal bar: the four dropdowns and the search button all on one line. */ @media (min-width: 992px) { html.route-common-home .grid-rows > .rb-quick-search-panel { position: static !important; left: auto !important; top: auto !important; width: min(1240px, 94vw) !important; height: auto !important; margin: 20px auto 24px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) 148px !important; grid-template-rows: auto !important; grid-auto-rows: 50px !important; /* row exactly the control height, so nothing floats */ align-items: center !important; gap: 12px !important; padding: 16px 22px 18px !important; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); } /* Title on its own line above the controls. */ html.route-common-home .grid-rows > .rb-quick-search-panel h2 { grid-column: 1 / -1 !important; margin: 0 0 6px !important; text-align: center; } html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-field, html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-toggle, html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-submit { width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* Same height AND same vertical alignment: the fields were stretching to the top of a taller grid row while the button centred itself, leaving it 8px low. */ html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-field, html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-toggle, html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-submit { height: 50px !important; min-height: 50px !important; max-height: 50px !important; align-self: center !important; } html.route-common-home .grid-rows > .rb-quick-search-panel .rb-quick-submit { font-size: 14px !important; padding: 0 14px !important; /* Align to the row start like the fields; it was sitting 8px low. */ align-self: start !important; margin: 0 !important; top: auto !important; position: relative !important; } } /* Below 992px keep them stacked — five controls will not fit on one line. */ @media (max-width: 991px) { html.route-common-home .grid-rows > .rb-quick-search-panel { display: grid !important; position: static !important; width: min(92vw, 340px) !important; height: auto !important; margin: 18px auto 22px !important; grid-template-rows: auto repeat(4, 54px) 48px !important; gap: 10px; padding: 16px 18px; background: #191b1b; color: #fff; direction: rtl; box-sizing: border-box; border-radius: 10px; } } /* Higher specificity (extra `body`) so these win regardless of the stylesheet being included twice: the fields kept a 16px bottom margin, which made the grid row taller than the controls and left the search button 8px low. */ @media (min-width: 992px) { html.route-common-home body .grid-rows > .rb-quick-search-panel { grid-auto-rows: 50px !important; align-items: center !important; } html.route-common-home body .grid-rows > .rb-quick-search-panel .rb-quick-field, html.route-common-home body .grid-rows > .rb-quick-search-panel .rb-quick-toggle, html.route-common-home body .grid-rows > .rb-quick-search-panel .rb-quick-submit { margin: 0 !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; align-self: center !important; } } /* --- RB_QUICK_PANEL_LOOK (2026-07-27) ------------------------------------- Target design: dark rounded card with a gold hairline border, gold gradient title over a line+diamond divider, then one row of white pill selects with the gold search button at the RTL end. Flex (not grid) so every control shares one baseline — the grid row was taller than the controls, which is what left the button sitting 8px low. Extra `body` in the selectors because this stylesheet is included twice in the Lightning bundle. */ @media (min-width: 992px) { html.route-common-home body .grid-rows > .rb-quick-search-panel { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: min(1300px, 94vw) !important; height: auto !important; margin: 24px auto 28px !important; padding: 24px 28px 28px !important; background: #1c1c1c !important; border: 1px solid rgba(212, 175, 55, .85) !important; border-radius: 18px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, .38) !important; grid-template-columns: none !important; grid-template-rows: none !important; } html.route-common-home body .grid-rows > .rb-quick-search-panel h2 { position: relative !important; flex: 0 0 100% !important; max-width: 100% !important; margin: 0 0 6px !important; padding-bottom: 26px !important; text-align: center !important; font-size: 30px !important; font-weight: 800 !important; letter-spacing: .02em !important; background: linear-gradient(180deg, #f6dc94 0%, #e2b551 45%, #c1902a 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* divider: hairline + centred diamond */ html.route-common-home body .grid-rows > .rb-quick-search-panel h2::after { content: ""; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 280px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .95), transparent); } html.route-common-home body .grid-rows > .rb-quick-search-panel h2::before { content: ""; position: absolute; left: 50%; bottom: 6px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: linear-gradient(135deg, #f6dc94, #c1902a); } html.route-common-home body .grid-rows > .rb-quick-search-panel .rb-quick-field { flex: 1 1 0 !important; min-width: 0 !important; max-width: 300px !important; margin: 0 !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; align-self: center !important; } html.route-common-home body .grid-rows > .rb-quick-search-panel .rb-quick-toggle { width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; margin: 0 !important; background: #fff !important; border: 0 !important; border-radius: 11px !important; font-size: 15px !important; color: #3a3a3a !important; } html.route-common-home body .grid-rows > .rb-quick-search-panel .rb-quick-submit { flex: 0 0 210px !important; width: 210px !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; margin: 0 !important; align-self: center !important; border: 0 !important; border-radius: 11px !important; background: linear-gradient(180deg, #f2ce67 0%, #e0b24d 50%, #cf9a24 100%) !important; color: #1c1c1c !important; font-size: 16px !important; font-weight: 800 !important; box-shadow: 0 6px 16px rgba(207, 154, 36, .35) !important; } } /* Journal's base rule form > div:not(.buttons):not(.checkout-section)…{ margin-bottom: var(--j-gap-spacing---6) !important } gives every div child of a form a 16px bottom margin. The panel is a
, so the four .rb-quick-field divs got it but the