/* Direction-aware layout corrections. Visual media stays fixed while text follows the locale. */
@media (min-width: 901px) {
    html[dir="rtl"] .hero-content {
        justify-content: flex-start;
    }

    html[dir="rtl"] .hero-copybox {
        text-align: right;
    }
}

/* Category artwork has its subject on the right, so copy always occupies the empty left side. */
.category-copy {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .category-copy {
    text-align: right;
}

/* In Arabic, keep copy right-aligned but anchor the decorative icon and CTA to the left edge. */
html[dir="rtl"] .category-copy .category-icon,
html[dir="rtl"] .category-copy .category-link {
    align-self: flex-end;
}

html[dir="rtl"] .category-copy h3,
html[dir="rtl"] .category-copy p {
    align-self: flex-end;
}

html[dir="rtl"] .category-copy p {
    text-align: left;
    direction: rtl;
}

/* Product overlays keep the same physical position in both languages. */
.product-cover > .type-chip {
    inset-inline-start: auto;
    left: 11px;
    right: auto;
}

.product-cover > .price-chip {
    inset-inline-end: auto;
    left: auto;
    right: 11px;
}

.product-cover > .owned-chip {
    inset-inline-end: auto;
    left: auto;
    right: 11px;
}

@media (max-width: 900px) {
    html[dir="rtl"] .market-hero {
        background-position: center, var(--hero-position-x, 28%) var(--hero-position-y, 50%);
        background-image: linear-gradient(90deg, rgba(2, 7, 16, .08), rgba(2, 7, 16, var(--hero-overlay, .94)) 68%), var(--hero-image);
    }

    html[dir="rtl"] .hero-content {
        justify-content: flex-start;
    }

    html[dir="rtl"] .hero-copybox {
        width: min(570px, 70%);
        text-align: right;
    }
}

@media (max-width: 620px) {
    html[dir="rtl"] .market-hero {
        background-position: center, var(--hero-mobile-position-x, 35%) var(--hero-mobile-position-y, 50%);
        background-image: linear-gradient(90deg, rgba(2, 7, 16, .08), rgba(2, 7, 16, var(--hero-overlay, .96)) 68%), var(--hero-mobile-image);
        background-size: cover, var(--hero-mobile-image-scale, 125%) auto;
    }

    html[dir="rtl"] .hero-copybox {
        width: 74%;
    }

    html[dir="rtl"] .category-copy {
        width: 61%;
    }
}