.elementor-kit-777367{--e-global-color-primary:#111111;--e-global-color-secondary:#666666;--e-global-color-text:#111111;--e-global-color-accent:#111111;--e-global-color-widabg:#FFFFFF;--e-global-color-widagold:#EADFC6;--e-global-color-widawash:#F7F1E3;--e-global-color-widaline:#E5E5E5;--e-global-color-widasurf:#F4F4F4;--e-global-color-widacrit:#111111;--e-global-typography-primary-font-family:"IBM Plex Sans Arabic";--e-global-typography-primary-font-size:24px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.4em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"IBM Plex Sans Arabic";--e-global-typography-secondary-font-size:18px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.6em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"IBM Plex Sans Arabic";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"IBM Plex Sans Arabic";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.6em;--e-global-typography-accent-letter-spacing:1.12px;--e-global-typography-wdaxs-font-family:"IBM Plex Sans Arabic";--e-global-typography-wdaxs-font-size:12px;--e-global-typography-wdaxs-font-weight:400;--e-global-typography-wdaxs-line-height:1.5em;--e-global-typography-wdaxs-letter-spacing:0px;--e-global-typography-wdasm-font-family:"IBM Plex Sans Arabic";--e-global-typography-wdasm-font-size:14px;--e-global-typography-wdasm-font-weight:400;--e-global-typography-wdasm-line-height:1.6em;--e-global-typography-wdasm-letter-spacing:0px;--e-global-typography-wdabase-font-family:"IBM Plex Sans Arabic";--e-global-typography-wdabase-font-size:16px;--e-global-typography-wdabase-font-weight:400;--e-global-typography-wdabase-line-height:1.75em;--e-global-typography-wdabase-letter-spacing:0px;--e-global-typography-wdamd-font-family:"IBM Plex Sans Arabic";--e-global-typography-wdamd-font-size:18px;--e-global-typography-wdamd-font-weight:400;--e-global-typography-wdamd-line-height:1.6em;--e-global-typography-wdamd-letter-spacing:0px;--e-global-typography-wdalg-font-family:"IBM Plex Sans Arabic";--e-global-typography-wdalg-font-size:24px;--e-global-typography-wdalg-font-weight:500;--e-global-typography-wdalg-line-height:1.4em;--e-global-typography-wdalg-letter-spacing:0px;--e-global-typography-wdaxl-font-family:"IBM Plex Sans Arabic";--e-global-typography-wdaxl-font-size:34px;--e-global-typography-wdaxl-font-weight:500;--e-global-typography-wdaxl-line-height:1.25em;--e-global-typography-wdaxl-letter-spacing:0px;--e-global-typography-wda2xl-font-family:"IBM Plex Sans Arabic";--e-global-typography-wda2xl-font-size:48px;--e-global-typography-wda2xl-font-weight:500;--e-global-typography-wda2xl-line-height:1.15em;--e-global-typography-wda2xl-letter-spacing:0px;background-color:#FFFFFF;color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:16px;font-weight:400;line-height:1.75em;letter-spacing:0px;}.elementor-kit-777367 button,.elementor-kit-777367 input[type="button"],.elementor-kit-777367 input[type="submit"],.elementor-kit-777367 .elementor-button{background-color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:14px;font-weight:500;text-transform:none;line-height:1.4em;letter-spacing:0px;color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:16px 24px 16px 24px;}.elementor-kit-777367 button:hover,.elementor-kit-777367 button:focus,.elementor-kit-777367 input[type="button"]:hover,.elementor-kit-777367 input[type="button"]:focus,.elementor-kit-777367 input[type="submit"]:hover,.elementor-kit-777367 input[type="submit"]:focus,.elementor-kit-777367 .elementor-button:hover,.elementor-kit-777367 .elementor-button:focus{background-color:#333333;color:#FFFFFF;}.elementor-kit-777367 e-page-transition{background-color:#FFBC7D;}.elementor-kit-777367 a{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:16px;font-weight:400;line-height:1.75em;letter-spacing:0px;}.elementor-kit-777367 a:hover{color:#666666;}.elementor-kit-777367 h1{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:34px;font-weight:500;line-height:1.25em;letter-spacing:0px;}.elementor-kit-777367 h2{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:24px;font-weight:500;line-height:1.4em;letter-spacing:0px;}.elementor-kit-777367 h3{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:18px;font-weight:500;line-height:1.5em;letter-spacing:0px;}.elementor-kit-777367 h4{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:16px;font-weight:500;line-height:1.6em;letter-spacing:0px;}.elementor-kit-777367 h5{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:14px;font-weight:500;line-height:1.6em;letter-spacing:0px;}.elementor-kit-777367 h6{color:#111111;font-family:"IBM Plex Sans Arabic", sans-serif;font-size:12px;font-weight:500;line-height:1.5em;letter-spacing:0px;}.elementor-kit-777367 img{border-radius:0px 0px 0px 0px;}.elementor-kit-777367 label{color:#666666;}.elementor-kit-777367 input:not([type="button"]):not([type="submit"]),.elementor-kit-777367 textarea,.elementor-kit-777367 .elementor-field-textual{font-family:"IBM Plex Sans Arabic", sans-serif;font-size:16px;font-weight:400;line-height:1.6em;letter-spacing:0px;color:#111111;background-color:#FFFFFF;border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1600px;}.e-con{--container-max-width:1600px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-777367{--e-global-typography-primary-font-size:24px;--e-global-typography-secondary-font-size:18px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:14px;--e-global-typography-wdaxs-font-size:12px;--e-global-typography-wdasm-font-size:14px;--e-global-typography-wdabase-font-size:16px;--e-global-typography-wdamd-font-size:18px;--e-global-typography-wdalg-font-size:22px;--e-global-typography-wdaxl-font-size:30px;--e-global-typography-wda2xl-font-size:40px;font-size:16px;}.elementor-kit-777367 a{font-size:16px;}.elementor-kit-777367 h1{font-size:30px;}.elementor-kit-777367 h2{font-size:22px;}.elementor-kit-777367 h3{font-size:18px;}.elementor-kit-777367 h4{font-size:16px;}.elementor-kit-777367 h5{font-size:14px;}.elementor-kit-777367 h6{font-size:12px;}.elementor-kit-777367 button,.elementor-kit-777367 input[type="button"],.elementor-kit-777367 input[type="submit"],.elementor-kit-777367 .elementor-button{font-size:14px;}.elementor-kit-777367 input:not([type="button"]):not([type="submit"]),.elementor-kit-777367 textarea,.elementor-kit-777367 .elementor-field-textual{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-777367{--e-global-typography-primary-font-size:20px;--e-global-typography-secondary-font-size:17px;--e-global-typography-text-font-size:15px;--e-global-typography-accent-font-size:13px;--e-global-typography-wdaxs-font-size:12px;--e-global-typography-wdasm-font-size:13px;--e-global-typography-wdabase-font-size:15px;--e-global-typography-wdamd-font-size:17px;--e-global-typography-wdalg-font-size:20px;--e-global-typography-wdaxl-font-size:26px;--e-global-typography-wda2xl-font-size:34px;font-size:15px;}.elementor-kit-777367 a{font-size:15px;}.elementor-kit-777367 h1{font-size:26px;}.elementor-kit-777367 h2{font-size:20px;}.elementor-kit-777367 h3{font-size:17px;}.elementor-kit-777367 h4{font-size:15px;}.elementor-kit-777367 h5{font-size:13px;}.elementor-kit-777367 h6{font-size:12px;}.elementor-kit-777367 button,.elementor-kit-777367 input[type="button"],.elementor-kit-777367 input[type="submit"],.elementor-kit-777367 .elementor-button{font-size:14px;}.elementor-kit-777367 input:not([type="button"]):not([type="submit"]),.elementor-kit-777367 textarea,.elementor-kit-777367 .elementor-field-textual{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================================== Wida design system v1: the part the Elementor kit cannot express. WDA-WEB-26-0001 | 2026-09-06 Paste into Elementor > Site Settings > Custom CSS. Everything expressible as a kit field (colour, font, size, spacing, breakpoint) lives in the kit and is NOT repeated here. This file carries only mechanics: the hairline grid, the RTL invariants, and the scoping rules that stop a Latin-designed system degrading Arabic. Enforces domain/studio/rtl-invariants.md. Each block names its rule. ========================================================================== */ :root { /* Mirrors of the kit's global colours, for use in the mechanics below. The kit remains the source of truth. If these drift from the kit, the kit is right and this file is stale. */ --wida-bg: #ffffff; --wida-fg: #111111; --wida-muted: #666666; --wida-line-neutral: #e5e5e5; --wida-line: #eadfc6; /* the dividers are gold */ --wida-surface: #f4f4f4; --wida-critical: #111111; /* Gold accent. LIGHT, and it does exactly two things: it draws the dividers, and it highlights. It never carries text, never fills a control, and never carries meaning on its own. --wida-gold 1.32:1 on white. The hairline. Sits a touch stronger than the grey it replaces so the warmth registers at 1px instead of reading as off-white. --wida-gold-wash 1.13:1 on white. A highlighter mark behind text. #111 over it measures 16.77:1. */ --wida-gold: #eadfc6; --wida-gold-wash: #f7f1e3; /* Founder decision 2026-09-07: the footer goes black and the mark on it is gold. The hairline gold reads as cream on black, so the mark takes a deeper gold that still sits in the same hue. Used for the mark on the dark footer and nothing else. 7.9:1 on #111. */ --wida-gold-mark: #c9a75c; /* Spacing scale. 4px base. Only these values exist. */ --wida-1: 4px; --wida-2: 8px; --wida-3: 12px; --wida-4: 16px; --wida-6: 24px; --wida-8: 32px; --wida-12: 48px; --wida-16: 64px; --wida-24: 96px; --wida-32: 128px; /* Page edge. Logical, so it flips. */ --wida-edge: clamp(16px, 4vw, 56px); /* Hairline. One value, used everywhere a division is drawn. */ --wida-hairline: 1px solid var(--wida-line); } /* -------------------------------------------------------------------------- 1. Letter-spacing is a Latin-only property. Arabic is a connected script. Letter-spacing breaks the joins between letters, and the damage is invisible at desktop zoom to anyone who does not read Arabic. Elementor exposes a letter-spacing control on every text widget, so this has to be asserted rather than assumed. Design system section 1.3. -------------------------------------------------------------------------- */ html[lang^="ar"] body, html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6, html[lang^="ar"] p, html[lang^="ar"] li, html[lang^="ar"] .elementor-widget-heading .elementor-heading-title, html[lang^="ar"] .elementor-widget-text-editor, html[lang^="ar"] .elementor-button, html[lang^="ar"] .elementor-button .elementor-button-text, html[lang^="ar"] .button, html[lang^="ar"] button, html[lang^="ar"] input[type="submit"] { letter-spacing: 0 !important; } /* !important is deliberate. Verified 2026-09-06 on the LibyanSpider build: a letter-spacing value set on a single heading widget is written by Elementor as `.elementor- .elementor-element.elementor-element- .elementor-heading-title`, which out-specifies the rule above and the widget kept its 2px. Without the flag this block is a wish, not an assertion. */ /* Buttons are listed explicitly because Elementor's Button widget inherits the Accent global typography, which on this kit is the Latin brand line and carries tracking. An Arabic button therefore arrives tracked even though the kit sets button letter-spacing to 0, and every template would otherwise have to pin custom typography one widget at a time. Verified 2026-09-06 on the single-product template's enquiry button. Woo's own `.button` and the bare form controls are included for the cart, checkout and account pages, which render through WooCommerce markup rather than through a widget. */ /* The exceptions, all guaranteed Latin or numeric. `.wida-code` carries the piece code (`4880`); `.wida-brand` carries a supplier brand where one is still shown, which by default it is not. Scoped to the element, never left as a bare class, per RTL invariant 10. */ span.wida-brand, .wida-brand, .wida-code bdi { letter-spacing: 0.08em !important; text-transform: uppercase; } /* The code sits quiet under the garment type. */ .wida-code { font-size: 11px; line-height: 1.5; color: var(--wida-muted); } /* Arabic has no uppercase. Never set text-transform on a heading style. */ html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4 { text-transform: none; } /* -------------------------------------------------------------------------- 2. LTR islands inside Arabic prose. RTL invariants 2, 12, 14, 15, 17. Prices, SKUs, phone numbers, size labels and order references are Latin islands inside Arabic text. Unisolated they reorder, and an identifier whose parts are joined by a neutral (space, hyphen, colon, plus) fragments into several islands which then lay out right-to-left against each other: `+218 91 234 5678` paints as `5678 234 91 218 +`. Isolation fixes faults INSIDE an island. Keeping a whole token in ONE bdi is what fixes faults BETWEEN islands. Both are needed. Numbers are never reversed and are always Western: 1,250 not ١٬٢٥٠. -------------------------------------------------------------------------- */ bdi, .wida-ltr, .woocommerce-Price-amount, .wida-sku, .wida-tel, .wida-size { direction: ltr; unicode-bidi: isolate; /* RTL invariant 17: an identifier must not break across a line in either language. A wrapped date reads as a broken date. */ white-space: nowrap; } /* A price and its currency symbol are ONE token, not two islands. */ .woocommerce-Price-amount .woocommerce-Price-currencySymbol { unicode-bidi: inherit; white-space: inherit; } /* -------------------------------------------------------------------------- 3. SVG inherits the document direction. RTL invariant 9. Text anchors flip and Latin labels reorder. Under direction:rtl, text-anchor:start is the RIGHT edge. -------------------------------------------------------------------------- */ svg { direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 4. Arabic needs roughly 25% more vertical space than Latin. RTL invariant 8. A container sized on an English draft clips silently in Arabic. Product names vary in length, so the card must grow. No fixed height with hidden overflow is permitted anywhere in the kit. -------------------------------------------------------------------------- */ .wida-card, .wida-card__info, ul.products li.product, .elementor-widget-woocommerce-products li.product { min-block-size: auto; block-size: auto; overflow: visible; } /* -------------------------------------------------------------------------- 5. The hairline grid. Rules come from the grid gap, not from borders, which is what keeps them exactly 1px with no doubling at intersections and no orphan edge rule on the last row. Design system section 2. -------------------------------------------------------------------------- */ ul.products, .wida-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--wida-line); list-style: none; margin: 0; padding: 0; } ul.products > li.product, .wida-grid > * { background: var(--wida-bg); margin: 0; width: auto; } /* The card's TYPE is inset; the photograph is not. The grid is deliberately full-bleed, so the images run to the edge of the screen and the 1px gap is the only rule. The text was inheriting that and sitting flush against the viewport edge as well: measured at 375px, the garment name's box ran to x=375 with zero padding anywhere in the chain, so the last glyph touched the bezel. Padding the card or the card link would inset the photograph too and lose the full bleed, so the inset goes on the text elements themselves. */ ul.products > li.product .wida-type, ul.products > li.product .wida-code, ul.products > li.product .price, ul.products > li.product .woocommerce-loop-product__title { padding-inline: var(--wida-3); } ul.products > li.product .wida-type, ul.products > li.product .woocommerce-loop-product__title { padding-block-start: var(--wida-3); } ul.products > li.product .price { padding-block-end: var(--wida-4); } @media (min-width: 768px) { ul.products, .wida-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1025px) { ul.products, .wida-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Page edges are logical so one stylesheet serves both directions. The product grid runs edge to edge: the images are the page. */ .wida-edge { padding-inline: var(--wida-edge); } /* Section rule. The only division that is not a grid gap. */ .wida-rule { border: 0; border-block-start: var(--wida-hairline); margin-block: var(--wida-8); } /* -------------------------------------------------------------------------- 6. Imagery. Design system section 5. 2:3 matches the 1280x1920 source. Top-center crop keeps a face and a neckline. -------------------------------------------------------------------------- */ .wida-shot, ul.products li.product a img, .wida-gallery .shot { aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; background: var(--wida-surface); inline-size: 100%; block-size: auto; } /* -------------------------------------------------------------------------- 7. Motion. Design system section 6. Opacity and transform only, and never against a stated preference. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 8. Validation and sold-out states are achromatic. Colour is never the only carrier of meaning (WCAG 1.4.1), and this system has no colour to spend. Weight, text and an inline-start rule carry it. --wida-critical is the single token to change if a functional red is ever approved. -------------------------------------------------------------------------- */ .wida-notice, .woocommerce-error, .woocommerce-info, .woocommerce-message { border: 0; border-inline-start: 2px solid var(--wida-critical); padding-inline-start: var(--wida-4); padding-block: var(--wida-3); background: var(--wida-surface); color: var(--wida-fg); } .wida-soldout { color: var(--wida-muted); text-decoration: line-through; } /* -------------------------------------------------------------------------- 10. Gold: dividers and highlight. Nothing else. The accent is light on purpose. It complements black and white rather than competing with them, so it lives in the lines between things and in the wash behind a phrase. TWO uses, and the list is closed: 1. Line dividers. The hairline grid, section rules, table rules. --wida-line IS the gold, so this needs no extra class. 2. Highlight. A wash behind a word or a line, like a marker. NEVER: gold text it is 1.32:1, it cannot be read gold on a button or badge a control needs a boundary, this has none a gold focus ring focus is #111 at 18.9:1, see below gold carrying meaning 1.4.11: it is too light to be the only signal Decorative dividers and a non-meaningful highlight are exempt from the 3:1 non-text requirement. A FORM FIELD is not: its border is a component boundary, so it uses --wida-muted at 5.7:1. Today's live site draws that border at 1.26:1, so this fixes a pre-existing failure rather than introducing one. -------------------------------------------------------------------------- */ /* Highlight. The one expressive use, and it stays behind the text. */ .wida-mark { background: var(--wida-gold-wash); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.15em; } /* A selected or active row, same wash. */ .wida-active { background: var(--wida-gold-wash); } /* An emphasis rule, heavier than the hairline but the same colour family. */ .wida-rule-gold { border: 0; border-block-start: 2px solid var(--wida-gold); margin-block: var(--wida-8); } /* Focus is #111, not gold. At 1.32:1 a gold ring is invisible on white and on the surface grey alike, and a focus ring that cannot be seen is not a focus ring. The offset keeps it legible over a photograph. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wida-fg); outline-offset: 2px; } /* Form fields are components, so their boundary clears 3:1. */ input, select, textarea { border: 1px solid var(--wida-muted); border-radius: 0; } /* -------------------------------------------------------------------------- 11. The logo. One SVG per lockup, filled with currentColor, so black, white and gold are a colour change rather than three files. Proven identical: the supplied white lockup carried the same 43 paths as the black one. Aspect ratios are fixed and must not be altered: lockup 2.374 : 1 mark 1.021 : 1 wordmark 1.714 : 1 The logotype is Latin only. There is no Arabic wordmark, so the mark alone is what carries the brand in Arabic-first contexts. -------------------------------------------------------------------------- */ .wida-logo { display: block; inline-size: auto; color: var(--wida-fg); } .wida-logo--lockup { block-size: clamp(34px, 4.5vw, 52px); } .wida-logo--mark { block-size: clamp(30px, 3.5vw, 44px); } /* Minimum sizes. Below these the rays in the mark begin to fill in. */ .wida-logo--lockup { min-block-size: 28px; } .wida-logo--mark { min-block-size: 24px; } /* Clear space: half the mark's height on every side, expressed logically. */ .wida-logo-frame { padding: calc(var(--wida-6) / 2); } /* On photography or a dark ground the logo goes white, never grey. */ .wida-logo--invert { color: var(--wida-bg); } /* The logo is black, or white on a dark ground. It is never gold: the accent is too light to hold a mark of this weight, and the mark is not where an accent belongs. */ /* -------------------------------------------------------------------------- 12. Navigation is a plain list, and the header is a two-row layout on phones. Elementor Pro's Nav Menu widget was removed on 2026-09-06 (founder decision). Measured: 27 KB of CSS and 24 KB of smartmenus JavaScript, on a launch-state shell of 546 KB against a 330 KB budget, to render four fixed links with no dropdown and no mega menu. `[wida_menu]` in wida-commerce renders the same WordPress menu through `wp_nav_menu`, so the links stay editable under Appearance > Menus; the layout moved here. No JavaScript anywhere in this section. The burger drawer the widget provided is replaced by putting the four links on their own row under the logo on phones, which reaches every destination in one tap instead of two and cannot break when a script fails to load. -------------------------------------------------------------------------- */ .wida-menu__list { display: flex; margin: 0; padding: 0; list-style: none; } .wida-menu__list.is-row { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--wida-6); row-gap: var(--wida-1); } .wida-menu__list.is-column { flex-direction: column; row-gap: var(--wida-1); } .wida-menu__list > li { margin: 0; } .wida-menu a { display: inline-block; color: var(--wida-fg); font-size: 14px; line-height: 1.6; text-decoration: none; /* A transparent border rather than none, so the hover state adds colour and never adds height. A menu that shifts on hover reads as a bug. */ border-block-end: 1px solid transparent; /* The padding is the tap target, not decoration. Measured at 375px, the four labels come to 26px of list height with no padding, which is a 22px target on the one row that carries every navigation on the site. */ padding-block: var(--wida-2); } .wida-menu a:hover, .wida-menu a:focus-visible { border-block-end-color: var(--wida-fg); } /* The current page is marked, and it is marked the same way hover is. The accent is too light to carry state on its own (1.32:1), and state carried by colour alone fails anyway. Section 10, and RTL invariant on meaning. */ .wida-menu .current-menu-item > a, .wida-menu .current-menu-ancestor > a { border-block-end-color: var(--wida-fg); } /* Header. The container is `row-reverse`, so under `dir=rtl` the first child paints at the physical LEFT: logo, then nav, then the bag. The auto margin is written physically on purpose. `margin-inline-end` resolves against the document's RTL direction, not against the reversed flex axis, and would push the wrong way. This is the same class of trap as Elementor's Left and Right spacing controls, which are physical and do not flip (see the verification pass of 2026-09-06). */ .wida-header > .wida-header-logo { margin-right: auto; } .wida-header > .wida-header-nav .wida-menu__list.is-row { column-gap: var(--wida-6); } @media (max-width: 767px) { /* Two rows: logo and bag on the first, the four links on the second. `flex-basis: 100%` is what forces the break; `order` alone would not, because the container would still try to fit all three on one line and at 375px the four Arabic labels plus the lockup do not fit. */ .wida-header > .wida-header-nav { order: 3; flex-basis: 100%; } .wida-header > .wida-header-nav .wida-menu__list.is-row { justify-content: space-between; column-gap: var(--wida-3); } .wida-menu a { font-size: 13px; /* 13px at 1.6 is 21px of text; 12px each side takes the target to 45px, past the 44px that phone guidance asks for. The four labels measure 156px inside a 343px row, so there is room to spend. */ padding-block: var(--wida-3); } /* Footer links get a real target too. They are 14px at 1.6, so 6px each side reaches 34px: short of 44, and deliberately, because raising them further would space the eight categories out past the compact footer the founder approved on 2026-09-06. Flagged rather than silently traded away. */ .wida-footnav .wida-menu a { padding-block: 6px; } } /* Footer list. 14px body, matching the founder's review of 2026-09-06. */ .wida-footnav .wida-menu a { padding-block: 2px; } /* -------------------------------------------------------------------------- 13. The WooCommerce pages with no Theme Builder template. Account and cart run on WooCommerce's own markup through Hello Elementor's bare page template. Reviewed on the live build 2026-09-06: the account dashboard was a browser-default bulleted list of underlined links with no page padding, which reads as a broken page rather than a quiet one. Checkout gets nothing here, and that is a finding rather than an omission: with no variations generated, nothing is purchasable, nothing can enter the cart, and WooCommerce redirects an empty cart away from checkout. The page is unreachable by any customer today. It is designed when the gateway and the variations land, against real content, not now against a guess. Everything below is scoped to a body class so it cannot leak into the Theme Builder templates, which own their own spacing. -------------------------------------------------------------------------- */ .woocommerce-account .site-main, .woocommerce-cart .site-main, .woocommerce-checkout .site-main { max-inline-size: 1100px; margin-inline: auto; padding-inline: var(--wida-6); padding-block: var(--wida-12) var(--wida-16); } .woocommerce-account .page-header .entry-title, .woocommerce-cart .page-header .entry-title { margin-block-end: var(--wida-8); padding-block-end: var(--wida-4); border-block-end: 1px solid var(--wida-line); } /* Account navigation. Woo ships it as a bare