/* =========================================================================== LEGACY BRIDGE — Storefront (Phase 5) --------------------------------------------------------------------------- Restyles the vendored theme's existing components in place, using the same tokens as design-system.css. This upgrades every page at once without rewriting markup that working JavaScript is bound to — in particular the pagination, whose class names drive ~100 lines of handler code in products.php, and the header/footer that appear on all 14 pages. Load order: bootstrap -> theme -> design-system.css -> this file. =========================================================================== */ body { font-family: var(--f-sans); color: var(--c-text); background: var(--c-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--f-sans); color: var(--c-text); letter-spacing: -.01em; } /* ---- Buttons ------------------------------------------------------------ */ .btn, .btn-product, .btn-outline-primary-2, .btn-primary { font-family: var(--f-sans); font-weight: var(--w-semi); border-radius: var(--r-md); min-block-size: var(--tap); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .btn-outline-primary-2 { border: 1px solid var(--c-border-strong) !important; color: var(--c-text) !important; background: transparent; padding-inline: var(--s-5); } .btn-outline-primary-2:hover, .btn-outline-primary-2:focus { background: var(--c-text) !important; border-color: var(--c-text) !important; color: var(--c-text-invert) !important; } .btn-primary { background: var(--c-accent); border-color: var(--c-accent); } .btn-primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); } /* ---- Pagination (markup kept intact; only the look changes) ------------- */ .pagination { gap: var(--s-1); align-items: center; } .pagination .page-item { margin: 0; } .pagination .page-link { min-inline-size: var(--tap); min-block-size: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding-inline: var(--s-3); border: 1px solid var(--c-border) !important; border-radius: var(--r-md) !important; color: var(--c-text) !important; background: var(--c-surface) !important; font-size: var(--t-sm); font-weight: var(--w-medium); box-shadow: none !important; } .pagination .page-link:hover { border-color: var(--c-text) !important; background: var(--c-bg-subtle) !important; } .pagination .page-item.active .page-link { background: var(--c-text) !important; color: var(--c-text-invert) !important; border-color: var(--c-text) !important; } .pagination .page-item.disabled .page-link { opacity: .45; cursor: not-allowed; } .page-item-total { display: inline-flex; align-items: center; padding-inline: var(--s-3); color: var(--c-text-muted); font-size: var(--t-sm); } /* Prev/next arrows follow the document direction. */ [dir="rtl"] .pagination .icon-long-arrow-left, [dir="rtl"] .pagination .icon-long-arrow-right { transform: scaleX(-1); } /* ---- Forms -------------------------------------------------------------- */ .form-control { min-block-size: var(--tap); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font-family: var(--f-sans); font-size: var(--t-base); color: var(--c-text); text-align: start; } .form-control:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-ring); } label { font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--c-text); } /* ---- Alerts ------------------------------------------------------------- */ .alert { border-radius: var(--r-md); border: 1px solid var(--c-border); border-inline-start-width: 4px; font-size: var(--t-sm); padding: var(--s-4); } .alert-success { background: var(--c-success-soft); border-inline-start-color: var(--c-success); color: #14603a; } .alert-danger { background: var(--c-danger-soft); border-inline-start-color: var(--c-danger); color: #8f1109; } .alert-warning { background: var(--c-warning-soft); border-inline-start-color: var(--c-warning); color: #7a5200; } .alert-info { background: var(--c-info-soft); border-inline-start-color: var(--c-info); color: #17487e; } /* ---- Header ------------------------------------------------------------- The header markup is now owned by layout/header.php and styled by section 37 of design-system.css. What is left here is only the job of switching OFF the vendored theme's competing header rules, so the design system does not have to win a specificity fight on every property. The theme shipped .header-left / .header-right / .header-middle as three separate flex contexts with their own media queries, plus an absolutely positioned .header-search-wrapper with a negative offset. None of that is used any more. ------------------------------------------------------------------------ */ .header { border-block-end: 1px solid var(--c-border); background: var(--c-surface); } .header .header-middle { padding-block: 0; border: 0; margin: 0; } /* Neutralise the theme's search-expand animation: the wrapper is a plain popover in the design system and must not inherit the negative offsets or the display:none that the theme toggles. */ .ds-header .header-search .header-search-wrapper { margin: 0; min-inline-size: 0; transform: none; } .ds-header .header-search.show .header-search-wrapper, .ds-header .header-search .header-search-wrapper { align-items: stretch; } /* The theme hides the wrapper until .show is added by main.js; keep that behaviour but express it as display rather than the theme's offsets. */ .ds-header .header-search .header-search-wrapper { display: none; } .ds-header .header-search.show .header-search-wrapper { display: block; } /* Sticky: Waypoint adds .fixed and a sticky-wrapper that reserves the original height, so content is not covered. It only needs a surface and elevation. */ .header-middle.sticky-header.fixed { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1040; background: var(--c-surface); border-block-end: 1px solid var(--c-border); box-shadow: var(--e-md); } /* ---- Footer ------------------------------------------------------------- */ .footer { background: var(--c-bg-subtle); border-block-start: 1px solid var(--c-border); color: var(--c-text-muted); } .footer a { color: var(--c-text-muted); } .footer a:hover { color: var(--c-accent); } /* ---- Page header -------------------------------------------------------- */ .page-header { background: var(--c-bg-subtle) !important; border-block-end: 1px solid var(--c-border); padding-block: var(--s-10); } .page-header .page-title { color: var(--c-text); font-weight: var(--w-bold); font-size: var(--t-2xl); } .page-header .page-title span { color: var(--c-text-muted); font-weight: var(--w-regular); } /* ---- Breadcrumb --------------------------------------------------------- */ .breadcrumb { background: transparent; padding-inline: 0; font-size: var(--t-sm); } .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--c-text-faint); } /* ---- Cart / summary tables --------------------------------------------- */ .table-summary th, .table-summary td { border-color: var(--c-border); padding-block: var(--s-3); } .table.table-cart th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); } /* ---- Legacy product cards still rendered by untouched methods ---------- */ .product { border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--dur-base) var(--ease); } .product:hover { box-shadow: var(--e-lg); } .product-title { font-size: var(--t-base); font-weight: var(--w-medium); } .product-title a { color: var(--c-text); } .product-title a:hover { color: var(--c-accent); } .product-price { color: var(--c-text); font-weight: var(--w-bold); } /* Stop the legacy fixed-height rule distorting product photography. */ .product-media img.product-image, .product-media img { object-fit: contain !important; background: var(--c-bg-subtle); } /* ---- Sidebar filters ---------------------------------------------------- */ .sidebar-shop .widget { border-block-end: 1px solid var(--c-border); padding-block: var(--s-4); } .widget-title { font-size: var(--t-sm); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: .05em; } /* ---- Modal / auth tabs -------------------------------------------------- */ .modal-content { border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--e-lg); } .form-tab .nav-link { font-weight: var(--w-semi); color: var(--c-text-muted); } .form-tab .nav-link.active { color: var(--c-text); border-block-end-color: var(--c-accent); } /* ---- Mobile -------------------------------------------------------------- */ @media (max-width: 768px) { .page-header { padding-block: var(--s-8); } .page-header .page-title { font-size: var(--t-xl); } /* Legacy tables scroll rather than overflow the viewport. */ .table-responsive, .table-cart, .table-summary { display: block; overflow-x: auto; } } /* ------------------------------------------------ PHASE 5: HEADER IN FLOW */ /* The vendored demo-5 header is position:absolute with top:0 so it can float over a full-bleed hero image. This site does not use that: the header has a solid white background, and on every page it simply covered the first ~85px of the content beneath it — the product title, the page heading, the first row of a listing. Putting it back into normal flow is a one-rule fix that removes the overlap everywhere instead of adding a magic top padding to each page. */ .header.header-5 { position: relative; margin-block-start: 0; background-color: var(--c-surface); } /* ------------------------------------- PHASE 5: TABS OVER LEGACY NAV-PILLS */ /* Bootstrap's .nav-pills .nav-link.active paints a filled pill. The design system marks the active tab with an underline instead, so the fill has to be cleared or both treatments stack. */ /* The theme's own rule is `.nav.nav-pills .nav-item .nav-link.active`, so the override has to be at least as specific to win. */ .ds-tabs.nav.nav-pills .nav-item .nav-link, .ds-tabs.nav.nav-pills .nav-item .nav-link.active, .ds-tabs.nav.nav-pills .nav-item .nav-link:focus, .ds-tabs.nav.nav-pills .nav-item .nav-link:hover, .ds-tabs.nav.nav-dashboard .nav-item .nav-link, .ds-tabs.nav.nav-dashboard .nav-item .nav-link.active { background-color: transparent; border-radius: 0; } .ds-tabs.nav.nav-pills .nav-item .nav-link.active, .ds-tabs.nav.nav-dashboard .nav-item .nav-link.active { color: var(--c-text); } /* Vertical tab list (account page): the active marker runs down the inline edge rather than along the block edge. */ .ds-tabs[style*="column"] .ds-tabs__link { border-block-end: 0; border-inline-end: 2px solid transparent; justify-content: flex-start; inline-size: 100%; } .ds-tabs[style*="column"] .ds-tabs__link.active, .ds-tabs.nav.nav-dashboard .nav-item .ds-tabs__link.active { border-inline-end-color: var(--c-accent); background: var(--c-accent-soft); } /* ------------------------------------------- PHASE 5: PRODUCT PAGE GALLERY */ /* elevateZoom injects an absolutely positioned lens container; keep it from escaping the rounded frame. */ .ds-gallery__main { position: relative; } .ds-gallery__main .zoomContainer { max-inline-size: 100%; } /* Legacy .review-empty and the rules blocks on the CMS pages inherit the design-system type scale rather than the theme's. */ .ds-scope h6 { font-size: var(--t-md); font-weight: var(--w-semi); margin-block: 0 var(--s-2); } .ds-scope hr { border: 0; border-block-start: 1px solid var(--c-border); margin-block: var(--s-5); } /* ---------------------------------------------- PHASE 5: HERO HEIGHT CAP */ /* demo-5 sizes the home hero to the full viewport, so on a laptop the first screen was one photograph and nothing else — no products, no categories, no reason to scroll. Capped to a band that still reads as a hero but leaves the first row of merchandise above the fold. */ .intro-slider-container, .intro-slider-container .owl-item, .intro-slide.ds-hero { block-size: auto; min-block-size: 42rem; max-block-size: 56rem; } @media (max-width: 767px) { .intro-slider-container, .intro-slider-container .owl-item, .intro-slide.ds-hero { min-block-size: 30rem; max-block-size: 40rem; } } /* --------------------------------------- PHASE 5: TOUCH TARGETS (LEGACY) */ /* The vendored theme sizes several controls well below the 44px minimum. The markup is shared across every page and is bound to by existing JS, so the size is corrected here rather than by rewriting each template. */ .mobile-menu-toggler, .mobile-menu-close, .header-right .dropdown-toggle, .header-search .search-toggle { min-inline-size: var(--tap); min-block-size: var(--tap); display: inline-flex; align-items: center; justify-content: center; } /* -------------------------------------------------- back to top #scroll-top was in the group above. It did not need to be — the button is 5rem square, which is 50px at this root size and already past --tap — and being there did real damage: the rule set `display`, this file loads after the theme, and the two selectors have the same specificity. So `display: inline-flex` overrode the theme's own #scroll-top { display: none } @media (min-width: 768px) { #scroll-top { display: flex } } and the button appeared on phones, where the theme never put it. Where it landed made that worse. The theme pins it with `left: 50px; bottom: 128px` — a physical left edge, so it stayed on the left in both directions, and an offset high enough off the bottom to sit in the middle of the page rather than in a corner. On a 390px checkout it covered the Delivery and Total figures. Removing it from the group restores the theme's breakpoint on its own, so nothing here needs !important. What is left is the position: a real corner, mirrored by writing direction, clear of the home indicator on phones with a gesture bar. */ #scroll-top { /* Logical, so it is bottom-right in English and bottom-left in Arabic. inset-inline-start also cancels the theme's physical `left`, which would otherwise keep winning in one of the two directions. */ inset-inline-start: auto; inset-inline-end: var(--s-5); inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); /* Above page content (which tops out around 60) and well below the overlay band the menus and toasts use (1002+). 999 was arbitrary. */ z-index: 90; } /* Shown only where the page actually has room beside its content. .ds-container caps at --container (1280px) and centres, so a gutter only opens up past roughly 1280 + 2 x (5rem button + 2rem clearance) = 1420px. Below that a 50px corner control has nowhere to sit except on top of the page, and measuring it across the full scroll of checkout confirmed what that means: at 1320 and 1200 it passes over the Place Order button and the payment labels, and being a real button it would swallow those clicks. At 1440 it sits entirely in the gutter and covers nothing at any scroll position. So it is hidden below 1420 rather than moved somewhere equally in the way. Nothing is lost that the browser does not already provide - Home, the scrollbar and the trackpad all go back to the top. Lower this number if the button matters more than the overlap. */ @media (max-width: 1419px) { #scroll-top { display: none; } } .mobile-menu-close { border: 0; background: transparent; color: inherit; } /* Footer and menu links get enough vertical room to be tapped reliably. */ .footer .widget-list a, .mobile-menu a, .mobile-menu-container a { display: inline-flex; align-items: center; min-block-size: var(--tap); } /* ------------------------------ PHASE 5: DROPDOWN HORIZONTAL OVERFLOW */ /* The theme keeps header dropdowns in the layout (visibility/opacity rather than display:none), so a closed 240px menu still widened the document and produced a horizontal scrollbar on phones. Clip it until it is shown. */ .header .dropdown-menu { max-inline-size: min(320px, calc(100vw - 2 * var(--gutter))); } .page-wrapper { overflow-x: clip; } /* ----------------------- PHASE 5 (home): DEMO-5 WHITE-TEXT HEADER RESET */ /* demo-5's header is designed to float over a dark hero photo, so style.css paints its navigation, search toggle and menu toggler white: .header-5 .menu>li:not(:hover):not(.active):not(.show)>a { color:#fff } The :not() arguments push that to (0,5,1), which is why the nav read as white-on-white once the header became a solid bar in normal flow — the links were there the whole time, just invisible. This mirrors the theme's own selectors exactly, so it wins on source order rather than on an inflated specificity or !important. */ .header-5 .wishlist-link:not(:hover):not(:focus), .header-5 .search-toggle:not(:hover):not(:focus):not(.active), .header-5 .mobile-menu-toggler, .header-5 .menu > li:not(:hover):not(.active):not(.show) > a { color: inherit; } /* ================= PHASE 5 (home r2): DIRECTION AND FONT INHERITANCE ====== Two inherited defaults from the vendored stack were breaking Arabic on every page, not just the home page. 1. Bootstrap's reboot sets `body { text-align: left }`. `left` is a physical edge, so in an RTL document every block of text — section headings, category names, product titles, footer columns — was pushed to the WRONG side. `start` is the logical equivalent and resolves to right in RTL and left in LTR, so one declaration serves both. 2. style.css sets `a { font-family: 'Poppins' }` and `p { font-family: 'Poppins' }` as bare element rules. Poppins has no Arabic glyphs, so every link and paragraph fell back to a system font and Arabic never used Almarai — which is why the category cards and product titles still looked wrong after the family was switched. They inherit the document font now. Both are element-level selectors in the theme, so matching that specificity here is enough: this file loads afterwards and wins on source order. No !important, no inflated selectors. Icon fonts are unaffected: the theme applies "molla" on the ::before pseudo-element, not on the element itself, so inheritance never reaches it. ------------------------------------------------------------------------ */ body { text-align: start; } a, p { font-family: inherit; } /* --------- PHASE 5 (home r2): RETIRE THE LEGACY ARABIC FONT OVERRIDES ----- assets/css/style-ar.css — the parallel Arabic stylesheet the design system was built to replace — pins six selectors to "Droid Arabic Kufi" with !important. They survived the switch to Almarai and were the last thing still rendering the header navigation in the old font. Beating !important needs !important; there is no other mechanism. The selectors below mirror that file's exactly, so this is a like-for-like retirement of six known declarations rather than a blanket hammer. Grep for "Droid Arabic Kufi" in style-ar.css to see the full list. ------------------------------------------------------------------------ */ .menu li > a, .header-5 .header-search-extended .form-control, .header-5 .menu > li > a, .heading.heading-center, .banner-subtitle a { font-family: var(--f-sans) !important; } .header-5 .menu > li > a::before { font-family: inherit !important; } /* --------------------------------------------------------------------------- Nav link padding. `padding-inline` set in design-system.css took effect on the end side only — the start side stayed at the theme's 15px. That is the same high-specificity selector family that made the nav invisible earlier (`.header-5 .menu > li:not(:hover):not(.active):not(.show) > a`, (0,5,1)), so it is answered the same way: mirror the theme's own selectors and win on source order, rather than reaching for !important. The padding used to halve below 1400, and halve again, because SEVEN long categories ("LED Strips & Profiles", "Smart & Control") ran under the account and cart icons at 1280. The fashion catalogue has FOUR short ones. Measured at every width the inline nav is shown: the labels occupy 371px at this padding, and the narrowest track — 992px viewport — is 513px. 142px of slack at the tightest point, so one comfortable value serves every width and the stepped-down rules are gone with the problem they solved. ------------------------------------------------------------------------ */ .header-5 .menu > li:not(:hover):not(.active):not(.show) > a, .header-5 .menu > li > a, .ds-header__nav .menu > li > a { padding-inline: var(--s-4); } /* The inline nav used to need 1240px of viewport before seven categories, the logo and the icon cluster fitted on one line. Four need far less: 371px of labels against a 513px track at 992. Below that the categories belong in the off-canvas drawer, which already carries them. */ @media (max-width: 991px) { .ds-header__nav { display: none; } .ds-header .mobile-menu-toggler { display: inline-flex; } } /* --------------------------------------------------------------------------- Filter options — replace the theme's custom checkbox rather than pad around it The theme hides the native input (opacity 0, position absolute) and draws the box with `.custom-control-label::before { position:absolute; left:-15px }`. That offset is measured from `.custom-control`, so the box lands OUTSIDE the control, on top of whatever sits to its left — in this rail, the result count. Adding padding to the label only moved the text, not the box, which is why the option rows read as "4 ☐ Downlights" with a floating square. Rather than pile offsets on top of that, the real input is shown and laid out, and the theme's decorative pseudo-elements are switched off inside the rail. `accent-color` gives the checked state the accent without a second drawn box. Nothing outside `.ds-filters` is affected. --------------------------------------------------------------------------- */ .ds-filters .filter-item { display: flex; align-items: center; gap: var(--s-3); min-block-size: var(--tap); } .ds-filters .custom-control { display: flex; align-items: center; gap: var(--s-3); flex: 1 1 auto; min-inline-size: 0; padding: 0; margin: 0; min-block-size: var(--tap); } /* The real control, visible and in flow. z-index is the part that actually blocked clicking: Bootstrap sets `z-index: -1` on .custom-control-input so the hidden input sits behind the label it draws. Made visible but left at -1, the checkbox renders behind its own parent's background — elementFromPoint at the centre of the box returns the wrapping div, so a click on the box reached nothing and the filter never changed. */ .ds-filters .custom-control-input { position: static; z-index: auto; opacity: 1; flex: none; inline-size: 1.7rem; block-size: 1.7rem; margin: 0; accent-color: var(--c-accent); cursor: pointer; } /* The theme's drawn box and tick are no longer needed. */ .ds-filters .custom-control-label::before, .ds-filters .custom-control-label::after { content: none; } .ds-filters .custom-control-label { padding: 0; margin: 0; flex: 1 1 auto; min-inline-size: 0; font-size: var(--t-sm); line-height: var(--lh-tight); color: var(--c-text-muted); cursor: pointer; overflow-wrap: anywhere; } .ds-filters .custom-control-input:checked ~ .custom-control-label { color: var(--c-text); font-weight: var(--w-medium); } .ds-filters .custom-control-input:focus-visible ~ .custom-control-label { text-decoration: underline; } /* The theme pins the count with `position:absolute; left:10px`, which put it at the START of the row — before the checkbox — regardless of markup order. Back in flow it lands at the inline end, where a count belongs, and it follows the reading direction in Arabic for free. */ .ds-filters .item-count { position: static; flex: none; font-size: var(--t-xs); color: var(--c-text-faint); font-variant-numeric: tabular-nums; } /* One scroll container, not two. The rail already scrolls; capping each group as well put a second scrollbar inside the first, and a heading could sit half-hidden behind its own list. */ .ds-filters .filter-items { max-block-size: none; overflow: visible; padding-inline-end: 0; } /* Colour swatches keep their own presentation, minus the theme's checkbox. */ .ds-filters .filter-colors { display: flex; flex-wrap: wrap; gap: var(--s-2); } .ds-filters .filter-color { inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--r-full); border: 1px solid var(--c-border); display: inline-block; } .ds-filters .filter-color.selected-color { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-accent); }