/* =====================================================================
   Bareq | بارق  —  custom CSS for Salla "Raed" theme
   Paste into: تصميم المتجر > تخصيص النسخة > تخصيص متقدم > CSS
   Brand: navy #040A16 · cyan #00D6FF · white · Cairo
   Works with bareq_custom.js (adds the shortcut bar, section ids,
   section headers and the mobile tab bar). Every rule degrades
   gracefully if an element is missing.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

html:root { --bq-top: 0px; /* height of the pinned header, set by JS on <html> */ }
html:root, html body {
  --bq-bg: #040A16;
  --bq-bg-2: #071122;
  --bq-surface: #0B1629;
  --bq-surface-2: #10203A;
  --bq-border: rgba(0, 214, 255, .14);
  --bq-border-strong: rgba(0, 214, 255, .35);
  --bq-cyan: #00D6FF;
  --bq-cyan-dark: #00A9CC;
  --bq-text: #FFFFFF;
  --bq-muted: #A3B1C6;
  --bq-radius: 16px;
  --bq-radius-sm: 12px;
  --bq-glow: 0 0 0 1px rgba(0, 214, 255, .45), 0 0 24px rgba(0, 214, 255, .33);
  --bq-tabbar-h: 64px;

  /* Salla / Raed theme variables */
  --color-primary: #00D6FF;
  --color-primary-dark: #00A9CC;
  --color-primary-light: #5FE6FF;
  --color-primary-reverse: #040A16;
  --color-reverse-primary: #040A16;
  --color-text-reverse: #040A16;
  --color-reverse-text: #040A16;
  --color-secondary: #00D6FF;
  --color-title: #FFFFFF;
  --color-text: #C9D3E2;
  --color-grey: #0B1629;
  --color-light-grey: #10203A;
  --mainnav-bg: #040A16;
  --mainnav-text-color: #FFFFFF;
  --font-main: 'Cairo', sans-serif;
  --font-ar: 'Cairo', sans-serif;
  color-scheme: dark;
}

/* ---------- 1. Base / dark theme ---------- */
html, body, #app, .app-inner, main, #main-content {
  background-color: var(--bq-bg) !important;
  color: var(--bq-text);
}
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, a, li, label, td, th,
span:not([class*="sicon-"]):not([class*="fa-"]) {
  font-family: 'Cairo', var(--font-main), sans-serif;
}
body ::selection { background: var(--bq-cyan); color: var(--bq-bg); }
a { transition: color .2s, opacity .2s; }
h1, h2, h3, h4, h5, h6 { color: var(--bq-text); }

/* Tailwind utility remap (theme is built with Tailwind) */
body .bg-white, body .bg-gray-50, body .bg-gray-100, body .bg-grey,
body .bg-\[\#F4F7F2\], body .bg-light, body .bg-gray-200 { background-color: var(--bq-surface) !important; }
body .text-gray-900, body .text-gray-800, body .text-dark, body .text-black { color: var(--bq-text) !important; }
body .text-gray-700, body .text-gray-600, body .text-gray-500 { color: #C9D3E2 !important; }
body .text-gray-400, body .text-gray-300 { color: var(--bq-muted) !important; }
body .border-gray-100, body .border-gray-200, body .border-gray-300, body .border,
body .border-b, body .border-t, body .divide-gray-200 > * { border-color: var(--bq-border) !important; }
body .shadow-default, body .shadow, body .shadow-md, body .shadow-sm { box-shadow: 0 6px 24px rgba(0,0,0,.35) !important; }

/* Scrollbar */
html { scrollbar-color: #1B3356 var(--bq-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bq-bg); }
::-webkit-scrollbar-thumb { background: #1B3356; border-radius: 10px; }

/* ---------- Header (new Raed .site-header + older .store-header) ---------- */
.site-header, .site-header__bar, .site-header__bar-outer, .site-header__bar-inner,
.store-header, .main-nav-container, #mainnav, #mainnav .inner {
  background-color: rgba(4, 10, 22, .96) !important;
  color: var(--bq-text) !important;
}
.site-header__bar, #mainnav .inner {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bq-border);
  box-shadow: 0 8px 30px rgba(0,0,0,.35) !important;
}
.site-header__topnav, .top-navbar {
  background: linear-gradient(90deg, #020611, #071730 50%, #020611) !important;
  border-bottom: 1px solid var(--bq-border);
  color: var(--bq-muted) !important;
}
.site-header__topnav a, .site-header__topnav button, .site-header__topnav-action, .s-menu-topnav-item,
.top-navbar a { color: var(--bq-muted) !important; }
.site-header__topnav a:hover, .s-menu-topnav-item:hover { color: var(--bq-cyan) !important; }
.site-header .main-menu > li > a, .main-menu > li > a, .site-header__mainmenu a,
.site-header svg, .header-action, .header-btn__icon, #mainnav .sicon-menu { color: var(--bq-text) !important; }
.site-header .main-menu > li > a:hover, .main-menu > li > a:hover,
.site-header .main-menu > li > a.active { color: var(--bq-cyan) !important; }
.site-header__burger span { background-color: var(--bq-text) !important; }
.header-btn__icon, .site-header .header-action { border-color: var(--bq-border) !important; }
/* dropdown / mega menu */
.s-menu-sub-menu, .main-menu .sub-menu, .site-header .s-menu-sub-menu ul {
  background-color: var(--bq-surface) !important; border: 1px solid var(--bq-border) !important;
  border-radius: var(--bq-radius-sm); box-shadow: 0 18px 40px rgba(0,0,0,.5) !important;
}
.s-menu-sub-menu a, .s-menu-sub-menu span { color: #D9E2EF !important; }
.s-menu-sub-menu a:hover, .s-menu-sub-menu a:hover span { color: var(--bq-cyan) !important; background: rgba(0,214,255,.06) !important; }
/* search */
salla-search input, .s-search-input, .s-search-container, .header-search input {
  background-color: var(--bq-surface) !important; color: var(--bq-text) !important;
  border-color: var(--bq-border) !important;
}
.s-search-results, .s-search-container-wrap { background-color: var(--bq-surface) !important; color: var(--bq-text) !important; }
/* cart badge / counters */
.s-cart-summary-count, .s-cart-summary-count span { background: var(--bq-cyan) !important; color: var(--bq-bg) !important; font-weight: 800; }
.s-cart-summary-total { color: var(--bq-text) !important; }

/* mobile drawer menu (mmenu) */
.mm-ocd__content, .mm-spn, .mm-spn--light, #mobile-menu, .mobile-menu {
  background: var(--bq-bg-2) !important; color: var(--bq-text) !important; --mm-spn-item-color: #fff;
}
.mm-spn a, .mm-spn span, .mm-spn li { color: var(--bq-text) !important; border-color: var(--bq-border) !important; }
.mm-spn li:after, .mm-spn li:before { border-color: var(--bq-border) !important; }

/* ---------- Buttons ---------- */
.s-button-primary, .s-button-element.s-button-primary, .btn--primary, .btn-primary,
salla-add-product-button button, .s-add-product-button-main, .s-product-card-content-footer .s-button-primary,
button.s-button-solid.s-button-primary {
  background-color: var(--bq-cyan) !important; border-color: var(--bq-cyan) !important;
  color: var(--bq-bg) !important; font-weight: 800 !important; border-radius: 12px !important;
  transition: box-shadow .2s, transform .2s, background-color .2s;
}
.s-button-primary:hover, salla-add-product-button button:hover, .btn--primary:hover {
  background-color: #34E0FF !important; box-shadow: 0 0 18px rgba(0,214,255,.45) !important;
}
.s-button-primary .s-button-text, salla-add-product-button button .s-button-text,
.s-button-primary i, salla-add-product-button button i { color: var(--bq-bg) !important; }
.s-button-outline, .s-button-light-outline, .s-button-primary-outline, .btn--outline {
  background: transparent !important; border-color: var(--bq-border-strong) !important; color: var(--bq-text) !important;
  border-radius: 12px !important;
}
.s-button-outline:hover, .s-button-light-outline:hover { border-color: var(--bq-cyan) !important; color: var(--bq-cyan) !important; }
.s-button-disabled, button[disabled].s-button-element { opacity: .55; }

/* ---------- Forms (cart, login, checkout-like pages stay readable) ---------- */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body select, body textarea, .form-input, .s-form-control, .s-verify-input, .s-quantity-input-input {
  background-color: #0D1A30 !important; color: var(--bq-text) !important;
  border-color: rgba(163,177,198,.28) !important; border-radius: 10px;
}
body input::placeholder, body textarea::placeholder { color: #7D8BA3 !important; opacity: 1; }
body input:focus, body select:focus, body textarea:focus { border-color: var(--bq-cyan) !important; box-shadow: 0 0 0 3px rgba(0,214,255,.18) !important; outline: none; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bq-cyan); }

/* ---------- Modals / popovers / toasts ---------- */
.s-modal-body, .s-modal-wrapper .s-modal-body, .s-modal-container, .s-login-modal, .s-modal-header,
.s-localization-modal, .s-offer-modal, .dropdown__menu, .s-user-menu-dropdown, .s-user-menu-dropdown-list,
.s-user-menu-dropdown-header, .swal2-popup, .s-cart-summary-wrapper .s-cart-summary-content {
  background-color: var(--bq-surface) !important; color: var(--bq-text) !important; border-color: var(--bq-border) !important;
}
.s-modal-title, .s-modal-sub-title, .swal2-title, .swal2-html-container, .s-user-menu-dropdown a { color: var(--bq-text) !important; }
.s-modal-overlay { background-color: rgba(1, 4, 10, .78) !important; }

/* ---------- Product cards (all listings) ---------- */
.s-product-card-entry, .s-product-card, custom-salla-product-card, .product-entry {
  background: linear-gradient(180deg, #0D1A30 0%, #0A1426 100%) !important;
  border: 1px solid var(--bq-border) !important;
  border-radius: var(--bq-radius) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: var(--bq-text) !important;
}
.s-product-card-entry:hover, .s-product-card:hover, custom-salla-product-card:hover {
  transform: translateY(-4px); box-shadow: var(--bq-glow) !important; border-color: var(--bq-cyan) !important;
}
.s-product-card-image, .s-product-card-image > a, .s-product-card-image > a > div { background: #08111F !important; }
.s-product-card-image img { transition: transform .4s ease; }
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.04); }
.s-product-card-content { padding: 12px 12px 14px !important; }
.s-product-card-content-title, .s-product-card-content-title a {
  color: var(--bq-text) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.55 !important;
}
.s-product-card-content-title a:hover { color: var(--bq-cyan) !important; }
.s-product-card-content-subtitle, .s-product-card-starting-price p { color: var(--bq-muted) !important; }
.s-product-card-price, .s-product-card-sale-price h4, .s-product-card-starting-price h4, .s-product-card-content-sub h4 { color: var(--bq-cyan) !important; font-weight: 800 !important; }
.s-product-card-sale-price span { color: #6F7E97 !important; }
.s-product-card-promotion-title {
  background: var(--bq-cyan) !important; color: var(--bq-bg) !important; font-weight: 800;
  border-radius: 8px !important;
}
.s-product-card-wishlist-btn { background: rgba(4,10,22,.7) !important; border-color: var(--bq-border) !important; color: #fff !important; }
.s-product-card-out-of-stock .s-product-card-image img { opacity: .55; }

/* ---------- Homepage blocks ---------- */
section.s-block { position: relative; }
#main-content > section.s-block, main > section.s-block { margin-top: 28px; }
@media (min-width: 768px) { #main-content > section.s-block, main > section.s-block { margin-top: 44px; } }

/* slider */
.s-block--photos-slider img, .s-block--photos-slider .s-photos-slider__slide,
.s-block--photos-slider .swiper-slide img, .home-slider img { border-radius: var(--bq-radius) !important; }
.s-block--photos-slider .s-photos-slider__slide { overflow: hidden; border: 1px solid var(--bq-border); }
.carousel-dots__dot, .swiper-pagination-bullet { background: rgba(255,255,255,.3) !important; opacity: 1 !important; }
.carousel-dots__dot.is-active, .swiper-pagination-bullet-active { background: var(--bq-cyan) !important; width: 22px !important; border-radius: 6px !important; }
.scroll-carousel__progress { background: rgba(255,255,255,.12) !important; }
.scroll-carousel__progress-thumb { background: var(--bq-cyan) !important; }
.scroll-carousel__nav button, .s-slider-nav-arrow, .swiper-button-next, .swiper-button-prev {
  background: var(--bq-surface) !important; border: 1px solid var(--bq-border) !important; color: #fff !important; border-radius: 50% !important;
}
.scroll-carousel__nav button:hover, .s-slider-nav-arrow:hover { border-color: var(--bq-cyan) !important; color: var(--bq-cyan) !important; }
.scroll-carousel__nav button svg, .scroll-carousel__nav button path { stroke: currentColor; }

/* wide banners (بانر عريض) */
.s-block--fixed-banner .banner, .s-block--fixed-banner a, .s-block--banners a.banner,
.banner--fixed {
  display: block; border-radius: var(--bq-radius) !important; overflow: hidden;
  border: 1px solid var(--bq-border);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.s-block--fixed-banner img, .banner--fixed img { display: block; width: 100%; border-radius: 0 !important; transition: transform .5s ease; }
.s-block--fixed-banner a:hover, .banner--fixed:hover, .s-block--banners a.banner:hover {
  transform: translateY(-3px); box-shadow: var(--bq-glow); border-color: var(--bq-cyan);
}
.s-block--fixed-banner a:hover img, .banner--fixed:hover img { transform: scale(1.015); }
.s-block--fixed-banner + .s-block--fixed-banner { margin-top: 36px !important; }
@media (min-width: 768px) { .s-block--fixed-banner + .s-block--fixed-banner { margin-top: 48px !important; } }

/* square banners / photos (if added later) */
.s-block--square-photos a, .s-block--enhanced-square-banners a, .s-block--square-photos img, .s-block--enhanced-square-banners img {
  border-radius: var(--bq-radius) !important; overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.s-block--square-photos a:hover, .s-block--enhanced-square-banners a:hover { transform: translateY(-3px) scale(1.01); box-shadow: var(--bq-glow); }

/* main-links / quick links (if ever enabled) */
.slide--cat-entry { background: var(--bq-surface) !important; border: 1px solid var(--bq-border); border-radius: var(--bq-radius) !important; color: #fff !important; }
.slide--cat-entry:hover { box-shadow: var(--bq-glow); }

/* ---------- 3. Section headers (native + JS-injected) ---------- */
.s-block__title, .s-products-carousel__head, .s-slider-block__title, .bq-sec-head {
  display: flex !important; align-items: center !important; justify-content: space-between; gap: 12px;
  margin-bottom: 16px !important; padding-bottom: 12px;
  border-bottom: 1px solid var(--bq-border);
  position: relative;
}
.s-block__title::after, .s-products-carousel__head::after, .bq-sec-head::after {
  content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; width: 72px; height: 2px;
  background: linear-gradient(90deg, var(--bq-cyan), transparent); border-radius: 2px;
}
html[dir="rtl"] .s-block__title::after, html[dir="rtl"] .s-products-carousel__head::after, html[dir="rtl"] .bq-sec-head::after {
  background: linear-gradient(270deg, var(--bq-cyan), transparent);
}
.s-block__title h2, .s-products-carousel__title, .s-slider-block__title h2, .bq-sec-head__title, .bq-title {
  display: inline-flex !important; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--bq-text) !important; font-weight: 900 !important; font-size: 20px !important; line-height: 1.3 !important; margin: 0 !important;
}
@media (min-width: 768px) {
  .s-block__title h2, .s-products-carousel__title, .s-slider-block__title h2, .bq-sec-head__title, .bq-title { font-size: 24px !important; }
}
.bq-title::before, .bq-sec-head__title::before {
  content: ""; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(0,214,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300D6FF' d='M13.5 2 4 13.6h6.2L9 22l10-12.2h-6.3L13.5 2z'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,214,255,.35);
}
.bq-en {
  display: inline-block; font-family: 'Cairo', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--bq-cyan); text-transform: uppercase; direction: ltr; line-height: 1;
  padding: 5px 8px; border-radius: 6px; background: rgba(0,214,255,.08); border: 1px solid rgba(0,214,255,.22);
}
.s-block__display-all, .bq-sec-head__all {
  display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--bq-cyan) !important; font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bq-border-strong);
  background: rgba(0,214,255,.06); transition: background .2s, box-shadow .2s;
}
.s-block__display-all:hover, .bq-sec-head__all:hover { background: rgba(0,214,255,.14); box-shadow: 0 0 14px rgba(0,214,255,.3); }
.s-block__display-all i, .bq-sec-head__all svg { color: var(--bq-cyan) !important; }
.bq-sec-head__all svg { width: 14px; height: 14px; flex: 0 0 14px; }
html[dir="ltr"] .bq-sec-head__all svg { transform: scaleX(-1); }
.bq-sec-head { margin-top: 0; flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; }
.bq-sec-head__title, .s-products-carousel__title, .s-block__title h2 { flex: 1 1 auto; min-width: 0; }
.bq-sec-head__all, .s-block__display-all { flex: 0 0 auto; }
@media (max-width: 767.98px) {
  .s-block__title h2, .s-products-carousel__title, .bq-sec-head__title, .bq-title { font-size: 18px !important; gap: 8px; row-gap: 6px; }
  .bq-en { font-size: 9.5px; padding: 4px 6px; letter-spacing: .1em; }
  .s-block__display-all, .bq-sec-head__all { font-size: 12px; padding: 6px 11px; }
}
.bq-sec-head.container, .s-block--fixed-banner .bq-sec-head { margin-bottom: 14px !important; }

/* ---------- store features (مميزات المتجر) ---------- */
.s-block--features__item, .s-block--store-features .s-block--features__item {
  background: linear-gradient(180deg, #0D1A30, #0A1426) !important; border: 1px solid var(--bq-border) !important;
  border-radius: var(--bq-radius) !important; padding: 22px 16px !important; text-align: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.s-block--features__item:hover { transform: translateY(-3px); box-shadow: var(--bq-glow); border-color: var(--bq-cyan) !important; }
.s-block--features__item .feature-icon {
  background: rgba(0,214,255,.1) !important; border: 1px solid rgba(0,214,255,.35) !important; border-radius: 14px !important;
  width: 56px !important; height: 56px !important; margin: 0 auto 12px !important; display: flex !important; align-items: center; justify-content: center;
}
.s-block--features__item .feature-icon i { color: var(--bq-cyan) !important; font-size: 24px !important; }
.s-block--features__item h2 { color: var(--bq-text) !important; font-weight: 800 !important; font-size: 16px !important; margin-bottom: 4px; }
.s-block--features__item p { color: var(--bq-muted) !important; font-size: 13px !important; }

/* testimonials (if enabled) */
.s-block--testimonials, .s-block--custom-testimonials, .s-block--full-bg { background: transparent !important; }
.s-testimonial-item, .testimonial-item, .s-block--testimonials .swiper-slide > div {
  background: var(--bq-surface) !important; border: 1px solid var(--bq-border) !important; border-radius: var(--bq-radius) !important; color: #fff !important;
}
.s-rating-stars-selected, .s-rating-stars-selected i, .sicon-star2 { color: #FFC83D !important; }

/* 4. empty 'منتجات على ذوقك' (JS adds the class only when it has no products) */
.bq-hidden-empty { display: none !important; }

/* ---------- Footer ---------- */
.store-footer, .store-footer__inner, .store-footer__bottom, footer.store-footer {
  background: linear-gradient(180deg, #050C1A 0%, #020610 100%) !important; color: var(--bq-muted) !important;
  border-color: var(--bq-border) !important;
}
.store-footer { border-top: 1px solid var(--bq-border); }
.store-footer h3, .store-footer b, .store-footer strong, .s-apps-icons h3 { color: var(--bq-text) !important; }
.store-footer a, .s-menu-footer-item, .s-contacts-item { color: var(--bq-muted) !important; }
.store-footer a:hover, .s-menu-footer-item:hover, .s-contacts-item:hover { color: var(--bq-cyan) !important; }
.s-contacts-icon, .s-social-link a, .s-social-icon {
  background: rgba(0,214,255,.08) !important; border: 1px solid var(--bq-border) !important; color: var(--bq-cyan) !important; border-radius: 10px !important;
}
.s-social-link a:hover { box-shadow: 0 0 14px rgba(0,214,255,.35); }
.s-payments-list-item { background: #fff !important; border-radius: 6px !important; }
.copyright-text { color: #7D8BA3 !important; }

/* ---------- Inner pages ---------- */
.breadcrumbs, .s-breadcrumb-wrapper, .s-breadcrumb-item, .s-breadcrumb-item a { color: var(--bq-muted) !important; }
.s-breadcrumb-item:last-child, .s-breadcrumb-item:last-child a { color: var(--bq-cyan) !important; }
.s-products-list-filters, .s-filters-wrapper, .s-filters-widget, .s-filters-widget-content, .filters-wrapper, .s-sort-wrapper {
  background: var(--bq-surface) !important; color: var(--bq-text) !important; border-color: var(--bq-border) !important; border-radius: var(--bq-radius-sm);
}
.s-filters-widget-title, .s-filters-label { color: #fff !important; }
.s-infinite-scroll-btn, .s-infinite-scroll-wrapper button { border-color: var(--bq-cyan) !important; color: var(--bq-cyan) !important; background: transparent !important; border-radius: 999px !important; }
.main-content, .product-single, .product__description, .product-details, .s-product-options-wrapper,
.cart-item, .cart-summary, .s-cart-item, .s-product-options-option-container {
  color: var(--bq-text);
}
.cart-item, .s-cart-item, #cart-submit-wrap, .cart-summary, .product-single .bg-white, .product-form, .product-details .card {
  background-color: var(--bq-surface) !important; border-color: var(--bq-border) !important; border-radius: var(--bq-radius) !important;
}
.prose, .prose p, .prose li, .article-content, .page-content { color: #C9D3E2 !important; }
.prose h1, .prose h2, .prose h3, .prose strong { color: #fff !important; }
.prose a { color: var(--bq-cyan) !important; }
.s-comments, .s-comment-item, .s-reviews-item { background: var(--bq-surface) !important; color: #fff !important; border-color: var(--bq-border) !important; }
.s-skeleton-wrapper, .s-skeleton-item, salla-skeleton > div { background-color: #0F1D33 !important; }
.s-placeholder, .s-placeholder-wrapper { color: var(--bq-muted) !important; }

/* =====================================================================
   2. Sticky shortcut bar (built by JS)
   ===================================================================== */
.bq-shortcuts {
  position: sticky; top: var(--bq-top); z-index: 28;
  background: rgba(4, 10, 22, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bq-border);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: top .2s ease;
}
.bq-shortcuts__inner {
  display: flex; gap: 8px; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 10px 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  -ms-overflow-style: none; scrollbar-width: none;
}
.bq-shortcuts__inner::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .bq-shortcuts__inner { justify-content: center; gap: 10px; padding: 12px 16px; } }
.bq-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: #0B1629; border: 1px solid rgba(163,177,198,.18);
  color: #DCE5F2 !important; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  text-decoration: none !important; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
@media (min-width: 1024px) { .bq-chip { font-size: 14px; padding: 9px 18px; } }
.bq-chip svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--bq-cyan); }
.bq-chip:hover { border-color: var(--bq-cyan); color: #fff !important; box-shadow: 0 0 12px rgba(0,214,255,.25); }
.bq-chip.is-active {
  background: var(--bq-cyan); border-color: var(--bq-cyan); color: var(--bq-bg) !important;
  box-shadow: 0 0 18px rgba(0,214,255,.45);
}
.bq-chip.is-active svg { color: var(--bq-bg); }
.bq-chip:focus-visible { outline: 2px solid var(--bq-cyan); outline-offset: 2px; }
[data-bq-key] { scroll-margin-top: calc(var(--bq-top) + 70px); }

/* =====================================================================
   5. Mobile bottom tab bar (built by JS)
   ===================================================================== */
.bq-tabbar { display: none; }
@media (max-width: 1023.98px) {
  .bq-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    height: calc(var(--bq-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(5, 12, 26, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--bq-border);
    box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  }
  body.bq-has-tabbar { padding-bottom: calc(var(--bq-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; }
  /* lift floating widgets (WhatsApp / chat / back-to-top) above the tab bar */
  body.bq-has-tabbar .whatsapp-button, body.bq-has-tabbar [class*="whatsapp-float"], body.bq-has-tabbar .s-scroll-top,
  body.bq-has-tabbar #back-to-top, body.bq-has-tabbar .scroll-to-top { bottom: calc(var(--bq-tabbar-h) + 14px) !important; }
}
.bq-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #93A3BB !important; font-size: 11px; font-weight: 700; text-decoration: none !important;
  background: none; border: 0; cursor: pointer; font-family: 'Cairo', sans-serif; -webkit-tap-highlight-color: transparent;
}
.bq-tab svg { width: 23px; height: 23px; }
.bq-tab.is-active { color: var(--bq-cyan) !important; }
.bq-tab.is-active::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--bq-cyan);
  box-shadow: 0 0 10px var(--bq-cyan);
}
.bq-tab__badge {
  position: absolute; top: 8px; inset-inline-start: calc(50% + 6px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--bq-cyan); color: var(--bq-bg); font-size: 10px; font-weight: 900; line-height: 17px; text-align: center;
}
.bq-tab__badge:empty, .bq-tab__badge[data-count="0"] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, .bq-chip, .s-product-card-entry { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 5b. Native Raed mobile bottom bar (new Raed ships one) ---------- */
.mobile-bottom-bar {
  background: rgba(5, 12, 26, .96) !important; border-top: 1px solid var(--bq-border) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -10px 30px rgba(0,0,0,.45) !important;
}
.mobile-bottom-bar__inner { background: transparent !important; }
.mobile-bottom-bar__item { color: #93A3BB !important; position: relative; }
.mobile-bottom-bar__item svg { color: currentColor; }
.mobile-bottom-bar__label { font-family: 'Cairo', sans-serif !important; font-weight: 700 !important; }
.mobile-bottom-bar__item.is-active, .mobile-bottom-bar__item.active {
  /* Raed shows the active tab as a pill (icon + label); make it a cyan pill with navy content */
  background: var(--bq-cyan) !important; color: var(--bq-bg) !important;
  box-shadow: 0 0 18px rgba(0, 214, 255, .45);
}
.mobile-bottom-bar__item.is-active *, .mobile-bottom-bar__item.active * { color: var(--bq-bg) !important; }
.mobile-bottom-bar__item[aria-expanded="true"]:not(.is-active) { color: var(--bq-cyan) !important; }
/* rename "القائمة الرئيسية" tab to "التصنيفات" without touching the theme's markup */
[data-testid="mobile-bottom-bar-categories"] .mobile-bottom-bar__label { font-size: 0 !important; }
[data-testid="mobile-bottom-bar-categories"] .mobile-bottom-bar__label::after { content: "التصنيفات"; font-size: 11px; }
.mobile-bottom-bar [class*="badge"], .mobile-bottom-bar [class*="count"] { background: var(--bq-cyan) !important; color: var(--bq-bg) !important; }
.mobile-bottom-bar-scrim { background: rgba(1,4,10,.6) !important; }
@media (max-width: 1023.98px) {
  body.bq-native-tabbar .store-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 6. Inner-page extras (category toolbar, mobile page title, reviews) ---------- */
/* on inner pages the chips are plain links and do not stick (the theme's catalog toolbar sticks there) */
.bq-shortcuts.bq-shortcuts--static { position: relative; top: auto; box-shadow: none; }
.mobile-page-title, .s-catalog-toolbar-sticky, .s-catalog-toolbar {
  background: var(--bq-bg) !important; color: var(--bq-text) !important; border-color: var(--bq-border) !important;
}
.mobile-page-title { border-bottom: 1px solid var(--bq-border); }
.mobile-page-title *, .s-catalog-toolbar * { color: inherit; }
.s-catalog-toolbar select, .s-catalog-toolbar button { background: transparent !important; color: var(--bq-text) !important; }
.s-catalog-toolbar [class*="active"], .s-catalog-toolbar button[aria-pressed="true"] { background: rgba(0,214,255,.14) !important; color: var(--bq-cyan) !important; }
.s-reviews-testimonial {
  background: var(--bq-surface) !important; color: var(--bq-text) !important;
  border: 1px solid var(--bq-border); border-radius: var(--bq-radius) !important;
}
.s-reviews-testimonial * { color: inherit; }
.s-skeleton-pulse { background: #13223A !important; }
/* add-to-cart labels on 2-column mobile grids: smaller so they are not truncated */
@media (max-width: 480px) {
  .s-product-card-entry salla-add-product-button button, .s-product-card-entry .s-button-element {
    font-size: 12.5px !important; padding-inline: 8px !important; white-space: nowrap;
  }
}