html[dir="rtl"],
html[dir="rtl"] body,
body.rtl {
    font-family: 'Tajawal', sans-serif;
    text-align: right;
    direction: rtl;
    overflow-x: hidden;
    max-width: 100%;
}

/* Prevent wide carousels from pushing the RTL page sideways */
html[dir="rtl"] #page,
html[dir="rtl"] .main-content,
html[dir="rtl"] .site-content,
html[dir="rtl"] .hero-section {
    overflow-x: hidden;
    max-width: 100%;
}

html[dir="rtl"] .hero-carousel-viewport {
    position: relative;
    overflow: hidden !important;
    width: 100%;
    max-width: 100%;
}

html[dir="rtl"] .hero-carousel-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-width: none;
}

html[dir="rtl"] .slick-list {
    overflow: hidden !important;
}

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"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Tajawal', sans-serif;
}

html[dir="rtl"] .footer-top .row,
html[dir="rtl"] .footer-bottom .row,
html[dir="rtl"] .products-list,
html[dir="rtl"] .product-grid,
html[dir="rtl"] .row {
    direction: rtl;
}

html[dir="rtl"] .footer-list,
html[dir="rtl"] .nav-list {
    text-align: right;
}

/* Desktop header: pin nav to the right edge and icons to the left edge */
html[dir="rtl"] .header-desktop .header-wrapper .section-container > .row {
    direction: rtl;
    align-items: center;
}

html[dir="rtl"] .header-desktop .header-left {
    display: flex !important;
    justify-content: flex-start; /* RTL start = outer right */
    align-items: center;
    text-align: right;
}

html[dir="rtl"] .header-desktop .header-left > * {
    float: none !important;
}

html[dir="rtl"] .header-desktop .site-navigation {
    display: block;
    float: none !important;
    width: 100%;
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .header-desktop .site-navigation .menu,
html[dir="rtl"] .header-desktop #menu-main-menu {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start; /* RTL: first item at right edge */
    align-items: center;
    float: none !important;
    width: 100%;
    direction: rtl;
}

html[dir="rtl"] .header-desktop .site-navigation ul > li.level-0,
html[dir="rtl"] .header-desktop .menu > li {
    float: none !important;
    text-align: right;
}

html[dir="rtl"] .header-desktop .header-left .site-navigation ul > li.level-0:first-child {
    padding-right: 0;
    padding-left: 10px;
}

html[dir="rtl"] .header-desktop .header-left .site-navigation ul > li.level-0:last-child {
    padding-left: 0;
    padding-right: 10px;
}

html[dir="rtl"] .header-desktop .header-right {
    display: flex !important;
    justify-content: flex-end; /* RTL end = outer left */
    align-items: center;
    direction: rtl;
}

html[dir="rtl"] .header-desktop .header-page-link {
    display: flex !important;
    justify-content: flex-end; /* RTL end = outer left */
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    direction: rtl;
    text-align: left;
    gap: 18px;
}

html[dir="rtl"] .header-desktop .currency-box {
    transform: none !important;
}

html[dir="rtl"] .header-desktop .currency-button {
    width: auto;
    min-width: 0;
    padding: 5px 10px;
    text-align: right;
}

/* Mega menu dropdown: right-align text and underline */
html[dir="rtl"] .header-desktop .sub-menu,
html[dir="rtl"] .header-desktop .menu-section,
html[dir="rtl"] .header-desktop .sub-menu-title,
html[dir="rtl"] .header-desktop .menu-list,
html[dir="rtl"] .header-desktop .menu-list li,
html[dir="rtl"] .header-desktop .menu-list li a {
    text-align: right;
}

html[dir="rtl"] .header-desktop .sub-menu-title:before,
html[dir="rtl"] .site-navigation ul div.sub-menu .sub-menu-title:before {
    left: auto !important;
    right: 0;
}

html[dir="rtl"] .header-desktop .mega-menu > .sub-menu,
html[dir="rtl"] .header-desktop li.level-0.mega-menu > .sub-menu {
    left: auto;
    right: 0;
}

html[dir="rtl"] .header-desktop .menu-list li a {
    justify-content: flex-end;
}

html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .cart-popup,
html[dir="rtl"] .mini-cart-item,
html[dir="rtl"] .total-cart,
html[dir="rtl"] .checkout-form,
html[dir="rtl"] .page-checkout,
html[dir="rtl"] .shop-cart,
html[dir="rtl"] .form-fields,
html[dir="rtl"] label {
    text-align: right;
}

/* Custom hero carousel uses LTR translateX math */
html[dir="rtl"] .hero-carousel-viewport,
html[dir="rtl"] .hero-carousel-track,
html[dir="rtl"] .hero-carousel-slide {
    direction: ltr;
}

/* Slick is initialized with rtl:true on Arabic — keep RTL direction */
html[dir="rtl"] .slick-slider,
html[dir="rtl"] .slick-list,
html[dir="rtl"] .slick-track {
    direction: rtl;
}

html[dir="rtl"] .hero-description {
    direction: rtl;
}

html[dir="rtl"] .hero-description h1,
html[dir="rtl"] .hero-description h3 {
    text-align: right;
}

html[dir="rtl"] .language-switcher {
    margin: 0;
    letter-spacing: 0.04em;
}

html[dir="rtl"] .breadcrumbs,
html[dir="rtl"] .content-title-heading,
html[dir="rtl"] .block-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .latest-products-title:not(.text-center),
html[dir="rtl"] .latest-products-title:not(.text-center) h2 {
    text-align: right;
}

html[dir="rtl"] .latest-products-title.text-center,
html[dir="rtl"] .latest-products-title.text-center h2 {
    text-align: center !important;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] .btn-add-to-cart,
html[dir="rtl"] .product-btn,
html[dir="rtl"] .button {
    font-family: 'Tajawal', sans-serif;
}

html[dir="rtl"] .offcanvas-menu {
    text-align: right;
}

html[dir="rtl"] .header-mobile .header-right {
    justify-content: flex-start !important;
}

html[dir="rtl"] .col-md-3.text-md-right,
html[dir="rtl"] .col-md-5.text-md-right {
    text-align: left !important;
}

/* FAQ: mirror the + toggle to the left side (English keeps it on the right) */
html[dir="rtl"] .faq-header {
    text-align: right;
}

html[dir="rtl"] .faq-category h2,
html[dir="rtl"] .faq-sidebar,
html[dir="rtl"] .faq-question,
html[dir="rtl"] .faq-answer {
    text-align: right;
}

html[dir="rtl"] .faq-question {
    padding-right: 10px;
    padding-left: 30px;
}

html[dir="rtl"] .faq-toggle {
    position: absolute !important;
    right: auto !important;
    left: 10px;
}