/* ════════════════════════════════════════════════════════════
   RTL overrides — loaded ONLY for Arabic (see layout.jinja, is_rtl).
   Loads LAST so it wins over the component stylesheets.
   Scoped with [dir="rtl"] for safety. Prices/numbers intentionally
   stay LTR (handled with dir="ltr" on those spans in templates).
   ════════════════════════════════════════════════════════════ */

/* ── Global: undo baked-in LTR forcing ── */
[dir="rtl"] .heet-section-title { text-align: right; }

/* ── Page header / sort dropdown ── */
[dir="rtl"] .heet-page-header { direction: rtl; }
[dir="rtl"] .heet-sort-list { right: auto; left: 0; }
[dir="rtl"] .heet-sort-list li a { text-align: right; }

/* ── Toast (anchored to the start corner = right in RTL) ── */
[dir="rtl"] .heet-toast { right: auto; left: 30px; border-left: none; border-right: 4px solid #000000; }
[dir="rtl"] .heet-toast--success { border-right-color: #28a745; }
[dir="rtl"] .heet-toast--error { border-right-color: #dc3545; }

/* ── Breadcrumb separator ── */
[dir="rtl"] .heet-breadcrumb__list li:not(:last-child)::after { margin-left: 0; margin-right: 0.5rem; }

/* ── Header ── */
[dir="rtl"] .heet-header__cart-count { margin-left: 0; margin-right: -6px; }

/* ── Footer (mirror the column divider + restore RTL flow) ── */
[dir="rtl"] .heet-footer { direction: rtl; }
[dir="rtl"] .heet-footer__left { border-right: none; border-left: 1px solid #000; }
@media (max-width: 768px) {
  [dir="rtl"] .heet-footer__left { border-left: none; border-bottom: 1px solid #000; }
}
/* Phone number stays LTR for correct digit order */
[dir="rtl"] .heet-footer__phone { direction: ltr; }

/* ── Numbers use a Latin font in Arabic (font-family ONLY, nothing else) ──
   Ghroob renders Latin digits poorly (e.g. "1" looks like a vertical bar). Switch every
   numeric element to Helvetica Now so digits read correctly across the whole site. Elements
   that mix Arabic text with a number keep Ghroob on the text and wrap the number in .heet-num. */
[dir="rtl"] .heet-footer__phone,
[dir="rtl"] .heet-footer__num,
[dir="rtl"] .heet-num,
[dir="rtl"] .product-card__price,
[dir="rtl"] .pd__price-value,
[dir="rtl"] .pd__weight,
[dir="rtl"] .cart-item__unit-price,
[dir="rtl"] .cart-item__price,
[dir="rtl"] .cart-summary__row span[dir="ltr"],
[dir="rtl"] .cart-qty-input,
[dir="rtl"] .pd__qty-input,
[dir="rtl"] .heet-header__cart-count,
[dir="rtl"] .heet-pagination__list a:not([rel]),
[dir="rtl"] .heet-pagination__list span {
  font-family: 'Helvetica Now Text', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Cart ── */
[dir="rtl"] .cart-item__remove { right: auto; left: 24px; }
[dir="rtl"] .cart-item__image { margin-right: 0; margin-left: 32px; }
[dir="rtl"] .cart-item__title { text-align: right !important; direction: rtl !important; padding-right: 0; padding-left: 32px; }
@media (max-width: 640px) {
  [dir="rtl"] .cart-item__image { margin-right: 0; margin-left: 16px; }
}

/* ── Generic pages (About / Business) ── */
[dir="rtl"] .heet-page__layout { direction: rtl; text-align: right; }
[dir="rtl"] .heet-page__content { text-align: right; }
[dir="rtl"] .heet-page__list ul { padding-left: 0; padding-right: 20px; }

/* ── Accordion (Terms / Privacy / Consulting / Services) ── */
[dir="rtl"] .heet-accordion--fullwidth { direction: rtl; text-align: right; }
[dir="rtl"] .heet-accordion__content { direction: rtl; text-align: right; }

/* ── Product detail: swap the price / details sections for RTL reading ──
   The .pd block stays direction:ltr (keeps the info|gallery grid unchanged); we only
   reverse the two inline sections so the name + attributes sit on the RIGHT and the
   price on the LEFT, and flip each attribute row (label → right, value → left). */
[dir="rtl"] .pd__header { flex-direction: row-reverse; gap: 40px; }
[dir="rtl"] .pd__attr-row { flex-direction: row-reverse; }
[dir="rtl"] .pd__attr-value { text-align: left; }
/* Stack the name directly above the attribute column: right-align it and inset it by the
   attrs card's 18px side padding so the name's right edge lines up with the labels
   (المنشأ/المعالجة/الإيحاءات), which sit 18px in from the card edge. */
[dir="rtl"] .pd__titles { text-align: right; padding-right: 18px; }