/** * RTL Overrides for Hebrew Language * Applied when dir="rtl" is set on the element. * Works alongside the LTR-default style.css. */ /* ========================================================================== 1. Global / Typography ========================================================================== */ [dir="rtl"] body { font-family: 'Heebo', sans-serif; text-align: right; } [dir="rtl"] .container { direction: rtl; } /* ========================================================================== 2. Header ========================================================================== */ [dir="rtl"] .header-top-content { flex-direction: row-reverse; } [dir="rtl"] .header-contact { direction: rtl; } [dir="rtl"] .header-contact a { margin-inline-start: 0; margin-inline-end: 1.25rem; } [dir="rtl"] .header-contact a:first-child { margin-inline-end: 0; } [dir="rtl"] .header-contact i { margin-inline-start: 0.375rem; margin-inline-end: 0; } [dir="rtl"] .header-lang { direction: rtl; } [dir="rtl"] .header-main-content { flex-direction: row-reverse; } /* Search form direction */ [dir="rtl"] .header-search { direction: rtl; } [dir="rtl"] .header-search input { text-align: right; padding-inline-start: 1rem; padding-inline-end: 0.75rem; } [dir="rtl"] .header-search button { right: auto; left: 0; border-radius: 0.375rem 0 0 0.375rem; } [dir="rtl"] .search-suggestions { text-align: right; } /* ========================================================================== 3. Navigation ========================================================================== */ [dir="rtl"] .nav-list { flex-direction: row-reverse; } [dir="rtl"] .nav-item > a { text-align: right; } /* Dropdown alignment - open from the right side */ [dir="rtl"] .nav-dropdown { left: auto; right: 0; text-align: right; } [dir="rtl"] .nav-item.has-children > a::after { margin-inline-start: 0.375rem; margin-inline-end: 0; } /* ========================================================================== 4. Breadcrumb ========================================================================== */ [dir="rtl"] .breadcrumb { direction: rtl; text-align: right; } [dir="rtl"] .breadcrumb .separator { display: inline-flex; transform: scaleX(-1); } [dir="rtl"] .breadcrumb .separator .fa-chevron-right { transform: scaleX(-1); } /* ========================================================================== 5. Hero Slider ========================================================================== */ [dir="rtl"] .slide-content { text-align: right; } /* Swap slider nav arrows */ [dir="rtl"] .slider-prev { left: auto; right: 1rem; } [dir="rtl"] .slider-next { right: auto; left: 1rem; } [dir="rtl"] .slider-prev .fa-chevron-left { transform: scaleX(-1); } [dir="rtl"] .slider-next .fa-chevron-right { transform: scaleX(-1); } [dir="rtl"] .slider-dots { direction: ltr; } /* ========================================================================== 6. Quick Search ========================================================================== */ [dir="rtl"] .quick-search-form { flex-direction: row-reverse; } [dir="rtl"] .quick-search-form input { text-align: right; border-radius: 0 0.5rem 0.5rem 0; } [dir="rtl"] .quick-search-form button { border-radius: 0.5rem 0 0 0.5rem; } /* ========================================================================== 7. Section Headers ========================================================================== */ [dir="rtl"] .section-header { flex-direction: row-reverse; } [dir="rtl"] .section-header h2 { text-align: right; } [dir="rtl"] .see-all { flex-direction: row-reverse; } [dir="rtl"] .see-all .fa-arrow-right { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 0.375rem; } /* ========================================================================== 8. Categories Grid ========================================================================== */ [dir="rtl"] .categories-grid { direction: rtl; } [dir="rtl"] .category-card { text-align: right; } [dir="rtl"] .category-info { text-align: right; } /* ========================================================================== 9. Products Grid & Card ========================================================================== */ [dir="rtl"] .products-grid { direction: rtl; } [dir="rtl"] .product-card { text-align: right; } [dir="rtl"] .product-card-info { text-align: right; } [dir="rtl"] .product-card-category { text-align: right; } [dir="rtl"] .badge-featured { left: 0.75rem; right: auto; } /* List view adjustments */ [dir="rtl"] .products-grid.view-list .product-card { flex-direction: row-reverse; } /* ========================================================================== 10. Catalog Layout ========================================================================== */ /* Sidebar on the right for RTL */ [dir="rtl"] .catalog-layout { flex-direction: row-reverse; } [dir="rtl"] .catalog-sidebar { border-left: none; border-right: none; border-inline-end: 1px solid #e5e7eb; margin-inline-end: 0; margin-inline-start: 0; padding-inline-end: 0; padding-inline-start: 1.5rem; } [dir="rtl"] .sidebar-header { flex-direction: row-reverse; } [dir="rtl"] .filter-group { text-align: right; } [dir="rtl"] .filter-list { padding-inline-start: 0; padding-inline-end: 0; } [dir="rtl"] .filter-list a .count { margin-inline-start: 0; margin-inline-end: auto; float: left; } [dir="rtl"] .price-filter { flex-direction: row-reverse; } /* Catalog toolbar */ [dir="rtl"] .catalog-toolbar { flex-direction: row-reverse; } [dir="rtl"] .toolbar-left { text-align: right; } [dir="rtl"] .toolbar-right { flex-direction: row-reverse; } [dir="rtl"] .sort-select { direction: rtl; text-align: right; } [dir="rtl"] .view-toggle { flex-direction: row-reverse; } /* Subcategories strip */ [dir="rtl"] .subcategories-strip { direction: rtl; } /* ========================================================================== 11. Product Detail Page ========================================================================== */ [dir="rtl"] .product-detail { flex-direction: row-reverse; } /* Product gallery */ [dir="rtl"] .product-gallery { margin-inline-end: 0; margin-inline-start: 2rem; } [dir="rtl"] .gallery-thumbs { direction: rtl; } /* Product info */ [dir="rtl"] .product-info { text-align: right; } [dir="rtl"] .product-sku { text-align: right; } [dir="rtl"] .product-meta-item { text-align: right; } [dir="rtl"] .product-tags { text-align: right; direction: rtl; } [dir="rtl"] .product-tags .tag { margin-inline-start: 0; margin-inline-end: 0.375rem; } [dir="rtl"] .product-actions { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .product-actions .btn i { margin-inline-start: 0.375rem; margin-inline-end: 0; } [dir="rtl"] .product-share { direction: rtl; text-align: right; } [dir="rtl"] .product-share .share-btn { margin-inline-start: 0; margin-inline-end: 0.5rem; } /* Tabs */ [dir="rtl"] .tab-headers { flex-direction: row-reverse; } [dir="rtl"] .tab-panel { text-align: right; } /* Specs table */ [dir="rtl"] .specs-table th { text-align: right; } [dir="rtl"] .specs-table td { text-align: right; } /* ========================================================================== 12. Search Page ========================================================================== */ [dir="rtl"] .search-form-large { flex-direction: row-reverse; } [dir="rtl"] .search-form-large input { text-align: right; border-radius: 0 0.5rem 0.5rem 0; } [dir="rtl"] .search-form-large button { border-radius: 0.5rem 0 0 0.5rem; } /* ========================================================================== 13. Contact Page ========================================================================== */ [dir="rtl"] .contact-layout { flex-direction: row-reverse; } [dir="rtl"] .contact-form { text-align: right; } [dir="rtl"] .contact-form label { text-align: right; } [dir="rtl"] .contact-form input, [dir="rtl"] .contact-form textarea { text-align: right; } [dir="rtl"] .form-row { flex-direction: row-reverse; } [dir="rtl"] .contact-info-sidebar { margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; padding-inline-end: 2rem; border-left: none; border-right: none; border-inline-start: 1px solid #e5e7eb; } [dir="rtl"] .contact-info-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .contact-info-item i { margin-inline-start: 0; margin-inline-end: 0; margin-left: 1rem; margin-right: 0; } /* ========================================================================== 14. Page Content / Prose ========================================================================== */ [dir="rtl"] .page-header { text-align: right; } [dir="rtl"] .page-content { text-align: right; } [dir="rtl"] .prose { text-align: right; } [dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-inline-start: 1.5rem; padding-inline-end: 0; } /* ========================================================================== 15. Footer ========================================================================== */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-col { text-align: right; } [dir="rtl"] .footer-links { padding-inline-start: 0; text-align: right; } [dir="rtl"] .footer-contact { padding-inline-start: 0; text-align: right; } [dir="rtl"] .footer-contact li i { margin-inline-start: 0; margin-inline-end: 0; margin-left: 0.5rem; margin-right: 0; } [dir="rtl"] .footer-social { direction: rtl; } [dir="rtl"] .footer-social a { margin-inline-start: 0; margin-inline-end: 0.625rem; } [dir="rtl"] .footer-social a:first-child { margin-inline-end: 0; } [dir="rtl"] .footer-bottom { text-align: right; } /* ========================================================================== 16. Buttons & Icons ========================================================================== */ [dir="rtl"] .btn i { margin-inline-start: 0.375rem; margin-inline-end: 0; } [dir="rtl"] .btn i:last-child { margin-inline-start: 0; margin-inline-end: 0.375rem; } /* ========================================================================== 17. Alerts ========================================================================== */ [dir="rtl"] .alert { text-align: right; direction: rtl; } [dir="rtl"] .alert i { margin-inline-start: 0.5rem; margin-inline-end: 0; } /* ========================================================================== 18. Pagination ========================================================================== */ [dir="rtl"] .pagination { direction: rtl; } [dir="rtl"] .pagination .fa-chevron-left { transform: scaleX(-1); } [dir="rtl"] .pagination .fa-chevron-right { transform: scaleX(-1); } /* ========================================================================== 19. Empty State ========================================================================== */ [dir="rtl"] .empty-state { text-align: center; } /* ========================================================================== 20. Back to Top ========================================================================== */ [dir="rtl"] .back-to-top { right: auto; left: 2rem; } /* ========================================================================== 21. Lightbox ========================================================================== */ [dir="rtl"] .lightbox-close { right: auto; left: 1.5rem; } /* ========================================================================== 22. Mobile Menu (RTL Adjustments) ========================================================================== */ [dir="rtl"] .mobile-menu-toggle { order: -1; } [dir="rtl"] .site-nav .nav-list { text-align: right; } /* ========================================================================== 23. Miscellaneous / Logical Properties Fallbacks ========================================================================== */ [dir="rtl"] .float-left { float: right; } [dir="rtl"] .float-right { float: left; } [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } [dir="rtl"] .category-header { text-align: right; } [dir="rtl"] .category-description { text-align: right; } [dir="rtl"] .results-count { text-align: right; }