/* * Arabic / RTL layer for the Ecomus electronics theme. * * The template already compiles a `.rtl` block into styles.css, which the core * header now activates by putting the language direction on . This file * adds what that block does not: Arabic typography, and the handful of places * where the template hardcodes a left/right value outside its own rtl scope. * * Loaded only when the active language is RTL (theme.json -> rtl_style). */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap'); body.rtl, body.rtl .font-2, body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl .btn, body.rtl button, body.rtl input, body.rtl select, body.rtl textarea { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* Arabic renders taller than Latin at the same size; the template's tight heading leading clips descenders on letters like ج and ي. */ body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6 { line-height: 1.5; } /* Latin letter-spacing applied to Arabic separates joined glyphs. */ body.rtl .text-uppercase, body.rtl .btn, body.rtl .tf-btn { letter-spacing: 0; } body.rtl { text-align: right; } /* The demo's RTL toggle button is a template preview control, not a shop feature — direction here follows the active language. */ body.rtl #toggle-rtl, #toggle-rtl { display: none !important; } /* Swiper computes its own direction from the dir attribute, but only when the attribute is on the container it initialises. */ body.rtl .swiper { direction: rtl; } /* Sliders and marquees are visual motion, not reading order: flipping them makes product carousels scroll away from the reading direction. */ body.rtl .tf-marquee .marquee-item, body.rtl .swiper-wrapper.marquee { direction: ltr; } /* Prices, phone numbers and counters stay left-to-right so digits and any currency symbol keep their order. */ body.rtl .price-wrap, body.rtl .price-on-sale, body.rtl .compare-at-price, body.rtl .tf-countdown .countdown__timer, body.rtl .tf-currencies, body.rtl input[type="tel"] { direction: ltr; unicode-bidi: embed; } body.rtl .price-wrap, body.rtl .tf-countdown .countdown__timer { display: inline-flex; justify-content: flex-end; } /* Icon nudges written as one-sided margins in the base sheet. */ body.rtl .tf-btn .icon, body.rtl .nav-icon-item .icon { margin-left: 0; margin-right: 6px; } body.rtl .form-search .icon, body.rtl .tf-product-info-list .icon { left: auto; right: 12px; } body.rtl .header-default .nav-icon > li:first-child { margin-right: 0; } /* Breadcrumb separators point the wrong way when mirrored. */ body.rtl .breadcrumb-item + .breadcrumb-item::before { transform: scaleX(-1); } /* ------------------------------------------------------------------ Theme-added elements The template's header is a mega-menu with its own offcanvas markup. This theme uses a simpler nav, so the few elements that are ours rather than the template's need their own rules — without them they render inline and the header shows the menu twice. ------------------------------------------------------------------ */ /* Mobile drawer: hidden on desktop, revealed by the hamburger below lg. */ .ec-mobile-nav { display: none; padding: 16px 20px 24px; border-top: 1px solid var(--line, #e5e5e5); background: #fff; } .ec-mobile-nav.open { display: block; } @media (min-width: 1200px) { .ec-mobile-nav, .ec-menu-toggle { display: none !important; } } .ec-mobile-nav .ec-mobile-links { list-style: none; margin: 0 0 14px; padding: 0; } .ec-mobile-nav .ec-mobile-links li { padding: 8px 0; } .ec-mobile-nav .ec-mobile-links a { color: var(--text, #181818); font-weight: 500; } .ec-mobile-search { display: flex; gap: 8px; } .ec-mobile-search input { flex: 1; height: 42px; padding: 0 14px; border: 1px solid var(--line, #e5e5e5); border-radius: 8px; } .ec-mobile-search button { width: 42px; height: 42px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; } .ec-menu-toggle { background: none; border: 0; padding: 0; font-size: 20px; line-height: 1; } /* Search results inside the drawer. */ .ec-search-results { list-style: none; margin: 0; padding: 0; } .ec-search-empty { padding: 24px; text-align: center; color: var(--text-2, #888); } /* A product with no image still needs to occupy the card's space. */ .ec-card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background: #f5f5f5; color: #bbb; font-size: 32px; } /* ------------------------------------------------------------------ bootstrap-select: avoid the flash of a raw