/* ========================================================================= OLFA (institute 41, theme 29) - Arabic page only. PUSHPENDRA-246 Linked by theme_page/layouts/app.blade.php AFTER the page's own CSS, and only when the locale is ar on theme 29 (the same $__lcIsRtl gate that sets ). The English site never loads this file. 1. Arabic letters in the theme's own faces. 2. No letter-spacing on Arabic (it breaks the joined letters). 3. Photos never mirror: the picture grids keep the English order (the views set dir="ltr" on the grid, dir="rtl" on the text inside each card); the text overlays are right-aligned with the English padding. Verified 2026-10-15: no scaleX(-1) / rotateY rule in lelabotheme.css, arbic.css or arabic_comn.css reaches an OLFA photo (the shared flips hit icons and other themes' containers only). ========================================================================= */ /* 1. The theme sets its faces through ~40 selectors (many !important, some with ids), so overriding font-family would fight specificity everywhere. Instead the SAME family names get an extra face limited to the Arabic ranges: every rule that asks for MagdaClean / MagdaCleanMono / Avenir draws Arabic letters from DIN Next LT Arabic (already shipped in assets/fonts) and Latin from the brand face, unchanged. */ @font-face { font-family: 'MagdaClean'; src: url('../fonts/ArbFONTSDINNextLTArabicRegular4.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'MagdaCleanMono'; src: url('../fonts/ArbFONTSDINNextLTArabicBold4.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Avenir'; src: url('../fonts/ArbFONTSDINNextLTArabicRegular4.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Avenir'; src: url('../fonts/ArbFONTSDINNextLTArabicMedium4.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Avenir'; src: url('../fonts/ArbFONTSDINNextLTArabicBold4.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* 2. Tracking is for the Latin capitals; on Arabic it pulls the joined letters apart. English kept inside the page () is not :lang(ar). */ html[dir="rtl"] body.themeclass29 :lang(ar) { letter-spacing: 0 !important; } /* 3a. Hero strip: columns in the English order, each column's text on the right. */ html[dir="rtl"] body.themeclass29 .hero-slider .teaser-inner[dir="rtl"] { text-align: right; } @media (min-width: 821px) { html[dir="rtl"] body.themeclass29 .hero-slider .teaser { justify-items: end; } } @media (max-width: 820px) { html[dir="rtl"] body.themeclass29 .hero-slider .teaser { align-items: flex-end; } } /* 3b. New From OLFA: big panel / small panel exactly where English has them; the text block sits at the right edge with the English inset, DISCOVER under it. */ html[dir="rtl"] body.themeclass29 section.new-releases .new-release-card__copy[dir="rtl"] { left: auto !important; right: 42px !important; text-align: right; } html[dir="rtl"] body.themeclass29 section.new-releases .new-releases__secondary .new-release-card__copy[dir="rtl"] { left: 22px !important; right: 28px !important; } @media (max-width: 900px) { html[dir="rtl"] body.themeclass29 section.new-releases .new-release-card__copy[dir="rtl"], html[dir="rtl"] body.themeclass29 section.new-releases .new-releases__secondary .new-release-card__copy[dir="rtl"] { left: 24px !important; right: 24px !important; margin-left: auto; } } /* The section heading starts on the right, as it starts on the left in English. */ html[dir="rtl"] body.themeclass29 section.new-releases .new-releases__header, html[dir="rtl"] body.themeclass29 section.new-releases .new-releases__header h2.new-releases__title { text-align: right !important; } /* 3c. Reviews: the carousel stays left-to-right (the track moves by translateX and "previous" stays on the left); each card's own text runs right-to-left. */ html[dir="rtl"] body.themeclass29 .olfa-reviews[dir="ltr"] .olfa-review { direction: rtl; text-align: center; } /* 4. Footer newsletter: the e-mail field is typed left-to-right; its Arabic placeholder still reads right-to-left. */ html[dir="rtl"] body.themeclass29 .site-footer .llb-newsletter-form input[type="email"]::placeholder { direction: rtl; text-align: right; } html[dir="rtl"] body.themeclass29 .site-footer .llb-newsletter-form input[type="email"]:placeholder-shown { text-align: right; } /* 4b. PUSHPENDRA-247 - English DATA on an Arabic page (product names, notes, variant labels, chips, category text, cart lines, search results) until the *_ar columns are filled. unicode-bidi:plaintext takes each paragraph's direction from its own first letter - so "Warm resin." keeps its full stop at the end - and survives the page scripts that rewrite these texts (textContent), which a would not. Short labels stay on the right; long English paragraphs (description, accordions) read left-aligned. */ html[dir="rtl"] body.themeclass29 #vp-title, html[dir="rtl"] body.themeclass29 #vp-subtitle, html[dir="rtl"] body.themeclass29 .variant-title, html[dir="rtl"] body.themeclass29 .variant-sub, html[dir="rtl"] body.themeclass29 .pdp-card-name, html[dir="rtl"] body.themeclass29 .pdp-card-desc, html[dir="rtl"] body.themeclass29 .pdp-card-pack, html[dir="rtl"] body.themeclass29 .vc-chip, html[dir="rtl"] body.themeclass29 .vc-group-head, html[dir="rtl"] body.themeclass29 .pdp-page-num, html[dir="rtl"] body.themeclass29 .pdp-flatlay-name, html[dir="rtl"] body.themeclass29 .crumbs-inner > span, html[dir="rtl"] body.themeclass29 .llb-srch-list a, html[dir="rtl"] body.themeclass29 .llb-cart li .t, html[dir="rtl"] body.themeclass29 .llb-cart li a, html[dir="rtl"] body.themeclass29 .co-summary, html[dir="rtl"] body.themeclass29 .co-step-summary, html[dir="rtl"] body.themeclass29 .co-deliv-opt span { unicode-bidi: plaintext; text-align: right; } html[dir="rtl"] body.themeclass29 .classic-head p, html[dir="rtl"] body.themeclass29 .vp-desc-lead, html[dir="rtl"] body.themeclass29 .vp-desc-full, html[dir="rtl"] body.themeclass29 .vp-desc-full *, html[dir="rtl"] body.themeclass29 .vp-accordion-panel-inner, html[dir="rtl"] body.themeclass29 .vp-accordion-panel-inner * { unicode-bidi: plaintext; } /* Prices: a symbol + number has no letter to take a direction from, so in an rtl line "$ 18.00" flips to "18.00 $". Kept ltr as one unit. */ html[dir="rtl"] body.themeclass29 .pdp-card-price, html[dir="rtl"] body.themeclass29 #vp-price-main, html[dir="rtl"] body.themeclass29 .co-deliv-price { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* The accordion chevron sits at the start of the row in Arabic, like the text. */ html[dir="rtl"] body.themeclass29 .vp-accordion-header { text-align: right; } /* 5. Phone: nothing may push the page sideways in Arabic. */ @media (max-width: 767px) { html[dir="rtl"] body.themeclass29 { overflow-x: hidden; } } /* ========================================================================= ARSHAD-34 (2026-10-19) - OLFA Arabic layout (direction / alignment / position only; English never loads this file). Supersedes 3a/3b above where they kept the hero columns and the New From OLFA panels in the English order: the owner now wants both mirrored (photos themselves are not flipped, only their order). ========================================================================= */ /* 1. Home hero: the five teasers start on the right wherever they are a row (768px and up - the theme's grid). Below 768 they are the swipe slider, which stays LTR for its script. */ @media (min-width: 768px) { html[dir="rtl"] .hero-slider .teasers { direction: rtl !important; } } html[dir="rtl"] .hero-slider .teasers * { text-align: right; } /* 2. Home "جديد من OLFA": big card right, small card left. */ html[dir="rtl"] .new-releases__grid { direction: rtl !important; } html[dir="rtl"] .new-release-card__cta, html[dir="rtl"] .new-release-card__cta span { direction: rtl; } /* 3. Home reviews: the track stays LTR (JS); previous arrow on the right, next on the left, glyphs swapped. */ html[dir="rtl"] .olfa-rev-prev { left: auto !important; right: 6px !important; font-size: 0 !important; } html[dir="rtl"] .olfa-rev-next { right: auto !important; left: 6px !important; font-size: 0 !important; } html[dir="rtl"] .olfa-rev-prev::before { content: "\203A"; font-size: 34px; } html[dir="rtl"] .olfa-rev-next::before { content: "\2039"; font-size: 34px; } html[dir="rtl"] .olfa-review-text, html[dir="rtl"] .olfa-review-author { direction: rtl; text-align: center; } /* 4. Category / collection page titles (the title is a

in .classic-head). */ html[dir="rtl"] .classic-head h1, html[dir="rtl"] .classic-head h2, html[dir="rtl"] .classic-head p { text-align: right !important; } /* 5. Checkout order summary: labels right, amounts left. */ html[dir="rtl"] .co-totals dt { text-align: right !important; } html[dir="rtl"] .co-totals dd { text-align: left !important; } /* 6. Forms: text fields right-aligned; e-mail / phone / url / number keep LTR digits but sit on the right. */ html[dir="rtl"] :where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])), html[dir="rtl"] :where(textarea), html[dir="rtl"] :where(select) { direction: rtl !important; text-align: right !important; } html[dir="rtl"] input[type=email], html[dir="rtl"] input[type=tel], html[dir="rtl"] input[type=url], html[dir="rtl"] input[type=number], html[dir="rtl"] input[name*=email i], html[dir="rtl"] input[name*=phone i], html[dir="rtl"] input[name*=website i] { direction: ltr !important; text-align: right !important; } html[dir="rtl"] input::placeholder, html[dir="rtl"] textarea::placeholder { text-align: right; } /* 7. Product page: accordion sub-headings, "أكمل ثنائي الاكتشاف" title and the "Shop the scent" cards. */ html[dir="rtl"] [id^="vp-acc-panel"] .vp-acc-subhead, html[dir="rtl"] [id^="vp-acc-panel"] .vp-accordion-panel-inner > div, html[dir="rtl"] .duo2-title, html[dir="rtl"] .vp-si-card, html[dir="rtl"] .vp-si-name, html[dir="rtl"] .vp-si-desc { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .vp-si-arrow { display: inline-block; transform: scaleX(-1); } /* 8. Scent Archive hero text box: the English position, mirrored. */ html[dir="rtl"] .osa-hero-inner { left: auto !important; right: 360px !important; text-align: right !important; } html[dir="rtl"] .osa-hero-title, html[dir="rtl"] .osa-hero-copy { text-align: right !important; } @media (max-width: 991px) { html[dir="rtl"] .osa-hero-inner { right: 24px !important; left: 24px !important; } } /* 9. Text pages (shipping, privacy, terms, returns): list indent on the right. */ html[dir="rtl"] main ul:not([class]), html[dir="rtl"] main ol:not([class]) { padding-left: 0 !important; padding-right: 22px !important; } /* 10. Phone header: the hamburger space moves to the right; logo centred. */ @media (max-width: 991px) { html[dir="rtl"] body #app nav.common-head .llb-row1.llb-row1 { padding: 0 58px 0 0 !important; } html[dir="rtl"] body #app nav.common-head .llb-row1 .bxiMiLog.bxiMiLog { left: calc(50% - 20px) !important; right: auto !important; } } /* 11. Floating buttons: WhatsApp right, back-to-top left (id repeats beat lelabotheme.css / master.css). */ html[dir="rtl"] body #buttoning#buttoning#buttoning { right: auto !important; left: 20px !important; } html[dir="rtl"] body a.whatsapp-button.whatsapp-button { left: auto !important; right: 15px !important; } /* 12. Footer copyright line keeps "© 2026 … – بواسطة" in order. */ html[dir="rtl"] .footer-copy span, html[dir="rtl"] .footer-bottom span { unicode-bidi: isolate; } /* 13. Scent Archive search box: magnifier on the right, the field's text room swapped to match (partials/rtl-inputs pins the computed padding at load, so it pins these values). */ html[dir="rtl"] .osa-search-wrap::before { left: auto !important; right: 16px !important; } html[dir="rtl"] .osa-search-wrap .osa-search { padding-left: 14px !important; padding-right: 42px !important; } /* ===== END ARSHAD-34 ===== */ /* ========================================================================= ARSHAD-35 (2026-10-19) - OLFA Arabic fonts, replaces the GE block (ARSHAD-32, removed). Arabic page only; every rule under html[dir="rtl"]. - Noto Sans Arabic Regular : body text (was DIN Next LT Arabic until the owner's product-page mark-up of 19 Oct; DIN files stay in the folder) - Noto Sans Arabic SemiBold : headings, mega-menu headings, bold text, buttons - El Messiri SemiBold : site menu, home slider titles, product titles Files in resources/assets/fonts/olfa-ar/ (.woff first, .ttf second; El Messiri and Noto are fixed instances cut from the Google variable fonts). unicode-range keeps them to Arabic letters, so Latin words and digits keep the brand faces. Weight ranges: the SemiBold faces answer 600-900 (theme 700/800 draws the real SemiBold, not a fake bold); the body face answers 100-500. ========================================================================= */ @font-face { font-family: "OLFA Body AR"; src: url("../../fonts/olfa-ar/NotoSansArabic-Regular.woff") format("woff"), url("../../fonts/olfa-ar/NotoSansArabic-Regular.ttf") format("truetype"); font-weight: 100 500; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } @font-face { font-family: "OLFA Display AR"; src: url("../../fonts/olfa-ar/ElMessiri-SemiBold.woff") format("woff"), url("../../fonts/olfa-ar/ElMessiri-SemiBold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } @font-face { font-family: "OLFA Title AR"; src: url("../../fonts/olfa-ar/NotoSansArabic-SemiBold.woff") format("woff"), url("../../fonts/olfa-ar/NotoSansArabic-SemiBold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; } html[dir="rtl"] { --ar-display: "OLFA Display AR", "MagdaClean", Arial, sans-serif; --ar-title: "OLFA Title AR", "MagdaClean", Arial, sans-serif; --ar-body: "OLFA Body AR", "Avenir", "Helvetica Neue", Arial, sans-serif; } /* 1) Body text - Noto Sans Arabic Regular */ html[dir="rtl"] body, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] label, html[dir="rtl"] dd, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] .llb-annc__slide, html[dir="rtl"] .teaser p, html[dir="rtl"] .teaser-tag, html[dir="rtl"] .mega-subcat-products a, html[dir="rtl"] .mega-prod-name, html[dir="rtl"] .footer-col a, html[dir="rtl"] .site-footer p { font-family: var(--ar-body) !important; font-weight: 400 !important; line-height: 1.8; } /* 2) Headings, mega-menu headings, bold text - Noto Sans Arabic SemiBold */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, button, dt) *, html[dir="rtl"] strong, html[dir="rtl"] b, html[dir="rtl"] dt, html[dir="rtl"] .mega-group-title, html[dir="rtl"] .mega-subcat-title, html[dir="rtl"] .mega-prod-head-title, html[dir="rtl"] .olfa-heading, html[dir="rtl"] .new-releases__title, html[dir="rtl"] .classic-head h1, html[dir="rtl"] .olfa-feature-title, html[dir="rtl"] .footer-col h4, html[dir="rtl"] .vp-accordion-title, html[dir="rtl"] .delivery-title, html[dir="rtl"] .teaser-more, html[dir="rtl"] button, html[dir="rtl"] .btn, html[dir="rtl"] .co-cta { font-family: var(--ar-title) !important; font-weight: 600 !important; letter-spacing: 0 !important; } /* 3) Site menu, home slider titles, product titles - El Messiri SemiBold */ html[dir="rtl"] nav.main-nav .nav-item > a, html[dir="rtl"] .sidebar-nav-item > a, html[dir="rtl"] .hero-slider .teaser h3, html[dir="rtl"] .teaser-inner h3, html[dir="rtl"] .vp-title-col h1, html[dir="rtl"] .pdp-card-name, html[dir="rtl"] :is(.teaser-inner h3, .vp-title-col h1, .pdp-card-name, .new-release-card__copy h3, .duo2-title) *, html[dir="rtl"] .new-release-card__copy h3, html[dir="rtl"] .new-release-card__title, html[dir="rtl"] .duo2-title { font-family: var(--ar-display) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Icon fonts stay as they are */ html[dir="rtl"] .fa { font-family: FontAwesome !important; } html[dir="rtl"] .material-icons { font-family: "Material Icons" !important; } /* 4) Where the theme wins with stronger selectors (ids, "html body", !important): phone side menu and product-card / flat-lay names -> El Messiri; cart drop-down head + totals, checkout labels, recommendations title -> Noto SemiBold (the theme makes them bold); mega-menu links, card descriptions and the tags left in descriptions pasted from Excel -> DIN. Fonts only. */ html[dir="rtl"] body.themeclass29 #sidebar-nav #sidebar-nav-list .sidebar-nav-item > a, html[dir="rtl"] body.themeclass29 #sidebar-nav #sidebar-nav-list .sidebar-nav-item > .llbm-toggle, html[dir="rtl"] body.themeclass29 #sidebar-nav #sidebar-nav-list .sidebar-nav-item > .llbm-toggle span, html[dir="rtl"] body.themeclass29 .pdp-card .pdp-card-name, html[dir="rtl"] body.themeclass29 .pdp-flatlay .pdp-flatlay-name, html[dir="rtl"] body.themeclass29 section.new-releases .new-release-card__name, html[dir="rtl"] body.themeclass29 .flatlay .flatlay-overlay { font-family: var(--ar-display) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } html[dir="rtl"] body.themeclass29 .llb-cart-head .t, html[dir="rtl"] body.themeclass29 .vp-recs-title, html[dir="rtl"] body.themeclass29 ul.dropdownCartloginwh li#total_amount .pricecountheader > span, html[dir="rtl"] body.themeclass29 ul.llb-cart li#total_amount .pricecountheader > span, html[dir="rtl"] body.themeclass29 ul.dropdownCartloginwh li#total_amount a.llb-checkout, html[dir="rtl"] body.themeclass29 ul.llb-cart li#total_amount a.llb-checkout, html[dir="rtl"] body.themeclass29 ul.dropdownCartloginwh li#total_amount a.llb-cartlist, html[dir="rtl"] body.themeclass29 ul.llb-cart li#total_amount a.llb-cartlist, html[dir="rtl"] body.themeclass29 .vp-acc-subhead, html[dir="rtl"] body.themeclass29 .co-deliv-label, html[dir="rtl"] body.themeclass29 .co-pay-section-title, html[dir="rtl"] body.themeclass29 .co-item-name, html[dir="rtl"] body.themeclass29 .co-grand-dt, html[dir="rtl"] body.themeclass29 .co-grand-dd, html[dir="rtl"] body.themeclass29 .co-page-title, html[dir="rtl"] body.themeclass29 .cu-title, html[dir="rtl"] body.themeclass29 .dropdown-button .badge, html[dir="rtl"] body.themeclass29 .site-footer .footer-bottom { font-family: var(--ar-title) !important; font-weight: 600 !important; letter-spacing: 0 !important; } html[dir="rtl"] body.themeclass29 .main-nav .mega-group-cols a, html[dir="rtl"] body.themeclass29 .main-nav .mega-subcat-products li a, html[dir="rtl"] body.themeclass29 .pdp-card .pdp-card-desc, html[dir="rtl"] body.themeclass29 font { font-family: var(--ar-body) !important; font-weight: 400 !important; } /* 5) El Messiri is wider than the brand face: at 1100-1300px the top menu broke onto two rows. The menu size goes down by 1px at each of the theme's own steps (18 / 16 / 14px -> 17 / 15 / 13px); just above the 1260 and 1470 steps (1261-1280, 1471-1490px) it still wrapped, so those strips use 14px / 16px; 1151-1170px (where the theme's own header leaves the menu ~75px narrower) uses 12px. Nothing else changes. */ html[dir="rtl"] body.themeclass29 .main-nav .nav-item > a { font-size: 17px !important; } @media (min-width: 1471px) and (max-width: 1490px) { html[dir="rtl"] body.themeclass29 .main-nav .nav-item > a { font-size: 16px !important; } } @media (max-width: 1470px) { html[dir="rtl"] body.themeclass29 .main-nav .nav-item > a { font-size: 15px !important; } } @media (min-width: 1261px) and (max-width: 1280px) { html[dir="rtl"] body.themeclass29 .main-nav .nav-item > a { font-size: 14px !important; } } @media (max-width: 1260px) { html[dir="rtl"] body.themeclass29 .main-nav .nav-item > a { font-size: 13px !important; } } @media (min-width: 1151px) and (max-width: 1170px) { html[dir="rtl"] body.themeclass29 .main-nav .nav-item > a { font-size: 12px !important; } } /* 6) Owner's product-page + home mark-up (19 Oct): "أضف إلى الحقيبة" and the home "قصتنا" button (both links) in Noto SemiBold like the other buttons; the home-delivery block heading in the body face. */ html[dir="rtl"] body.themeclass29 a.add-to-bag, html[dir="rtl"] body.themeclass29 a.olfa-story-btn, html[dir="rtl"] body.themeclass29 a.olfa-story-btn *, html[dir="rtl"] body.themeclass29 a.add-to-bag * { font-family: var(--ar-title) !important; font-weight: 600 !important; letter-spacing: 0 !important; } html[dir="rtl"] body.themeclass29 .delivery .delivery-title, html[dir="rtl"] body.themeclass29 .delivery-title { font-family: var(--ar-body) !important; font-weight: 400 !important; } /* ===== END ARSHAD-35 ===== */