/**
* RTL overrides — loaded only when .
* Arabic type: El Messiri (display/headings) + Noto Naskh Arabic (body/serif).
* All rules are scoped to [dir="rtl"] so this file can be linked unconditionally.
*/
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600&display=swap');
/* ============================================================
* Arabic typeface mapping
* Playfair Display → El Messiri (display headings)
* Cormorant Garamond/Spectral → Noto Naskh Arabic (body/sub)
* Inter → Noto Sans Arabic (UI/sans)
* JetBrains Mono → unchanged (codes, numbers, labels)
* ============================================================ */
[dir="rtl"] {
--f-display: 'El Messiri', 'Playfair Display', serif;
--f-serif: 'Noto Naskh Arabic', 'Cormorant Garamond', serif;
--f-italic: 'Noto Naskh Arabic', 'Spectral', serif;
--f-sans: 'Noto Sans Arabic', 'Inter', sans-serif;
}
/* ============================================================
* Skip link
* ============================================================ */
[dir="rtl"] .skip-link {
right: 8px;
left: auto;
}
/* ============================================================
* Nav
* ============================================================ */
/* Brand stays on left in RTL (effectively the start side) — no change needed
since flexbox with dir=rtl naturally reverses the row order.
But we need to keep brand visible at the start of the visual row. */
[dir="rtl"] .nav {
direction: rtl;
}
[dir="rtl"] .nav__right {
flex-direction: row-reverse;
}
/* ============================================================
* Ribbon — last item aligns start (left in LTR, right in RTL)
* ============================================================ */
[dir="rtl"] .ribbon > :last-child {
text-align: left;
}
[dir="rtl"] .ribbon > :first-child {
text-align: right;
}
/* ============================================================
* Hero
* ============================================================ */
/* Swap the border and padding of the two rails */
[dir="rtl"] .hero__rail--l {
border-right: none;
padding-right: 0;
border-left: 1px solid var(--c-rule);
padding-left: 24px;
align-items: flex-end;
text-align: right;
}
[dir="rtl"] .hero__rail--r {
border-left: none;
padding-left: 0;
border-right: 1px solid var(--c-rule);
padding-right: 24px;
align-items: flex-start;
text-align: left;
}
/* Bottle frame corner metadata */
[dir="rtl"] .bottle-frame .meta-tl {
left: auto;
right: 18px;
}
[dir="rtl"] .bottle-frame .meta-tr {
right: auto;
left: 18px;
}
/* ============================================================
* Numbers grid
* ============================================================ */
[dir="rtl"] .numbers__cell {
border-right: none;
border-left: 1px solid var(--c-rule);
}
[dir="rtl"] .numbers__cell:last-child {
border-left: none;
}
/* ============================================================
* Section head — filter text aligns to start
* ============================================================ */
[dir="rtl"] .sec__filter {
text-align: left;
}
/* ============================================================
* Catalogue table
* ============================================================ */
[dir="rtl"] .cat__header > :last-child {
text-align: left;
}
/* ============================================================
* Filter bar
* ============================================================ */
[dir="rtl"] .filter-block__label {
text-align: right;
}
[dir="rtl"] .filter-bar__head {
flex-direction: row-reverse;
}
[dir="rtl"] .chip-row {
flex-direction: row-reverse;
}
/* ============================================================
* Taxonomy / by-note
* ============================================================ */
/* Swatch overlay arrow stays on start side */
[dir="rtl"] .tax__cell .count {
direction: rtl;
}
/* ============================================================
* Reading Room / articles
* ============================================================ */
[dir="rtl"] .reading-lead__body {
padding-right: 0;
padding-left: 24px;
}
[dir="rtl"] .reading__all {
text-align: left;
}
/* ============================================================
* Info grid — swap border sides
* ============================================================ */
[dir="rtl"] .info-grid > * {
border-left: none;
border-right: 1px solid var(--c-rule);
}
[dir="rtl"] .info-grid > :first-child {
border-right: none;
}
/* ============================================================
* Houses grid — swap border sides
* ============================================================ */
[dir="rtl"] .houses-grid__card {
border-left: none;
border-right: 1px solid var(--c-rule);
}
/* ============================================================
* Folio header
* ============================================================ */
[dir="rtl"] .folio {
direction: rtl;
}
/* ============================================================
* Account / checkout forms
* ============================================================ */
[dir="rtl"] .con-field__l {
text-align: right;
}
[dir="rtl"] .account-form {
direction: rtl;
}
[dir="rtl"] .account-grid {
direction: rtl;
}
/* ============================================================
* Cart table
* ============================================================ */
[dir="rtl"] .cart-table th,
[dir="rtl"] .cart-table td {
text-align: right;
}
[dir="rtl"] .cart-table th[style*="text-align:right"],
[dir="rtl"] .cart-table td[style*="text-align:right"] {
text-align: left !important;
}
/* ============================================================
* PDP — product detail
* ============================================================ */
[dir="rtl"] .pdp-specs {
direction: rtl;
}
[dir="rtl"] .pdp-ledger {
direction: rtl;
}
/* Spec key labels: Arabic chars need a larger floor than 10px */
[dir="rtl"] .pdp-spec__k {
font-size: 12px;
letter-spacing: normal;
}
/* Size button text starts from the right in RTL */
[dir="rtl"] .pdp-size {
text-align: right;
}
/* Price block aligns to flex-start = right in RTL */
[dir="rtl"] .price-block {
align-items: flex-end;
}
[dir="rtl"] .pdp-gallery__meta-tl {
left: auto;
right: 18px;
}
[dir="rtl"] .pdp-gallery__meta-tr {
right: auto;
left: 18px;
}
[dir="rtl"] .pdp-gallery__corner--tl {
left: auto;
right: 0;
}
[dir="rtl"] .pdp-gallery__corner--tr {
right: auto;
left: 0;
}
[dir="rtl"] .pdp-gallery__corner--bl {
left: auto;
right: 0;
}
[dir="rtl"] .pdp-gallery__corner--br {
right: auto;
left: 0;
}
/* ============================================================
* Footer
* ============================================================ */
[dir="rtl"] .footer__tag {
text-align: right;
}
[dir="rtl"] .footer__col h4 {
text-align: right;
}
[dir="rtl"] .footer__bot {
flex-direction: row-reverse;
}
/* ============================================================
* Note grid
* ============================================================ */
/* Mirror swatch blob to start (right) side */
[dir="rtl"] .note-cell__swatch {
right: auto;
left: -16px;
}
/* Note count: Arabic chars don't benefit from letter-spacing */
[dir="rtl"] .note-cell__count {
font-size: 12px;
letter-spacing: normal;
}
/* ============================================================
* Mobile — at ≤640px
* ============================================================ */
@media (max-width: 640px) {
[dir="rtl"] .hero__rail--l,
[dir="rtl"] .hero__rail--r {
border: none;
padding: 0;
align-items: flex-start;
text-align: right;
}
[dir="rtl"] .cat__cols {
direction: rtl;
}
}