/* ===============================================================
   MATCHLLO — right-to-left stylesheet.

   Loaded by functions.php only when is_rtl() is true, i.e. when the
   WordPress Site Language is Arabic (or any other RTL locale). It loads
   after style.css and only overrides what direction actually changes, so
   the LTR sheet stays the single source of truth for colour, size and
   spacing tokens.

   Three things need attention in this theme:

     1. Fonts. The Japanese families carry no Arabic glyphs, so the three
        font tokens are repointed at the Arabic pair built by
        assets/fonts/build-fonts-ar.sh.
     2. Letter-spacing. Arabic is a cursive script — tracking pulls the
        joined letterforms apart and makes words unreadable. Every tracked
        rule in style.css is reset here.
     3. Physical offsets. Most of the theme already uses logical
        properties; the handful of left/right rules that remain are
        mirrored below.
   =============================================================== */

/* ---------------------------------------------------------------
   1. Type — Arabic families, self-hosted next to the Japanese set
   --------------------------------------------------------------- */
:root {
	/* Baloo Bhaijaan 2 is the closest Arabic answer to Mochiy Pop One:
	   heavy, rounded, and it holds up at display sizes.

	   The Japanese families stay on the end of each stack. The Arabic pair
	   carries no kana or kanji, and the eyebrows, marquee and kana rail keep
	   their Japanese marks on Arabic pages — without these fallbacks those
	   glyphs would drop to a system face and break the identity. */
	--m-font-display: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", "Mochiy Pop One", "Zen Kaku Gothic New", sans-serif;
	--m-font-body:    "IBM Plex Sans Arabic", "Zen Kaku Gothic New", system-ui, sans-serif;
	--m-font-round:   "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
}

/* Arabic sits lower and needs more room between lines than the Latin and
   kana faces the scale was tuned for. */
body {
	line-height: 1.85;
}
h1, h2, h3, .m-display {
	line-height: 1.45;
}

/* ---------------------------------------------------------------
   2. Tracking — every letter-spaced rule in style.css, reset
   Arabic letters join; spacing them breaks the joins apart.
   --------------------------------------------------------------- */
.m-eyebrow,
.m-club .m-eyebrow,
.m-kana,
.m-vertical-jp,
.m-ribbon,
.m-card__jp,
.m-marquee__track,
.m-hero__rail span,
.m-footer__cols h3,
.m-crumbs,
.m-crumbs__current,
.m-resultcount,
.m-single__jp,
.m-single__cart table.variations th.label,
.wc-block-cart-items__header,
.wc-block-cart__totals-title {
	letter-spacing: normal;
}

/* The Latin brand wordmark keeps its tracking even on Arabic pages. */
.m-hero__tagline,
.m-footer__mark + .m-footer__tag {
	letter-spacing: revert;
}

/* ---------------------------------------------------------------
   3. Header
   --------------------------------------------------------------- */
.m-nav { margin-left: 0; margin-inline-start: auto; }
.m-header__actions { margin-left: 0; margin-inline-start: auto; }
@media (min-width: 768px) {
	.m-header__actions { margin-left: 0; margin-inline-start: 1rem; }
}

/* The hover underline wipes in from the start edge, which is now the right. */
.m-nav a::after { transform-origin: right; }

/* ---------------------------------------------------------------
   4. Hero
   --------------------------------------------------------------- */
/* Vertical kana rail moves to the opposite corner. */
.m-hero__rail { right: auto; left: 1.5rem; }

/* The lanterns are placed against the storefront artwork, which is not
   mirrored, so they deliberately keep their LTR positions. */

/* ---------------------------------------------------------------
   5. Marquee
   In RTL the track lays its items out right-to-left, so the -50% slide
   would run away from the viewer. Reversing the animation restores the
   same visual travel.
   --------------------------------------------------------------- */
.m-marquee__track {
	padding-right: 0;
	padding-inline-end: 2.5rem;
	animation-direction: reverse;
}
.m-marquee__track em {
	margin-left: 0;
	margin-inline-start: 2.5rem;
}

/* ---------------------------------------------------------------
   6. Product cards
   --------------------------------------------------------------- */
.m-ribbon {
	left: auto;
	inset-inline-start: .75rem;
}
.m-card__jp {
	right: auto;
	inset-inline-end: .75rem;
}

/* WooCommerce's own loop markup, styled in section 17 of style.css. */
.woocommerce ul.products li.product,
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	text-align: right;
}

/* ---------------------------------------------------------------
   7. Origin + club decoration
   --------------------------------------------------------------- */
.m-maskcard__stamp {
	right: auto;
	left: -.75rem;
	transform: rotate(4deg);
}
@media (min-width: 640px) {
	.m-maskcard__stamp { right: auto; left: -1.5rem; }
}
.m-club::before {
	left: auto;
	right: -4rem;
}

/* ---------------------------------------------------------------
   8. Single product
   --------------------------------------------------------------- */
.m-single__meta strong { text-align: left; }

.m-single__cart table.variations th,
.m-single__cart table.variations td {
	text-align: right;
}
.m-single__cart table.variations th.label {
	padding-right: 0;
	padding-inline-end: 1rem;
}
.m-single__cart .reset_variations {
	margin-left: 0;
	margin-inline-start: .85rem;
}

/* ---------------------------------------------------------------
   9. Numerals
   Prices, quantities and SKUs stay in Western digits so they match the
   currency mark and the order emails WooCommerce sends.
   --------------------------------------------------------------- */
.m-card__price,
.m-single__price,
.m-cart-count,
.m-stat__val,
.m-step__num,
.woocommerce-Price-amount,
.wc-block-formatted-money-amount {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------
   10. Content pages — About, Contact, Categories, Order tracking,
       Terms and Policies.

   The new sections were written with logical properties throughout, so
   only two things are left: the tracked labels, which Arabic cannot
   take, and the numerals that must stay Western.
   --------------------------------------------------------------- */
.m-field label,
.m-channel h3,
.m-contact__address h3,
.m-cat__count,
.m-legal__updated,
.m-track__formwrap .woocommerce form.track_order label {
	letter-spacing: 0;
}

.m-timeline__year,
.m-pillar__num {
	direction: ltr;
	unicode-bidi: isolate;
}

/* The FAQ marker is a plus/minus glyph appended after the summary text;
   in RTL it belongs on the other side. */
.m-faq__item summary::after { content: none; }
.m-faq__item summary::before { content: "＋ "; color: var(--m-primary-600); }
.m-faq__item[open] summary::before { content: "－ "; }

/* Phone numbers and Latin handles read left-to-right even in an RTL card. */
.m-channel__value {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* ---------------------------------------------------------------
   Product reviews — Arabic is cursive, so drop the tracked labels.
   Star fill and bars already use logical properties.
   --------------------------------------------------------------- */
.m-rate legend,
.m-review__reply-by { letter-spacing: 0; }