/* ============================================================
   barkay — RTL overrides (applied when html[dir="rtl"])
   ============================================================ */

html[dir="rtl"] { --font: 'Vazirmatn', 'Montserrat', system-ui, -apple-system, sans-serif; }
html[dir="rtl"] body { font-family: var(--font); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { letter-spacing: 0; }

html[dir="rtl"] .btn,
html[dir="rtl"] .kicker,
html[dir="rtl"] .sub,
html[dir="rtl"] .nav a,
html[dir="rtl"] .field label,
html[dir="rtl"] footer h5,
html[dir="rtl"] .chip,
html[dir="rtl"] .sku .ref,
html[dir="rtl"] .crumbs,
html[dir="rtl"] .menu-tag,
html[dir="rtl"] .step .n,
html[dir="rtl"] .form-note,
html[dir="rtl"] footer .base,
html[dir="rtl"] .card .photo .chip { letter-spacing: 0; }

html[dir="rtl"] .btn { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
html[dir="rtl"] .arrow-link svg,
html[dir="rtl"] .btn svg,
html[dir="rtl"] .card .go svg { transform: scaleX(-1); }
html[dir="rtl"] .arrow-link:hover svg,
html[dir="rtl"] .card:hover .go svg { transform: scaleX(-1) translateX(5px); }
html[dir="rtl"] .nav a::after { transform-origin: 100% 50%; }

html[dir="rtl"] .hero .bg::after {
  background:
    linear-gradient(263deg, rgba(15, 27, 34, .78) 0%, rgba(15, 27, 34, .44) 46%, rgba(15, 27, 34, .16) 76%),
    linear-gradient(180deg, rgba(18, 31, 39, .30) 0%, rgba(18, 31, 39, .40) 55%, rgba(18, 31, 39, .82) 100%);
}

html[dir="rtl"] .field input,
html[dir="rtl"] .field textarea,
html[dir="rtl"] .field select { text-align: right; direction: rtl; }

html[dir="rtl"] .plankbar,
html[dir="rtl"] .kicker .planks { flex-direction: row-reverse; }

html[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--tangerine); padding: 4px 16px 4px 0; }
html[dir="rtl"] .card .photo .chip { left: auto; right: 14px; }
html[dir="rtl"] .rail-nav { right: auto; left: 0; }
html[dir="rtl"] .specs th, html[dir="rtl"] .specs td { text-align: right; }
html[dir="rtl"] .sect-head.center .kicker { justify-content: center; }
