/* ============================================================ BuyInSaudi — Base Reset, typography, RTL foundation. Arabic is the default direction. ============================================================ */ /* Reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } a { color: inherit; } ul, ol { list-style: none; padding: 0; margin: 0; } /* RTL default — English variant flips via [lang="en"] on */ html { direction: rtl; } html[lang="en"] { direction: ltr; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--bis-ink-900); background: var(--bis-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html[lang="en"] body { font-family: var(--font-latin); line-height: 1.5; } /* Numbers — always Hindu-Arabic numerals with tabular spacing even inside Arabic prose (Saudi digital convention) */ .num, [data-num], .price { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; } .price { font-weight: 700; } /* Focus ring — brand clay, not browser blue */ :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--bis-clay); outline-offset: 2px; border-radius: var(--r-xs); } /* Utility */ [hidden] { display: none !important; } /* ============================================================ Skeleton loading state ============================================================ */ @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skeleton { background: linear-gradient( 90deg, var(--bis-clay-200) 25%, var(--bis-clay-100) 50%, var(--bis-clay-200) 75% ); background-size: 600px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--r-sm); } .skeleton--text { height: 1em; border-radius: var(--r-xs); } .skeleton--card { border-radius: var(--r-lg); min-height: 280px; } .skeleton--img { aspect-ratio: 4/3; border-radius: var(--r-md); }