/* ---------------------------------------------------------------------------
 * Modique — right-to-left overrides
 *
 * Loaded only when the active language reads right-to-left. The base
 * stylesheet already mirrors the inherited template components under
 * `body.rtl`; this file mirrors everything the Modique theme adds.
 *
 * The rule of thumb throughout: anything anchored `left` moves to `right` and
 * vice versa, anything that points forwards flips, and runs of Latin text or
 * digits (prices, card numbers, references) are isolated so they stay LTR.
 * ------------------------------------------------------------------------ */

/* =========================================================================
 * 1. Foundations
 * ====================================================================== */

body.rtl {
    text-align: right;
}

/* Arabic reads better a touch larger and with no negative tracking. */
body.rtl {
    letter-spacing: 0;
}

body.rtl .title-display,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
    letter-spacing: 0;
    line-height: 1.35;
}

body.rtl .title-display {
    line-height: 1.2;
}

/* The display serif has no Arabic coverage, so Arabic falls through to a
   system Arabic face while Latin runs keep Cormorant. */
body.rtl {
    --font-display: "Cormorant Garamond", "Noto Naskh Arabic", "Segoe UI", "Tahoma", serif;
    --font-body: "Jost", "Noto Kufi Arabic", "Segoe UI", "Tahoma", sans-serif;
}

body.rtl .text-btn-uppercase,
body.rtl .text-btn-uppercase2,
body.rtl .section-eyebrow,
body.rtl .filter-title,
body.rtl .field label,
body.rtl .field-label,
body.rtl .breadcrumb-list,
body.rtl .journal-meta,
body.rtl .voice-role,
body.rtl .announcement-inner p {
    letter-spacing: 0;
}

/* Latin brand type stays left-to-right. */
body.rtl .brand-word,
body.rtl .brand-sub,
body.rtl .payment-marks span,
body.rtl .lang-abbr,
body.rtl .lang-code,
body.rtl .coupon-hint code,
body.rtl .order-reference,
body.rtl .order-ref,
body.rtl .card-preview {
    direction: ltr;
    unicode-bidi: isolate;
}

/* =========================================================================
 * 2. Header
 * ====================================================================== */

body.rtl .header-cell-end {
    justify-content: flex-start;
}

body.rtl .lang-toggle .icon-arrow-down {
    margin-right: 2px;
    margin-left: 0;
}

body.rtl .dropdown-account {
    right: auto;
    left: 0;
}

body.rtl .box-nav-ul .sub-menu.submenu-default {
    right: 0;
    left: auto;
}

body.rtl .announcement-inner .icon {
    margin-right: 0;
    margin-left: 6px;
}

/* =========================================================================
 * 3. Directional icons
 * ====================================================================== */

body.rtl .icon-arrowUpRight,
body.rtl .tf-btn-default .icon-arrowUpRight,
body.rtl .letter-submit .icon,
body.rtl .footer-subscribe-row .subscribe-button .icon {
    transform: scaleX(-1);
}

body.rtl .footer-subscribe-row .subscribe-button:hover {
    transform: translate(-3px, -3px);
}

body.rtl .letter-submit:hover {
    /* gap already handles the motion; nothing to mirror */
    gap: 14px;
}

body.rtl .voice-product,
body.rtl .home-voices-arrow {
    /* the arrow glyph in the string is written as → and must point left */
    unicode-bidi: plaintext;
}

/* =========================================================================
 * 4. Cards and product grid
 * ====================================================================== */

body.rtl .card-product .list-product-btn {
    right: auto;
    left: 5px;
}

body.rtl .card-product .list-product-btn .box-icon .tooltip {
    right: auto;
    left: auto;
    inset-inline-end: calc(100% + 8px);
}

body.rtl .product-flag-wrap {
    left: auto;
    right: 10px;
}

body.rtl .card-product .card-product-wrapper .on-sale-wrap {
    right: auto;
    left: 10px;
}

body.rtl .list-star-default,
body.rtl .list-star {
    direction: ltr;
}

/* =========================================================================
 * 5. Hero, editorial and lookbook
 * ====================================================================== */

body.rtl .hero-frames {
    padding: 2px 0 2px 2px;
}

body.rtl .hero-frame-label {
    left: auto;
    right: 18px;
}

body.rtl .editorial-quote {
    padding-left: 0;
    padding-right: 22px;
    border-left: 0;
    border-right: 2px solid var(--accent);
}

body.rtl .rule-gold,
body.rtl .brand-rule {
    background: linear-gradient(270deg, var(--accent) 0%, rgba(192, 161, 92, 0) 100%);
}

body.rtl .department-card-body {
    text-align: right;
}

body.rtl .btn-line::after {
    transform-origin: left;
}

body.rtl .btn-line:hover::after {
    transform-origin: right;
}

/* =========================================================================
 * 6. Shop, filters and pagination
 * ====================================================================== */

body.rtl .filter-list a,
body.rtl .shop-toolbar,
body.rtl .summary-row,
body.rtl .option-tile-title,
body.rtl .mini-product-foot,
body.rtl .order-row,
body.rtl .cart-actions {
    text-align: right;
}

body.rtl .filter-swatch.is-active {
    box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--primary);
}

body.rtl .plain-select {
    background-position: left 12px center;
    padding: 0 12px 0 34px;
}

body.rtl .price-fields input,
body.rtl .coupon-form input {
    text-align: right;
}

/* =========================================================================
 * 7. Product detail
 * ====================================================================== */

body.rtl .product-assurances li,
body.rtl .editorial-list li,
body.rtl .letter-perks li {
    text-align: right;
}

body.rtl .product-assurances .icon,
body.rtl .editorial-list .icon {
    margin-left: 0;
}

body.rtl .accordion-trigger {
    text-align: right;
}

body.rtl .accordion-panel table td:first-child {
    text-align: right;
}

body.rtl .variant-head,
body.rtl .buy-row,
body.rtl .buy-secondary {
    text-align: right;
}

body.rtl .wg-quantity {
    direction: ltr;
}

/* =========================================================================
 * 8. Bag, checkout and forms
 * ====================================================================== */

body.rtl .cart-table th,
body.rtl .cart-table td {
    text-align: right;
}

body.rtl .cart-table th:last-child,
body.rtl .cart-table td:last-child {
    text-align: left;
}

body.rtl .tf-table-size th,
body.rtl .tf-table-size td {
    text-align: right;
}

body.rtl .checkout-thumb .qty-bubble {
    right: auto;
    left: -7px;
}

body.rtl .card-preview::after {
    right: auto;
    left: -60px;
}

body.rtl .card-preview-foot {
    text-align: left;
}

body.rtl .field input,
body.rtl .field select,
body.rtl .field textarea {
    text-align: right;
}

body.rtl .field input[dir="ltr"],
body.rtl .field input[type="email"],
body.rtl .field input[type="tel"] {
    text-align: left;
    direction: ltr;
}

body.rtl .check-row,
body.rtl .form-foot,
body.rtl .trust-row {
    text-align: right;
}

body.rtl .voice-card blockquote,
body.rtl .voice-foot {
    text-align: right;
}

/* =========================================================================
 * 9. Drawers, modals and toasts
 * ====================================================================== */

body.rtl .flash-stack {
    right: auto;
    left: 24px;
}

body.rtl .flash-item {
    border-left: 0;
    border-right: 2px solid var(--accent);
    transform: translateX(-18px);
}

body.rtl .flash-item.is-in {
    transform: none;
}

body.rtl .flash-item.is-out {
    transform: translateX(-18px);
}

body.rtl .flash-item.flash-error {
    border-right-color: var(--critical);
}

body.rtl .flash-item.flash-info {
    border-right-color: var(--primary-light);
}

body.rtl .flash-close {
    margin-left: 0;
    margin-right: auto;
}

/* Right-hand drawers slide in from the left in RTL. */
body.rtl .modal.fullRight .modal-dialog {
    transform: translate(-100%, 0);
}

body.rtl .modal.fullRight.show .modal-dialog {
    transform: none;
}

body.rtl .modal.fullRight .modal-content {
    right: auto;
    left: 0;
}

body.rtl .modal-shopping-cart .tf-minicart-recommendations {
    border-right: 0;
    border-left: 1px solid var(--line);
}

body.rtl .letter-close {
    right: auto;
    left: 18px;
}

body.rtl .letter-rule {
    background: linear-gradient(270deg, var(--primary-dark) 0%, var(--primary) 42%, var(--accent) 100%);
}

body.rtl .letter-body,
body.rtl .letter-field,
body.rtl .letter-perks li {
    text-align: right;
}

body.rtl .letter-submit {
    padding: 0 20px 0 4px;
}

body.rtl .offcanvas-compare .icon-close-popup,
body.rtl .modal-size-guide .header .icon-close-popup {
    right: auto;
    left: 20px;
}

body.rtl .canvas-mb .icon-close-popup {
    right: auto;
    left: 20px;
}

body.rtl .tf-mini-cart-item,
body.rtl .checkout-summary-line,
body.rtl .mini-product-row,
body.rtl .cart-product {
    text-align: right;
}

/* =========================================================================
 * 10. Footer and toolbar
 * ====================================================================== */

body.rtl .footer,
body.rtl .footer-bottom-wrap,
body.rtl .footer-menu-list,
body.rtl .footer-info li {
    text-align: right;
}

body.rtl .footer .tf-btn-default .icon-arrowUpRight {
    transform: scaleX(-1);
}

body.rtl .prose ul li::before {
    content: "—";
}

body.rtl .store-card dl,
body.rtl .contact-aside dl {
    text-align: right;
}

body.rtl .page-head,
body.rtl .heading-section.text-center {
    text-align: center;
}

body.rtl .heading-section.text-start {
    text-align: right;
}

body.rtl .empty-state,
body.rtl .drawer-empty,
body.rtl .order-hero,
body.rtl .order-step {
    text-align: center;
}

/* =========================================================================
 * 11. Swipers keep their own direction
 * ====================================================================== */

body.rtl .swiper[dir="ltr"] {
    direction: ltr;
}

body.rtl .marquee-wrapper,
body.rtl .tf-marquee {
    direction: ltr;
}