/* BOHO TOUCH: IBM Plex Sans Arabic Regular only. Salla loads only the 400 face; stop the browser faking bold. */
html { font-synthesis: none; }

/* ---------- Header over the hero (home page only) ----------
   Raed adds .fixed-pinned to #mainnav once the page scrolls.
   Before that, the header sits on the hero: transparent, paper-coloured text, no divider. */
body.index .store-header { position: absolute; top: 0; right: 0; left: 0; z-index: 30; }
body.index .store-header .top-navbar,
body.index #mainnav:not(.fixed-pinned),
body.index #mainnav:not(.fixed-pinned) .inner { background: transparent !important; box-shadow: none !important; }
body.index .store-header .top-navbar *,
body.index #mainnav:not(.fixed-pinned) .inner * { color: #F7F6F2; }
/* Legibility over a busy photo: a soft shadow on text and icons, not decoration. */
body.index .store-header .top-navbar,
body.index #mainnav:not(.fixed-pinned) .inner { text-shadow: 0 1px 3px rgba(20, 12, 8, .55); }
body.index #mainnav:not(.fixed-pinned) .inner a { font-size: 16px; }
body.index #mainnav:not(.fixed-pinned) .inner img { filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(20, 12, 8, .6)); }
body.index .store-header .top-navbar input { background: rgba(41, 27, 20, .42) !important; border: 1px solid rgba(247, 246, 242, .4) !important; color: #F7F6F2 !important; }
body.index .store-header .top-navbar input::placeholder { color: #F7F6F2; opacity: .9; }
body.index #mainnav:not(.fixed-pinned) .inner .header-btn__icon,
body.index #mainnav:not(.fixed-pinned) .inner .s-user-menu-login-btn { background: rgba(41, 27, 20, .48) !important; border: 1px solid rgba(247, 246, 242, .6) !important; color: #F7F6F2 !important; }
body.index #mainnav:not(.fixed-pinned) .inner i,
body.index #mainnav:not(.fixed-pinned) .inner svg { color: #F7F6F2 !important; fill: currentColor; }

/* Pinned header on every page: semi-transparent paper, no divider line.
   The blur is the only glass surface on the site. */
#mainnav { box-shadow: none !important; }
#mainnav.fixed-pinned .inner { background: rgba(247, 246, 242, .88) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none !important; }

/* ---------- Hero ---------- */
body.index .s-block:has(.bt-hero) { margin-top: 0 !important; }
body.index .s-block:has(.bt-hero) > .container { max-width: none; padding: 0; }
.bt-hero { position: relative; height: clamp(560px, 90vh, 860px); overflow: hidden; background: #291B14; color: #F7F6F2; }
.bt-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Legibility, not decoration: darken only behind the menu (top) and behind the text (right). */
.bt-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(41, 27, 20, .8), rgba(41, 27, 20, .68) 16%, rgba(41, 27, 20, 0) 36%),
              linear-gradient(to left, rgba(41, 27, 20, .55), rgba(41, 27, 20, 0) 58%); }
.bt-hero__content { position: absolute; z-index: 1; top: 50%; right: max(24px, calc((100% - 1280px) / 2 + 24px)); transform: translateY(-40%); max-width: 520px; text-align: right; }
.bt-hero__title { margin: 0 0 12px; font-size: clamp(44px, 5.4vw, 80px); font-weight: 400; line-height: 1.15; color: #F7F6F2; }
.bt-hero__sub { margin: 0 0 28px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; color: rgba(247, 246, 242, .92); }
.bt-hero__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 4px; background: #834B2C; color: #F7F6F2 !important; font-size: 17px; text-decoration: none; transition: background-color .2s ease; }
.bt-hero__cta:hover { background: #6E3E24; }
.bt-hero__cta:focus-visible { outline: 2px solid #F7F6F2; outline-offset: 3px; }

/* The text settles in once; nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .bt-hero__content > * { animation: bt-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .bt-hero__sub { animation-delay: .12s !important; }
  .bt-hero__cta { animation-delay: .24s !important; }
}
@keyframes bt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Mobile: 3:4 media, text at the bottom over the calm floor. */
@media (max-width: 767px) {
  .bt-hero { height: auto; aspect-ratio: 3 / 4; max-height: 86svh; }
  .bt-hero::after { background: linear-gradient(to bottom, rgba(41, 27, 20, .8), rgba(41, 27, 20, .66) 22%, rgba(41, 27, 20, 0) 42%),
                                linear-gradient(to top, rgba(41, 27, 20, .7), rgba(41, 27, 20, 0) 50%); }
  .bt-hero__content { top: auto; bottom: 24px; right: 16px; left: 16px; transform: none; max-width: none; }
  .bt-hero__title { font-size: 40px; margin-bottom: 8px; }
  .bt-hero__sub { font-size: 16px; margin-bottom: 18px; }
}