/* RTL semantics for the Arabic edition. * * Loaded only when the request language is right-to-left. It mirrors the * physical (left/right) declarations that the shared stylesheets use, keeps * Latin runs such as prices, e-mail addresses and the brand wordmark in * left-to-right order, and supplies an Arabic-capable system font stack * because the shared display fonts do not cover Arabic script. * * Layout structure (grid/flex order, block direction, inline start/end) is * already handled by the dir="rtl" attribute on ; nothing here changes * the visual system, spacing scale or component structure. */ /* ---- Arabic typography -------------------------------------------------- */ html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Tahoma", "Arial", system-ui, sans-serif; } html[lang="ar"] .v-title-xl, html[lang="ar"] .v-title-lg, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Tahoma", "Arial", system-ui, sans-serif; letter-spacing: 0; } /* Latin runs stay left-to-right inside Arabic paragraphs. */ [dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href*="wa.me"], [dir="rtl"] .site-footer-contact a, [dir="rtl"] code, [dir="rtl"] .ddp-rate-table td, [dir="rtl"] .ddp-market-price, [dir="rtl"] .gv-card-num, [dir="rtl"] .pp-start { unicode-bidi: isolate; direction: ltr; } [dir="rtl"] .ddp-rate-table td, [dir="rtl"] .ddp-market-price { text-align: left; } [dir="rtl"] .ddp-rate-table thead th:last-child { text-align: left; } /* ---- Header, navigation and footer -------------------------------------- */ [dir="rtl"] .skip-link { right: 10px; left: auto; } [dir="rtl"] .site-nav > a::after, [dir="rtl"] .nav-item-main > a::after { transform-origin: right; } [dir="rtl"] .nav-dropdown { right: -20px; left: auto; } [dir="rtl"] .language-switcher-menu { right: auto; left: 0; } [dir="rtl"] .site-header-studio > span:last-child, [dir="rtl"] .site-nav > a.nav-hat-studio .hat-studio-nav-badge, [dir="rtl"] .site-nav > a.nav-shipping-rates .nav-shipping-language { margin-right: 5px; margin-left: 0; } [dir="rtl"] .floating-whatsapp { right: auto; left: 20px; } /* Outbound arrows point the other way when the reading direction flips. */ [dir="rtl"] .v-btn [aria-hidden="true"], [dir="rtl"] .header-quote-arrow, [dir="rtl"] .pp-button [aria-hidden="true"], [dir="rtl"] .whatsapp-arrow, [dir="rtl"] .site-header-studio > span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); } /* ---- Cookie banner ------------------------------------------------------ */ [dir="rtl"] .cookie-category input { margin-right: 0; margin-left: 8px; } /* ---- Shipping rates ----------------------------------------------------- */ [dir="rtl"] .ddp-select-wrap svg { right: auto; left: 16px; } [dir="rtl"] .ddp-rate-table thead th, [dir="rtl"] .ddp-rate-table tbody th { text-align: right; } [dir="rtl"] .ddp-rate-table tbody th { padding: 17px 0 17px 14px; } [dir="rtl"] .ddp-country-notes, [dir="rtl"] .ddp-checkpoints, [dir="rtl"] .pc-evidence-note, [dir="rtl"] .pp-checkpoints { border-left: 0; border-right: 2px solid var(--v-primary); } [dir="rtl"] .pp-checkpoints { border-right: 3px solid var(--pp-brand); } [dir="rtl"] .pc-evidence-note { border-right: 3px solid var(--v-primary); } [dir="rtl"] .ddp-country-notes ul, [dir="rtl"] .ddp-rate-notes ul, [dir="rtl"] .ddp-directory-notes, [dir="rtl"] .ddp-cost-example-card ul { padding-right: 15px; padding-left: 0; } [dir="rtl"] .ddp-country-notes li, [dir="rtl"] .ddp-rate-notes li { padding-right: 3px; padding-left: 0; } [dir="rtl"] .ddp-directory-notes, [dir="rtl"] .ddp-cost-example-card ul { padding-right: 18px; } [dir="rtl"] .ddp-directory-table, [dir="rtl"] .ddp-directory-table caption { text-align: right; } [dir="rtl"] .ddp-market-price span { margin-right: 5px; margin-left: 0; } [dir="rtl"] .ddp-country-directory > summary > span::after { margin-right: 8px; margin-left: 0; } [dir="rtl"] .ddp-quote-bottom > .v-btn, [dir="rtl"] .ddp-quote-actions > .v-btn { padding-right: 19px; padding-left: 19px; } [dir="rtl"] .ddp-map-focus { border-left: 0; border-right: 1px solid var(--ddp-line); } /* ---- Product pages and tools -------------------------------------------- */ [dir="rtl"] .pc-section-nav a:last-child, [dir="rtl"] .pp-panel > summary::after { margin-right: auto; margin-left: 0; } [dir="rtl"] .pc-material-table table, [dir="rtl"] .pc-material-table caption { text-align: right; } [dir="rtl"] .pc-image-label, [dir="rtl"] .gv-image-label, [dir="rtl"] .gv-card-num { right: 16px; left: auto; } [dir="rtl"] .gv-card-num { right: 12px; } [dir="rtl"] .pp-facts > div { border-left: 0; border-right: 1px solid var(--pp-rule); } [dir="rtl"] .pp-facts > div:first-child { border-right: 0; } [dir="rtl"] .gv-tool + .gv-tool { border-left: 0; border-right: 1px solid var(--v-hairline); padding-right: 36px; padding-left: 0; } [dir="rtl"] .gv-tool small, [dir="rtl"] .gv-beta { margin-right: 8px; margin-left: 0; } [dir="rtl"] .gv-section-head .gv-body { margin-right: auto; margin-left: 0; } [dir="rtl"] .gv-category-links > span, [dir="rtl"] .gv-techniques > span { margin-right: 0; margin-left: auto; } [dir="rtl"] .gv-catalogue-head .gv-caption { text-align: left; } [dir="rtl"] .v-step-checks li { padding-right: var(--space-md); padding-left: 0; } [dir="rtl"] .v-step-checks li::before { right: 0; left: auto; } [dir="rtl"] .hat-studio-entry-features li + li::before { right: -12px; left: auto; } /* ---- Hoodie sketch/finish comparison ------------------------------------ */ /* The slider axis stays horizontal; only the labels mirror. */ [dir="rtl"] .hc-corner-label--sketch { right: 26px; left: auto; } [dir="rtl"] .hc-corner-label--finish { right: auto; left: 26px; } @media (max-width: 640px) { [dir="rtl"] .gv-tool + .gv-tool { padding-right: 0; border-right: 0; } [dir="rtl"] .gv-catalogue-head .gv-caption { text-align: right; } [dir="rtl"] .hat-studio-entry-features li + li::before { right: -9px; } } @media (max-width: 700px) { [dir="rtl"] .floating-whatsapp { right: auto; left: 14px; } } @media (max-width: 1000px) { [dir="rtl"] .pp-facts > div:nth-child(3) { border-right: 0; } } @media (max-width: 900px) { [dir="rtl"] .nav-submenu-toggle { border-left: 0; border-right: 1px solid var(--v-hairline-light); } }