/* =====================================================================
   Storefront navigation styles (admin-selectable "Storefront Layout")
   - .sf-menu--noon   : top category bar with hover mega panels
   - .sf-menu--drawer : "All categories" off-canvas drawer
   - .sf-hero--full   : full-width home banner slider
   Every colour comes from the brand tokens injected by the theme
   (--web-primary / --web-secondary / --web-primary-10 ...), so the bar
   always follows the identity colours set in Business Setup.
   All selectors are prefixed with .sf- to avoid touching theme styles.
   ===================================================================== */

.sf-header {
  --sf-primary: var(--web-primary, #1b7fed);
  --sf-secondary: var(--web-secondary, #f58300);
  --sf-primary-10: var(--web-primary-10, rgba(27, 127, 237, 0.06));
  --sf-primary-20: var(--web-primary-20, rgba(27, 127, 237, 0.12));
  --sf-on-primary: #ffffff;
  --sf-surface: #ffffff;
  --sf-text: #1f2937;
  --sf-text-dim: #6b7280;
  --sf-border: #e5e7eb;
  --sf-radius: 10px;
  --sf-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.28), 0 6px 16px -8px rgba(15, 23, 42, 0.12);
  --sf-bar-h: 46px;
  --sf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------------
   Shared: mobile category chips (noon + drawer styles, < 768px)
   --------------------------------------------------------------------- */
.sf-chips {
  display: none;
  background: var(--sf-surface);
  border-bottom: 1px solid var(--sf-border);
}
.sf-chips-track {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sf-chips-track::-webkit-scrollbar { display: none; }
.sf-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--sf-border);
  background: #fff;
  color: var(--sf-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: start;
  text-decoration: none !important;
}
.sf-chip:active { background: var(--sf-primary-10); }
.sf-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
}
.sf-chip--all {
  background: var(--sf-primary);
  border-color: var(--sf-primary);
  color: var(--sf-on-primary);
  padding-inline-start: 10px;
}
.sf-chip--all i { font-size: 13px; line-height: 1; display: inline-flex; }
@media (max-width: 767.98px) {
  .sf-menu--noon .sf-chips,
  .sf-menu--drawer .sf-chips { display: block; }
}

/* ---------------------------------------------------------------------
   NOON STYLE: top category bar
   --------------------------------------------------------------------- */
.sf-catbar {
  position: relative;
  background: var(--sf-primary);
  color: var(--sf-on-primary);
  z-index: 1020;
}
.sf-catbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sf-bar-h);
}
.sf-catbar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden; /* JS moves overflowing items into "More" */
}
.sf-catbar-list > li { flex: none; position: relative; }
.sf-catbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--sf-bar-h);
  padding: 0 10px;
  color: var(--sf-on-primary) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none !important;
  position: relative;
  transition: background-color 160ms var(--sf-ease);
}
.sf-catbar-item img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.85);
  flex: none;
}
.sf-catbar-item::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--sf-secondary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms var(--sf-ease);
}
.sf-catbar-list > li:hover > .sf-catbar-item,
.sf-catbar-list > li.sf-is-open > .sf-catbar-item,
.sf-catbar-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.sf-catbar-list > li:hover > .sf-catbar-item::after,
.sf-catbar-list > li.sf-is-open > .sf-catbar-item::after,
.sf-catbar-item:focus-visible::after { transform: scaleX(1); }
.sf-catbar-item .sf-caret {
  font-size: 10px;
  opacity: 0.75;
  line-height: 1;
  display: inline-flex;
  transition: transform 180ms var(--sf-ease);
}
.sf-catbar-list > li.sf-is-open > .sf-catbar-item .sf-caret { transform: rotate(180deg); }

/* "More" overflow dropdown */
.sf-catbar-more { display: none; }
.sf-catbar-more.sf-has-items { display: block; }
.sf-catbar-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--sf-surface);
  color: var(--sf-text);
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-shadow);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms var(--sf-ease), transform 160ms var(--sf-ease), visibility 0s linear 160ms;
  z-index: 1030;
}
.sf-catbar-more-menu.sf-is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.sf-catbar-more-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sf-text) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none !important;
}
.sf-catbar-more-menu > li > a:hover { background: var(--sf-primary-10); color: var(--sf-primary) !important; }
.sf-catbar-more-menu > li > a img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* Secondary links group (Offers, Brands, Vendors ...) at the end of the bar */
.sf-catbar-links {
  margin-inline-start: auto;
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
  flex: none;
}
.sf-catbar-links .navbar-nav {
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.sf-catbar-links .nav-item > .nav-link,
.sf-catbar-links .nav-item .dropdown > button {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 0 8px !important;
  height: var(--sf-bar-h);
  display: inline-flex;
  align-items: center;
  color: var(--sf-on-primary) !important;
  opacity: 0.92;
  white-space: nowrap;
}
.sf-catbar-links .nav-item > .nav-link:hover,
.sf-catbar-links .nav-item .dropdown > button:hover { opacity: 1; }
.sf-catbar-links .dropdown-menu { margin-top: 0 !important; }
.sf-catbar-links .nav-item.d-md-none { display: none !important; }
.sf-catbar-links .sf-nav-home { display: none !important; } /* the logo already links home */
.sf-catbar-links .dropdown-divider.d-md-none { display: none !important; }

/* Mega panels: rendered outside the scroller so they are never clipped */
.sf-mega {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  background: var(--sf-surface);
  color: var(--sf-text);
  border-radius: 0 0 var(--sf-radius) var(--sf-radius);
  box-shadow: var(--sf-shadow);
  border-top: 3px solid var(--sf-secondary);
  padding: 22px 26px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms var(--sf-ease), transform 180ms var(--sf-ease), visibility 0s linear 180ms;
  z-index: 1029;
  max-height: min(70vh, 560px);
  overflow: hidden;
}
.sf-mega.sf-is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.sf-mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px 22px;
  align-content: start;
  max-height: calc(min(70vh, 560px) - 46px);
  overflow-y: auto;
  padding-inline-end: 6px;
  scrollbar-width: thin;
}
.sf-mega-col h6 {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sf-border);
}
.sf-mega-col h6 a { color: var(--sf-text) !important; text-decoration: none !important; }
.sf-mega-col h6 a:hover { color: var(--sf-primary) !important; }
.sf-mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-mega-col ul a {
  display: block;
  font-size: 13px;
  color: var(--sf-text-dim) !important;
  text-decoration: none !important;
  padding: 3px 0;
  transition: color 120ms, padding-inline-start 160ms var(--sf-ease);
}
.sf-mega-col ul a:hover { color: var(--sf-primary) !important; padding-inline-start: 4px; }
.sf-mega-col ul a.sf-more-link { color: var(--sf-secondary) !important; font-weight: 600; }
.sf-mega-aside {
  border-radius: var(--sf-radius);
  background: linear-gradient(160deg, var(--sf-primary-10), var(--sf-primary-20));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px 18px;
  align-self: start;
}
.sf-mega-aside img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
}
.sf-mega-aside strong { font-size: 15px; color: var(--sf-text); }
.sf-mega-aside span { font-size: 12px; color: var(--sf-text-dim); }
.sf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--sf-secondary);
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  transition: filter 140ms;
}
.sf-btn-secondary:hover { filter: brightness(0.92); }
.sf-btn-secondary i { font-size: 11px; line-height: 1; display: inline-flex; }
[dir="rtl"] .sf-btn-secondary i,
[dir="rtl"] .sf-drawer-item i.sf-arrow { transform: scaleX(-1); }

/* Desktop: bar replaces the classic dark links row; mobile keeps the classic collapse menu */
@media (min-width: 768px) {
  .sf-menu--noon .navbar-stuck-menu { display: none !important; }
  .sf-menu--noon .sf-catbar { display: block; }
}
@media (max-width: 767.98px) {
  .sf-menu--noon .sf-catbar { display: none; }
}
/* Stuck (scrolled) header keeps only the main row; the toolbar hamburger re-opens the bar */
@media (min-width: 992px) {
  .sf-menu--noon .navbar-sticky.navbar-stuck .sf-catbar { display: none; }
  .sf-menu--noon .navbar-sticky.navbar-stuck .sf-catbar.show { display: block; animation: sfFadeDown 220ms var(--sf-ease); }
}
@keyframes sfFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   DRAWER STYLE: off-canvas "All categories"
   --------------------------------------------------------------------- */
.sf-menu--drawer .megamenu-wrap { display: none !important; }
.sf-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--sf-ease), visibility 0s linear 200ms;
  z-index: 1060;
}
.sf-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: min(360px, 92vw);
  background: var(--sf-surface);
  color: var(--sf-text);
  box-shadow: var(--sf-shadow);
  transform: translateX(-100%);
  transition: transform 260ms var(--sf-ease);
  z-index: 1061;
  display: flex;
  flex-direction: column;
}
[dir="rtl"] .sf-drawer { transform: translateX(100%); }
.sf-drawer-open .sf-drawer-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
.sf-drawer-open .sf-drawer,
[dir="rtl"] .sf-drawer-open .sf-drawer { transform: translateX(0); }
body.sf-drawer-open { overflow: hidden; }
.sf-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--sf-primary);
  color: var(--sf-on-primary);
}
.sf-drawer-head strong { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.sf-drawer-head strong i { font-size: 16px; line-height: 1; display: inline-flex; }
.sf-drawer-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
.sf-drawer-close:hover { background: rgba(255, 255, 255, 0.24); }
.sf-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0 24px; scrollbar-width: thin; }
.sf-drawer-list, .sf-drawer-sub, .sf-drawer-subsub { list-style: none; margin: 0; padding: 0; }
.sf-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  background: transparent;
  color: var(--sf-text) !important;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 120ms;
}
.sf-drawer-item:hover { background: var(--sf-primary-10); }
.sf-drawer-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #f3f4f6; flex: none; }
.sf-drawer-item .sf-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-drawer-item i.sf-arrow { font-size: 11px; color: var(--sf-text-dim); transition: transform 180ms var(--sf-ease); }
.sf-drawer-node.sf-is-open > .sf-drawer-item { color: var(--sf-primary) !important; background: var(--sf-primary-10); }
.sf-drawer-node.sf-is-open > .sf-drawer-item i.sf-arrow { transform: rotate(90deg) !important; }
.sf-drawer-sub { display: none; padding: 4px 0 6px; background: #fafafa; border-block: 1px solid var(--sf-border); }
.sf-drawer-node.sf-is-open > .sf-drawer-sub { display: block; }
.sf-drawer-sub > li > .sf-drawer-item { padding-inline-start: 60px; font-size: 13.5px; font-weight: 500; padding-block: 9px; }
.sf-drawer-subsub { display: none; }
.sf-drawer-subnode.sf-is-open > .sf-drawer-subsub { display: block; }
.sf-drawer-subsub > li > a {
  display: block;
  padding: 7px 16px 7px 78px;
  font-size: 13px;
  color: var(--sf-text-dim) !important;
  text-decoration: none !important;
}
[dir="rtl"] .sf-drawer-sub > li > .sf-drawer-item { padding-inline-start: 60px; }
[dir="rtl"] .sf-drawer-subsub > li > a { padding: 7px 78px 7px 16px; }
.sf-drawer-subsub > li > a:hover { color: var(--sf-primary) !important; }
.sf-drawer-viewall {
  display: block;
  padding: 8px 16px 8px 60px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sf-secondary) !important;
  text-decoration: none !important;
}
[dir="rtl"] .sf-drawer-viewall { padding: 8px 60px 8px 16px; }
.sf-drawer-foot { padding: 12px 16px; border-top: 1px solid var(--sf-border); }
.sf-drawer-foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--sf-primary);
  color: #fff !important;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none !important;
}

/* ---------------------------------------------------------------------
   FULL-WIDTH HOME BANNER
   --------------------------------------------------------------------- */
.sf-hero--full .hero-slider { border-radius: 12px; overflow: hidden; }
.sf-hero--full .hero-slider .owl-item a { background: transparent; }
@media (min-width: 768px) {
  .sf-hero--full .__slide-img { height: 300px !important; max-height: none !important; object-fit: cover; object-position: center; }
}
@media (min-width: 992px) {
  .sf-hero--full .__slide-img { height: 380px !important; }
}
@media (min-width: 1280px) {
  .sf-hero--full .__slide-img { height: 440px !important; }
  .sf-hero--full .__top-slider-images { width: 100%; max-width: 100%; flex: 0 0 100%; }
}
@media (max-width: 767.98px) {
  .sf-hero--full .hero-slider { border-radius: 8px; }
}


/* ---------------------------------------------------------------
   Fix: the account dropdown (.__auth-dropdown, z-index 990) was being
   covered by the category bar (.sf-catbar, z-index 1020), which hid the
   "Sign in" item completely and left only "Sign up" visible.
   --------------------------------------------------------------- */
.__auth-dropdown {
    z-index: 1080 !important;
}


/* ---------------------------------------------------------------
   Fix (2): every header dropdown - account, cart, currency, language
   and the mega-menu - is z-index 990 in theme.css, while the category
   bar .sf-catbar added by the September redesign sits at 1020, so any
   menu opening from the top row is clipped behind the bar.
   Raise the header dropdowns above it.
   --------------------------------------------------------------- */
header .dropdown-menu,
.navbar-sticky .dropdown-menu {
    z-index: 1080;
}


/* ---------------------------------------------------------------
   Saudi Riyal symbol (the official 2025 sign).
   The store prints U+FDFC in every price, and because no Arabic
   webfont is loaded each visitor was seeing whatever their own
   device drew. This maps that one character - plus the Unicode
   points U+20C0 / U+20C1 - to the official symbol. The font is
   embedded and subset to a single glyph (500 bytes), so nothing
   external is requested, and the currency setting in the database,
   the invoices and the API responses all stay untouched.
   Source: Saudi-Riyal-Font (open source, emran-alhaddad).
   --------------------------------------------------------------- */
@font-face {
    font-family: 'saudi_riyal';
    src: url(data:font/woff2;base64,d09GMgABAAAAAAHwAAsAAAAAA+wAAAGiAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAASBEICoE8gTUBNgIkAwgLBgAEIAWCFgcgGxwDAI7UXvOCyCriAVrr9c3s7v0L84YIFTJaBEmg8m2olUS6lWnzn98AInf8wAGfZAHocwRhQEFbFlGELYvygiSi3E7Y7LYn5gFJloazMuLx+BInqy38oHOIispEMvU5g/J3367if6PISkGApATkAiISVJcIqC7VDUVFkfz9X74N+TveWSvETFAEBAHhfyKIIEWKzpgISEEU07TQNFTZUXlSpWLFHQu+nzL3y5JBA4Lky8Q4MYOVzv0ycYHVTztOuRLClOicrPTcsmVv/nmjz97uTms4rDDmzvRGw681ajikMHbM8CPN+jcYUhL9v49p3WvYhQP15o5r3WNYhZYDGo0sjJww8sHisZJ484S/bw9b9KTGZdteCQgIrFr5ceycSv3+LZYrgl9/ndAZfv9QYStkW7JSFEUQeK8vHE9Fgxhicg4cCdUERK1FEBEEDAJQYrpESMsgZyeoKSeqqAeJdoaRamEtmejyfEEzV+Vyw62y3jyr5QZbaal5Flo4yQZ3k4WWmWP9f7aZZ6X1Fllik5XmWS/XR67O5J5CWd7ldn2iAQAAAA==) format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    size-adjust: 150%;
    unicode-range: U+FDFC, U+20C0, U+20C1;
}

html, body,
.text-accent,
.product-title,
.product-title2,
[class*="price"],
[class*="amount"],
[class*="total"] {
    /* custom.css sets "body, html" with !important, so this needs it too */
    font-family: 'saudi_riyal', Inter, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* ---------------------------------------------------------------
   Footer - brown identity palette (2026-09)
   The old footer was navy (#183F56) and clashed with the copper
   logo. This retones it around the logo's copper, enlarges the
   footer mark and gives the operator line its own emphasis.
   --------------------------------------------------------------- */
.page-footer {
    background: #3A2318 !important;
    background: linear-gradient(180deg, #4A2E1F 0%, #3A2318 46%, #2C1A11 100%) !important;
    border-top: 3px solid #B87333;
    color: #DCC9B7;
}

.page-footer .custom-light-primary-color-20 { background: rgba(0, 0, 0, 0.10) !important; }
.page-footer .bg-white-overlay-50 { background: rgba(0, 0, 0, 0.20) !important; }

.page-footer h1, .page-footer h2, .page-footer h3,
.page-footer h4, .page-footer h5, .page-footer h6,
.page-footer .heading, .page-footer .title {
    color: #F3E6D9;
}

.page-footer p, .page-footer li, .page-footer span, .page-footer small { color: #DCC9B7; }
.page-footer a { color: #DCC9B7; transition: color .18s ease; }
.page-footer a:hover, .page-footer a:focus { color: #F0D9BF; }
.page-footer hr, .page-footer .border-top, .page-footer .border-bottom { border-color: rgba(184, 115, 51, 0.30) !important; }
.page-footer svg, .page-footer i { color: #C08A55; }

/* newsletter */
.page-footer .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(184, 115, 51, 0.38);
    color: #F3E6D9;
}
.page-footer .form-control::placeholder { color: rgba(220, 201, 183, 0.65); }
.page-footer .subscribe-button {
    background: #B87333 !important;
    color: #FFF6EC !important;
    border: 0;
}
.page-footer .subscribe-button:hover { background: #C9853F !important; }

/* footer logo - transparent artwork, larger */
.footer-web-logo a img {
    height: 84px !important;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
}

/* operator / commercial-registration line */
.page-footer .bg-white-overlay-50 p.fs-14.text-center {
    color: #EFDFCD;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: .2px;
}
.page-footer .bg-white-overlay-50 p.fs-14.text-center::after {
    content: "CopyRight @intelligentTech";
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;
    color: rgba(220, 201, 183, 0.62);
}

@media (max-width: 767.98px) {
    .footer-web-logo a img { height: 64px !important; }
}