/* Arabic storefront layout and typography. */
@font-face {
    font-family: 'Cairo';
    src: url('/assets/fonts/cairo-400.ttf?v=2') format('truetype');
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
}

html[lang="ar"] body,
.lang-ar,
.lang-ar button,
.lang-ar input,
.lang-ar select,
.lang-ar textarea {
    font-family: 'Cairo', sans-serif;
}

.lang-ar .era-desktop-nav a {
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0;
}

.lang-ar h1,
.lang-ar h2,
.lang-ar h3 {
    letter-spacing: 0;
    line-height: 1.3;
}

.lang-ar .brand-slogan,
.lang-ar .mobile-menu-link,
.lang-ar .category-bar a {
    letter-spacing: 0;
}

.lang-ar .hero-copy {
    text-align: right;
}

.lang-ar .hero h1 {
    line-height: 1.25;
    letter-spacing: 0;
}

.lang-ar .mobile-menu-inner {
    margin-inline-end: auto;
    transform: translateX(100%);
}

.lang-ar .mobile-menu.open .mobile-menu-inner {
    transform: translateX(0);
}

.lang-ar .mobile-menu-search,
.lang-ar .mobile-menu-shop {
    text-align: right;
}

@media (min-width: 768px) {
    .lang-ar .hero-copy {
        width: min(50vw, 620px);
        padding: 36px clamp(46px, 6vw, 96px) 36px 0;
    }

    .lang-ar .hero-shade {
        background: linear-gradient(270deg, #fffffff5 0%, #ffffffd4 28%, #ffffff14 54%, transparent 76%);
    }

    .lang-ar .hero h1 {
        font-size: clamp(42px, 4.6vw, 66px);
    }
}

@media (max-width: 767px) {
    .lang-ar .hero h1 {
        font-size: clamp(32px, 9.5vw, 42px);
    }
}