/* ── LOJA MUNDIAL, fase B (24/09/2026): ÁRABE ESPELHADO. O leva dir="rtl" pelo metadado do idioma (lib/idiomas): o texto e os flex já viram sozinhos; aqui só o que é FÍSICO (esquerda/direita cravadas): a gaveta do carrinho abre do outro lado, o degradê dos carrosséis começa do lado certo, as tabelas alinham à direita. Os dois lados são uma régua só: quem cravar left/right novo, lembra deste arquivo. Vive em public/rtl.css e só entra na página quando dir="rtl" (StorefrontLayout): quem lê em latim não paga por ele (lei 42 e o orçamento do globals.css, D4). ── */ [dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-102%); border-radius: 0 var(--r-lg) var(--r-lg) 0; } [dir="rtl"] .drawer.open { transform: translateX(0); } [dir="rtl"] .drawer.left, [dir="rtl"] .drawer.drawer-left { left: auto; right: 0; transform: translateX(102%); border-radius: var(--r-lg) 0 0 var(--r-lg); } [dir="rtl"] .drawer.left.open, [dir="rtl"] .drawer.drawer-left.open { transform: translateX(0); } [dir="rtl"] .drawer-grab { left: auto; right: 7px; } [dir="rtl"] .drawer.drawer-left .drawer-grab { right: auto; left: 7px; } /* o degradê do carrossel: o começo (data-ini) fica à DIREITA no rtl */ [dir="rtl"] .hscroll[data-fade], [dir="rtl"] .sug-row.sug-one[data-fade], [dir="rtl"] .sug-row.sug-slide-m[data-fade], [dir="rtl"] .grid.grid-slide-m[data-fade] { --kfade-l: 28px; --kfade-r: 10px; } [dir="rtl"] [data-fade][data-ini] { --kfade-l: 28px; --kfade-r: 0px; } [dir="rtl"] [data-fade][data-fim] { --kfade-r: 10px; --kfade-l: 0px; } [dir="rtl"] [data-fade][data-ini][data-fim] { --kfade-l: 0px; --kfade-r: 0px; } [dir="rtl"] .tbl th, [dir="rtl"] .set-side button, [dir="rtl"] .addr-drop button, [dir="rtl"] .size-chart thead th:first-child, [dir="rtl"] .size-chart tbody th { text-align: right; } [dir="rtl"] .size-chart thead th:first-child { padding-left: 5px; padding-right: 10px; } [dir="rtl"] .size-chart tbody th { padding: 7px 10px 7px 5px; } [dir="rtl"] .card-price s { margin-right: 0; } /* setas de "voltar" e de "ver mais" desenhadas por SVG: espelhadas */ [dir="rtl"] .hdr-back svg, [dir="rtl"] .bc-sep, [dir="rtl"] .col-all svg, [dir="rtl"] .pdp-tab-arrow svg { transform: scaleX(-1); } /* números e códigos (preço, telefone, rastreio) ficam da esquerda pra direita dentro do texto árabe */ [dir="rtl"] .price, [dir="rtl"] .card-price, [dir="rtl"] .ck-total, [dir="rtl"] .trk-code, [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .card-price, [dir="rtl"] .price { justify-content: flex-end; } [dir="rtl"] .lang-pop { right: auto; left: 0; } [dir="rtl"] .sec-all svg, [dir="rtl"] .hc-more svg { transform: scaleX(-1); } /* a seta do "Ver tudo" aponta pro lado da leitura (prova visual de 24/09) */