/* ==========================================================================
MT — RTL stylesheet
--------------------------------------------------------------------------
Carga este archivo SOLO en las páginas árabes, después de styles.css:
...
La sintaxis de los selectores [dir="rtl"] hace que estos estilos solo
apliquen cuando dir="rtl" esté en o en un contenedor padre, así
que es seguro tener el archivo enlazado siempre — no afecta a EN.
========================================================================== */
/* ---------- 1. Tipografía árabe ----------------------------------------- */
/* Cairo es legible, moderna y soporta todos los glifos árabes/latinos.
Pesos cargados desde Google Fonts vía en el . */
[dir="rtl"], [lang="ar"] {
font-family: 'Cairo', 'Inter', 'Montserrat', system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
[dir="rtl"] {
text-align: right;
}
/* ---------- 2. Inversión de iconos direccionales ------------------------ */
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .arrow-next,
[dir="rtl"] .chevron-right {
transform: scaleX(-1);
}
[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .arrow-prev,
[dir="rtl"] .chevron-left {
transform: scaleX(-1);
}
/* ---------- 3. Topbar invertido ---------------------------------------- */
/* En EN: phone | email ............... lang-switcher | location
En AR: lang-switcher | location ............... phone | email */
[dir="rtl"] .topbar,
[dir="rtl"] .top-bar,
[dir="rtl"] .mts-topbar {
flex-direction: row-reverse;
}
/* ---------- 4. Header / nav ------------------------------------------- */
/* Logo a la derecha, nav a la izquierda */
[dir="rtl"] .header,
[dir="rtl"] .site-header,
[dir="rtl"] .mts-mainheader,
[dir="rtl"] header.main {
flex-direction: row-reverse;
}
[dir="rtl"] nav ul,
[dir="rtl"] .nav-list,
[dir="rtl"] .menu-list {
flex-direction: row-reverse;
}
/* ---------- 5. Footer invertido --------------------------------------- */
[dir="rtl"] footer,
[dir="rtl"] .site-footer,
[dir="rtl"] .mts-mainfooter {
text-align: right;
}
[dir="rtl"] footer .row,
[dir="rtl"] .footer-row {
flex-direction: row-reverse;
}
/* ---------- 6. Cart sidebar desde la izquierda ------------------------- */
[dir="rtl"] .cart-sidebar,
[dir="rtl"] .cart-drawer,
[dir="rtl"] .side-cart {
right: auto !important;
left: 0 !important;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
[dir="rtl"] .cart-sidebar.open,
[dir="rtl"] .cart-drawer.open,
[dir="rtl"] .side-cart.open {
transform: translateX(0);
}
/* ---------- 7. Cart items: imagen a la derecha, info a la izquierda ---- */
[dir="rtl"] .cart-item,
[dir="rtl"] .cart-row,
[dir="rtl"] .order-line {
flex-direction: row-reverse;
}
/* ---------- 8. PDP (proporción áurea) --------------------------------- */
/* En EN: foto a la izquierda (38%) + info a la derecha (62%)
En AR: foto a la derecha (38%) + info a la izquierda (62%) */
[dir="rtl"] .pdp-grid,
[dir="rtl"] .product-grid,
[dir="rtl"] .pdp-layout {
direction: rtl;
}
/* ---------- 9. Listing filters ---------------------------------------- */
[dir="rtl"] .filter-bar,
[dir="rtl"] .listing-filters {
flex-direction: row-reverse;
}
[dir="rtl"] .filter-label {
margin-right: 0;
margin-left: 0.75rem;
}
/* ---------- 10. Botones con icono + texto ---------------------------- */
/* "Add to cart" lleva icono + texto. En RTL el icono va a la derecha. */
[dir="rtl"] .btn-icon-text,
[dir="rtl"] .btn-with-icon {
flex-direction: row-reverse;
}
/* ---------- 11. Tablas de especificaciones --------------------------- */
[dir="rtl"] .spec-table,
[dir="rtl"] table.specs {
direction: rtl;
}
[dir="rtl"] .spec-table th,
[dir="rtl"] .spec-table td {
text-align: right;
}
/* ---------- 12. Números técnicos LATIN -------------------------------- */
/* Diámetros, precios y códigos siempre en cifras occidentales y dirección
LTR (incluso dentro de un párrafo árabe). Ej.: DN50, 1/2", AED 100, PN-25 */
[dir="rtl"] .numeric,
[dir="rtl"] .dn,
[dir="rtl"] .price,
[dir="rtl"] .product-code,
[dir="rtl"] .pn-rating {
direction: ltr;
unicode-bidi: embed;
display: inline-block;
}
/* ---------- 13. Selector de idioma ----------------------------------- */
.lang-switcher {
display: inline-flex;
gap: 0.5rem;
align-items: center;
font-size: 0.875rem;
}
.lang-switcher a {
color: inherit;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.2s;
padding: 0.25rem 0.5rem;
border-radius: 3px;
}
.lang-switcher a:hover {
opacity: 1;
}
.lang-switcher a.active {
opacity: 1;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
}
.lang-switcher .separator {
opacity: 0.4;
}
/* ---------- 14. Floating WhatsApp button ------------------------------ */
/* En RTL lo cambiamos al lado izquierdo */
[dir="rtl"] .whatsapp-float,
[dir="rtl"] .wa-fab {
right: auto;
left: 20px;
}
/* ---------- 15. Margen/padding lógicos -------------------------------- */
/* Reglas genéricas: si el HTML usa margin-left/right explícitos, hay que
sobrescribirlos. Mejor convertirlos a margin-inline-start / -end en el
styles.css principal cuando se refactorice — esto es el quick fix. */
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4 {
margin-left: 0;
}
[dir="rtl"] .ml-1 { margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-right: 1rem; }
[dir="rtl"] .ml-4 { margin-right: 1.5rem; }
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4 {
margin-right: 0;
}
[dir="rtl"] .mr-1 { margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-left: 1rem; }
[dir="rtl"] .mr-4 { margin-left: 1.5rem; }
/* ---------- 16. Flecha del breadcrumb -------------------------------- */
[dir="rtl"] .breadcrumb .separator,
[dir="rtl"] .breadcrumbs .sep {
transform: scaleX(-1);
}
/* ---------- 17. Quote summary email --------------------------------- */
/* El email mailto generado en cart.js debe respetar dirección del idioma
activo. El JS detecta document.documentElement.dir y aplica template AR. */
/* ==========================================================================
18. Reglas específicas adaptadas a la estructura real del sitio v14.5
========================================================================== */
/* Topbar con clases específicas del proyecto */
[dir="rtl"] .topbar-inner,
[dir="rtl"] .mts-topbar-inner {
flex-direction: row-reverse;
}
[dir="rtl"] .topbar-center,
[dir="rtl"] .mts-topbar-center {
flex-direction: row-reverse;
}
/* Header principal */
[dir="rtl"] header.main,
[dir="rtl"] .mts-header,
[dir="rtl"] .mts-header-inner {
flex-direction: row-reverse;
}
/* Sub-nav (Hidrosanitario / Industrial / etc.) */
[dir="rtl"] .subnav,
[dir="rtl"] .division-nav {
flex-direction: row-reverse;
}
/* Footer del sitio */
[dir="rtl"] .mts-footer-grid,
[dir="rtl"] .mts-footer-inner {
direction: rtl;
}
[dir="rtl"] .mts-footer-loc-row {
flex-direction: row-reverse;
}
/* Breadcrumb */
[dir="rtl"] .breadcrumb,
[dir="rtl"] .mts-breadcrumb {
flex-direction: row-reverse;
}
[dir="rtl"] .breadcrumb-sep,
[dir="rtl"] .breadcrumb .sep {
transform: scaleX(-1);
}
/* PDP layout grid */
[dir="rtl"] .pdp-hero,
[dir="rtl"] .product-hero {
direction: rtl;
}
/* Cookies banner button positions */
[dir="rtl"] .mts-cookie-banner-buttons {
flex-direction: row-reverse;
}
/* Aseguramos que números, códigos y precios queden LTR en spans específicos */
[dir="rtl"] .product-code,
[dir="rtl"] .sku,
[dir="rtl"] .price-aed,
[dir="rtl"] .phone-num,
[dir="rtl"] .email,
[dir="rtl"] [data-ltr] {
direction: ltr;
unicode-bidi: embed;
display: inline-block;
}
/* Banner cookies en rtl: alinear texto */
[dir="rtl"] .mts-cookie-banner-text,
[dir="rtl"] .cookie-banner-text {
text-align: right;
}