/* ============================================================
   Yojo+ — RTL (アラビア語) の個別上書き
   ------------------------------------------------------------
   レイアウトの大半は論理プロパティ（margin-inline-start 等）で
   自動的に反転します。ここに書くのは**自動で反転しないもの**だけです。

     ① 方向を持つ transform（ドロワーのスライド方向）
     ② 方向を持つ字形・記号（矢印）
     ③ 字間（アラビア文字は letter-spacing で連結が切れます）★最重要
     ④ 数字・価格の bidi 分離

   このファイルは全ページで読み込みますが、中身はすべて
   [dir="rtl"] 配下なので LTR 言語には一切影響しません。
   ============================================================ */

/* ------------------------------------------------------------
   ★ ③ 字間 — アラビア文字は連結書体です。
   letter-spacing を入れると文字が1つずつ分断され、
   「読めるが明らかにおかしい」状態になります。必ず 0 に戻します。
   このサイトは eyebrow / caps で 0.18〜0.34em を多用しているため、
   ここを外すとアラビア語版だけが壊れて見えます。
   ------------------------------------------------------------ */
:root:lang(ar),
[lang="ar"] {
  --ls-eyebrow: 0;
  --ls-caps: 0;
  --ls-display: 0;
  /* アラビア文字は上下の突き出しが大きく、行が詰まって見えるため広げる */
  --lh-body: 2.0;
  --lh-snug: 1.45;
  --lh-tight: 1.3;
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .pill,
[dir="rtl"] .btn,
[dir="rtl"] .nav__link,
[dir="rtl"] .footer__col-title {
  letter-spacing: 0;
}

/* 大文字化はアラビア語に概念が無く、意図しない副作用も無いが、
   ラテン混在時の見た目を揃えるため素のままにする */
[dir="rtl"] .eyebrow,
[dir="rtl"] .footer__col-title { text-transform: none; }

/* ------------------------------------------------------------
   ① 方向を持つ transform
   ------------------------------------------------------------ */

/* カートドロワー：inset-inline-end で左側に付くので、退避方向も反転する */
[dir="rtl"] .drawer { transform: translateX(-101%); }
[dir="rtl"] .drawer.is-open { transform: none; }

/* トーストと中央寄せ要素は left:50% + translateX(-50%) のままで正しい（反転不要） */

/* ------------------------------------------------------------
   ② 方向を持つ記号・アイコン
   矢印のように「進む方向」を表すものだけ鏡像にします。
   カートやメニューのアイコンは反転させません（意味が変わらないため）。
   ------------------------------------------------------------ */
[dir="rtl"] .is-directional,
[dir="rtl"] .accordion__icon,
[dir="rtl"] .pdp__thumbs .is-directional { transform: scaleX(-1); }

/* ------------------------------------------------------------
   ④ 数字・価格・ラテン語のブランド名は LTR のまま
   RTL 文脈に裸で置くと「24,800 ¥」が「¥ 24,800」に見えるなど
   並びが崩れます。bidi を分離して守ります。
   ------------------------------------------------------------ */
[dir="rtl"] .plan__amount,
[dir="rtl"] .plan__compare,
[dir="rtl"] .plan__perday,
[dir="rtl"] .line-item__price,
[dir="rtl"] .buybar__price,
[dir="rtl"] .totals__row span,
[dir="rtl"] .brand__mark,
[dir="rtl"] .footer__lockup-name,
[dir="rtl"] .footer__lockup-sub,
[dir="rtl"] .stat__value,
[dir="rtl"] .proof__value {
  unicode-bidi: isolate;
  direction: ltr;
  text-align: end;
}

/* ブランド名・欧文ロックアップは常に LTR の塊として扱う */
[dir="rtl"] .brand { direction: ltr; }

/* 数値の入る表セルは右揃えではなく開始側に揃える（論理方向に従う） */
[dir="rtl"] .spec th,
[dir="rtl"] .spec td { text-align: start; }

/* ------------------------------------------------------------
   タイムラインの装飾線は inset-inline-start で反転済み。
   マーカーの負マージンだけ論理方向に合わせて確認すること。
   ------------------------------------------------------------ */

/* セレクタ類：ネイティブの矢印位置は UA が dir に従って処理する */
[dir="rtl"] .lang__select,
[dir="rtl"] .region__select { text-align: start; }