.language-switcher {display:flex;gap:.55rem;align-items:center;white-space:nowrap;font-size:13px;direction:ltr}
.language-switcher a {color:inherit;text-decoration:none;padding:.2rem}
.language-switcher [aria-current=true] {font-weight:700;border-bottom:2px solid currentColor}
html[dir=rtl] body {font-family:Tahoma,Arial,sans-serif}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] p {letter-spacing:normal}
html[dir=rtl] .hero-copy,html[dir=rtl] .about-text,html[dir=rtl] .history-copy,html[dir=rtl] .form-column,html[dir=rtl] .footer {text-align:right}
html[dir=rtl] input[type=email],html[dir=rtl] input[type=tel] {direction:ltr;text-align:right}
html[dir=rtl] .univers-dropdown,html[dir=rtl] .univers-submenu {text-align:right}
html[dir=rtl] .univers-submenu {left:auto;right:100%}
html[dir=rtl] .signature,html[dir=rtl] [class$="-script"] {font-family:Tahoma,Arial,sans-serif}
@media(max-width:767px){.language-switcher {font-size:12px;gap:.25rem}html[dir=rtl] .univers-submenu{right:auto}}
/* Arabic hero content starts at the right edge, including on mobile. */
html[dir=rtl] :is(.hero, .slider-intro, [class$="-hero"]),
html[dir=rtl] :is(.hero-inner, .asta-hero-inner, .slider-intro-copy, [class$="-hero-copy"]),
html[dir=rtl] [class$="-hero"] > [class$="-wrap"] {
    direction: rtl;
    text-align: right;
}
html[dir=rtl] .hero-inner {justify-content: flex-start}
html[dir=rtl] :is(.hero, .slider-intro, [class$="-hero"]) :is([class$="-copy"], h1, p, [class$="-logo"], [class$="-rule"]) {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}
/* The About hero stays centered in Arabic, as in the other languages. */
html[dir=rtl] .about-hero .about-hero-copy,
html[dir=rtl] .about-hero .about-hero-copy :is(h1, p) {
    text-align: center;
    margin-inline: auto;
}

/* Keep the same header control order in every language. */
html[dir=rtl] .header {direction:ltr}
html[dir=rtl] .header nav :is(a, button),
html[dir=rtl] .header .univers-dropdown {direction:rtl}
@media(max-width:420px){
 .header {gap:6px}
 .header .brand {width:90px}
 .header .menu-toggle,.header .header-tools .search-toggle {width:36px;height:36px}
 .header .header-tools {gap:6px}
 .language-switcher {font-size:11px;gap:2px}
}
.hero-copy {min-width:0}
.hero-copy .signature {white-space:normal;overflow-wrap:break-word}
@media(max-width:640px){
 html:is([lang=en],[lang=ar]) .hero {height:auto;min-height:520px}
 html:is([lang=en],[lang=ar]) .hero-inner {height:auto;min-height:424px;padding-block:28px}
}

/* Rich text can also be embedded in existing page-copy elements. */
.rich-p,.rich-ul,.rich-ol,.rich-blockquote{display:block;margin-block:0 0 .7em}
.rich-p:last-child{margin-bottom:0}
.rich-ul,.rich-ol{padding-inline-start:1.5em}
.rich-li{display:list-item;list-style-type:disc}
.rich-ol{counter-reset:rich-list}
.rich-ol>.rich-li{counter-increment:rich-list;list-style-type:decimal}
.rich-blockquote{border-inline-start:3px solid currentColor;padding-inline-start:1em}
.publication-body p{margin:0 0 1em}
.publication-body ul,.publication-body ol{padding-inline-start:1.5em}
.publication-body ul{list-style:disc}
.publication-body ol{list-style:decimal}

.rich-div,.rich-pre,.rich-h1,.rich-h2,.rich-h3{display:block}
.rich-h1,.rich-h2,.rich-h3{font-size:1.2em;font-weight:700;margin-block:.6em}
.rich-pre{white-space:pre-wrap;font-family:monospace}
.publication-body pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Arabic mobile: shade the copy on the right without hiding the products. */
@media (max-width: 600px) {
    html[lang=ar] :is(.asta-hero, .black-hero, .taiba-hero, .rozetta-hero,
        .soraya-hero, .miel-hero, .chocoland-hero, .exotico-hero, .babour-hero,
        .loubane-hero, .diwan-hero, .cbon-hero, .magimax-hero, .adwak-hero) {
        background-image: linear-gradient(270deg,
            rgb(var(--arabic-hero-shade, 3 3 3) / 75%) 0%,
            rgb(var(--arabic-hero-shade, 3 3 3) / 30%) 45%,
            rgb(var(--arabic-hero-shade, 3 3 3) / 0%) 75%),
            var(--page-hero-image);
    }

    html[lang=ar] .asta-hero { --arabic-hero-shade: 7 22 13; }
    html[lang=ar] .taiba-hero { --arabic-hero-shade: 23 14 9; }
    html[lang=ar] .rozetta-hero {
        background-image: linear-gradient(270deg,
            rgb(17 20 15 / 85%) 0%,
            rgb(17 20 15 / 65%) 45%,
            rgb(17 20 15 / 15%) 85%,
            transparent 100%),
            var(--page-hero-image, url('../images/rozetta/hero.png'));
    }
    html[lang=ar] .soraya-hero { --arabic-hero-shade: 8 13 20; }
    html[lang=ar] .miel-hero { --arabic-hero-shade: 23 17 11; }
    /* Extend the shade across the bright jar label behind the Arabic copy. */
    html[lang=ar] .chocoland-hero {
        background-image: linear-gradient(270deg,
            rgb(22 14 10 / 85%) 0%,
            rgb(22 14 10 / 65%) 45%,
            rgb(22 14 10 / 15%) 85%,
            transparent 100%),
            var(--page-hero-image, url('../images/chocoland/hero.png'));
    }
    html[lang=ar] .exotico-hero { --arabic-hero-shade: 18 35 23; }
    html[lang=ar] .babour-hero { --arabic-hero-shade: 7 28 20; }
    html[lang=ar] .loubane-hero { --arabic-hero-shade: 22 51 35; }
    html[lang=ar] .diwan-hero { --arabic-hero-shade: 16 30 9; }
    html[lang=ar] .adwak-hero { --arabic-hero-shade: 36 22 14; }
    html[lang=ar] .cbon-hero { --arabic-hero-shade: 28 33 24; }
    html[lang=ar] .magimax-hero { --arabic-hero-shade: 53 32 13; }

    /* These Arabic banners place the product group on the left. */
    html[lang=ar] .black-hero { background-position: center, 28% center; }
    html[lang=ar] .asta-hero { background-position: center, 30% center; }

    html[lang=ar] .diamant-hero {
        background-image: linear-gradient(180deg,
            #05050dcc 0%, #05050d99 30%, #05050d40 55%, transparent 75%),
            var(--page-hero-image);
    }
    html[lang=ar] .karam-hero {
        background-image: linear-gradient(180deg,
            #0f1417bf 0%, #0f141759 15%, transparent 35%),
            linear-gradient(270deg, #301b1773 0%, #301b1700 75%),
            var(--page-hero-image);
    }
}