/**
 * ==========================================================================
 * كود CSS المخصص للوحة تحكم سلة - متجر أوفر نايس (Over Nice)
 * الصق هذا الكود بالكامل داخل:
 * [ لوحة تحكم سلة > حزمة التخصيص المتقدمة > قم بالتخصيص باستخدام CSS ]
 * ==========================================================================
 */

/* 1. استيراد خط DIN Arabic الأصلي بكافة أوزانه */
@import url('https://fonts.cdnfonts.com/css/din-next-lt-arabic');

/* 2. المتغيرات العامة وتوحيد الهوية لمتجر سلة */
:root {
  --font-main: 'DIN Next LT Arabic', 'DIN Next LT', 'DIN Arabic', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-secondary: 'DIN Next LT Arabic', 'DIN Next LT', 'DIN Arabic', -apple-system, BlinkMacSystemFont, sans-serif !important;

  --color-primary: #C5A059 !important;
  --color-primary-dark: #9A762E !important;
  --color-primary-light: #DFBE7D !important;
  --color-primary-reverse: #ffffff !important;

  /* هوية أوفر نايس الفاخرة */
  --gold: #C5A059;
  --gold-light: #DFBE7D;
  --gold-dark: #9A762E;
  --gold-deep: #7D5E1F;

  /* لوحة أوفر نايس الموحدة - شامبين/ذهبي */
  --on-surface-start: #F8FCFF;
  --on-surface-end: #F8FCFF;
  --on-surface-border: #E4EBF3;
  --on-action: #343A40;
  --on-action-hover: #23272B;
  --on-action-shadow: rgba(52, 58, 64, 0.24);

  --rose: #d74473;
  --berry: #a43b80;

  --ink: #1a1a1a;
  --ink-soft: #2d3748;
  --muted: #718096;
  --line: #edf2f7;
  --bg-soft: #fbfbfb;
  --white: #ffffff;

  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 50px rgba(154, 118, 46, 0.12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. تطبيق الخط وضبط الهيكل العام */
*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, span, strong, em, small, div,
.s-product-card, .s-product-card-vertical, .main-menu, .store-header, .store-footer, .font-primary, .font-regular {
  font-family: var(--font-main) !important;
}

body {
  overflow-x: hidden !important;
  background-color: #fdfdfd !important;
  color: var(--ink) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. إخفاء جميع البنرات والاقسام العشوائية والقديمة في سلة */
.s-block--hero-slider,
.home-slider:not(.on-hero-box),
.s-block--banners,
.s-block--fixed-banner,
.s-block--best-offers,
.s-block-banners,
.s-block-slider,
.square-grid,
.banner--fixed,
.angel-ad,
.angel-banner,
.banners-slider,
.banner-entry,
.s-block--features,
.s-block--special-products {
  display: none !important;
}

/* 5. الشريط الإخباري الذهبي المتحرك المستمر (Announcement Marquee) */
.on-announcement-marquee {
  background: #1a1a1a !important;
  border-bottom: 1px solid #2d2d2d !important;
  height: 38px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 999 !important;
  width: 100% !important;
}

.on-marquee-track {
  display: flex !important;
  width: max-content !important;
  animation: on-marquee-anim 26s linear infinite !important;
}

.on-marquee-track:hover {
  animation-play-state: paused !important;
}

.on-marquee-content {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  padding-left: 28px !important;
  white-space: nowrap !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.on-marquee-content i {
  color: var(--gold) !important;
  font-style: normal !important;
  font-size: 13px !important;
}

@keyframes on-marquee-anim {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* 6. السلايدر الرئيسي الفاخر لهوية أوفر نايس (Hero Slider) */
.on-hero-slider-section {
  max-width: 1280px !important;
  margin: 16px auto 0 !important;
  padding: 0 14px !important;
  position: relative !important;
  display: block !important;
  z-index: 10 !important;
  width: 100% !important;
}

.on-hero-box {
  background: linear-gradient(135deg, #ffffff 0%, #fdfaf3 50%, #f7ecd5 100%) !important;
  border: 1px solid #ebd9bb !important;
  border-radius: 28px !important;
  padding: 40px 48px !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 36px !important;
  align-items: center !important;
  min-height: 420px !important;
  box-shadow: var(--shadow-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}

.on-hero-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  z-index: 2 !important;
}

.on-hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--gold-dark) !important;
  margin-bottom: 8px !important;
}

.on-hero-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
}

.on-hero-title span.accent {
  color: var(--gold-dark) !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  margin-top: 7px !important;
}

.on-hero-desc {
  font-size: 15px !important;
  color: var(--muted) !important;
  line-height: 1.75 !important;
  max-width: 480px !important;
  margin: 0 0 22px !important;
}

.on-hero-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-deep) 100%) !important;
  color: #ffffff !important;
  padding: 13px 28px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(154, 118, 46, 0.3) !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}

.on-hero-btn:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.on-hero-dots {
  display: flex !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

.on-hero-dots button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(154, 118, 46, 0.25) !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  padding: 0 !important;
}

.on-hero-dots button.active {
  width: 28px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--gold-dark) !important;
}

.on-hero-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  height: 320px !important;
}

.on-hero-img-wrap {
  width: 100% !important;
  height: 100% !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

.on-hero-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: opacity 0.3s ease !important;
}

/* 7. شريط المزايا الأنيق المتناسق (Trust Bar) */
.on-trust-bar {
  max-width: 1280px !important;
  margin: 18px auto 0 !important;
  padding: 16px 24px !important;
  background: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
}

.on-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.on-trust-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #fdfaf3 !important;
  color: var(--gold-dark) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  transition: var(--transition) !important;
  border: 1px solid #f3e6cf !important;
}

.on-trust-text b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
}

.on-trust-text small {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  line-height: 1.3 !important;
}

/* 8. شريط الأقسام المصورة الدائري */
.on-circular-cats-section {
  padding: 35px 14px 10px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.on-section-head {
  text-align: center !important;
  margin-bottom: 22px !important;
}

.on-eyebrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--gold-dark) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 4px !important;
}

.on-section-head h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.on-circular-cats-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.on-cat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  color: var(--ink) !important;
}

.on-cat-item:hover {
  transform: translateY(-5px) !important;
}

.on-cat-thumb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #ecdcc3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(154, 118, 46, 0.08) !important;
  transition: var(--transition) !important;
  padding: 8px !important;
}

.on-cat-item:hover .on-cat-thumb {
  border-color: var(--gold) !important;
  box-shadow: 0 12px 26px rgba(197, 160, 89, 0.3) !important;
  transform: scale(1.06) !important;
}

.on-cat-icon {
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold-dark) !important;
}

.on-cat-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.on-cat-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

.on-cat-item span {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  transition: var(--transition) !important;
  text-align: center !important;
}

.on-cat-item:hover span {
  color: var(--gold-dark) !important;
}

/* 9. الحاويات الإبداعية لمتجر أوفر نايس (عطور، تجميل، باكيجات، الأكثر رواجاً) */
.on-themed-section {
  max-width: 1280px !important;
  margin: 36px auto 0 !important;
  padding: 0 14px !important;
  width: 100% !important;
}

.on-themed-container {
  border-radius: 28px !important;
  padding: 34px !important;
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 28px !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
}

/* الحاويات الأربع بهوية لونية موحدة لأوفر نايس */
.on-themed-container.perfumes-theme,
.on-themed-container.makeup-theme,
.on-themed-container.packages-theme,
.on-themed-container.trending-theme {
  background: linear-gradient(135deg, var(--on-surface-start) 0%, var(--on-surface-end) 100%) !important;
  border: 1px solid var(--on-surface-border) !important;
  box-shadow: 0 10px 30px rgba(125, 94, 31, 0.07) !important;
}

.on-themed-side-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding-left: 10px !important;
  width: 100% !important;
}

.on-themed-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 6px 15px !important;
  border-radius: var(--radius-pill) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.perfumes-theme .on-themed-badge,
.makeup-theme .on-themed-badge,
.packages-theme .on-themed-badge,
.trending-theme .on-themed-badge {
  color: var(--on-action) !important;
  border: 1px solid rgba(154, 118, 46, 0.12) !important;
}

.on-themed-side-panel h2 {
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}

.on-themed-side-panel p {
  color: var(--muted) !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.on-themed-view-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}

.perfumes-theme .on-themed-view-all-btn,
.makeup-theme .on-themed-view-all-btn,
.packages-theme .on-themed-view-all-btn,
.trending-theme .on-themed-view-all-btn {
  background: var(--on-action) !important;
  box-shadow: 0 8px 24px var(--on-action-shadow) !important;
}

.perfumes-theme .on-themed-view-all-btn:hover,
.makeup-theme .on-themed-view-all-btn:hover,
.packages-theme .on-themed-view-all-btn:hover,
.trending-theme .on-themed-view-all-btn:hover {
  background: var(--on-action-hover) !important;
  transform: translateY(-2px) !important;
}

.on-themed-cards-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}

.on-themed-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
  transition: var(--transition) !important;
  position: relative !important;
  text-decoration: none !important;
}

.on-themed-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}

.on-card-media {
  height: 190px !important;
  position: relative !important;
  background: #fafafa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

.on-card-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: var(--transition) !important;
}

.on-themed-card:hover .on-card-media img {
  transform: scale(1.06) !important;
}

.on-card-tag {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-pill) !important;
  z-index: 2 !important;
}

.perfumes-theme .on-card-tag,
.makeup-theme .on-card-tag,
.packages-theme .on-card-tag,
.trending-theme .on-card-tag {
  background: var(--on-action) !important;
}

.on-card-body {
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

.on-card-brand {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--gold-dark) !important;
}

.on-card-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  height: 40px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.on-card-rating {
  font-size: 11.5px !important;
  color: #f59e0b !important;
}

.on-card-bottom-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--line) !important;
}

.on-card-prices strong {
  font-size: 15.5px !important;
  font-weight: 900 !important;
  color: var(--ink) !important;
}

.on-card-prices small {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  text-decoration: line-through !important;
  margin-right: 4px !important;
}

.on-card-add-btn {
  background: var(--gold-dark) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  height: 34px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}

.on-card-add-btn:hover {
  background: var(--gold-deep) !important;
}

/* 10. بطاقة عروض اليوم الوطني السعودي الملكية بخلفية موشن متحركة */
.on-saudi-national-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  padding: 38px 48px !important;
  display: grid !important;
  grid-template-columns: 1.2fr 0.8fr !important;
  gap: 28px !important;
  align-items: center !important;
  color: #ffffff !important;
  border: 1.5px solid #00a859 !important;
  box-shadow: 0 20px 50px rgba(0, 80, 40, 0.25), 0 0 30px rgba(197, 160, 89, 0.2) !important;
  background: linear-gradient(125deg, #0b3d20 0%, #062814 35%, #0d4a27 70%, #071f11 100%) !important;
  background-size: 300% 300% !important;
  animation: saudiMotionBg 10s ease infinite !important;
}

@keyframes saudiMotionBg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* تأثيرات الضوء والموجات الموشن المتحركة */
.on-saudi-national-card::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(0, 230, 118, 0.15) 0%, rgba(197, 160, 89, 0.1) 40%, transparent 70%) !important;
  animation: saudiWaveMotion 8s linear infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@keyframes saudiWaveMotion {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.on-saudi-card-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.on-saudi-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) !important;
  color: #c8ffd4 !important;
  border: 1px solid rgba(0, 230, 118, 0.4) !important;
  padding: 6px 16px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.on-saudi-card-content h3 {
  font-size: 32px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.on-saudi-card-content h3 span {
  color: #DFBE7D !important;
  text-shadow: 0 0 16px rgba(223, 190, 125, 0.5) !important;
}

.on-saudi-card-content p {
  color: #e0f2e5 !important;
  font-size: 14.5px !important;
  margin: 0 !important;
  max-width: 520px !important;
  line-height: 1.7 !important;
}

.on-saudi-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #DFBE7D 0%, #C5A059 100%) !important;
  color: #062814 !important;
  padding: 12px 28px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 20px rgba(223, 190, 125, 0.4) !important;
  margin-top: 6px !important;
}

.on-saudi-btn:hover {
  background: #ffffff !important;
  color: #007a3d !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0, 230, 118, 0.4) !important;
}

.on-saudi-visual-panel {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.on-saudi-visual-box {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px dashed rgba(223, 190, 125, 0.4) !important;
  border-radius: 24px !important;
  padding: 24px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  backdrop-filter: blur(8px) !important;
  text-align: center !important;
}

.on-saudi-flag-symbol {
  font-size: 56px !important;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)) !important;
  animation: saudiPulse 2.5s ease-in-out infinite !important;
}

@keyframes saudiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.on-saudi-visual-box b {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.on-saudi-visual-box small {
  font-size: 12.5px !important;
  color: #DFBE7D !important;
  font-weight: 700 !important;
}

/* 11. القائمة الجانبية المنظمة بذكاء للأقسام والبراندات (Side Navigation Drawer) */
.on-side-menu-header {
  padding: 16px 20px !important;
  background: #fdfaf3 !important;
  border-bottom: 1px solid #ebd9bb !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--gold-dark) !important;
}

.on-nav-accordion {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 0 !important;
}

.on-nav-accordion-item {
  border-bottom: 1px solid #f0f2f5 !important;
}

.on-nav-accordion-title {
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}

.on-nav-accordion-title:hover {
  background: #fafafa !important;
  color: var(--gold-dark) !important;
}

.on-nav-sub-list {
  display: flex !important;
  flex-direction: column !important;
  background: #fcfcfc !important;
  padding: 6px 24px 14px !important;
  gap: 8px !important;
}

.on-nav-sub-list a {
  font-size: 13px !important;
  color: #4a5568 !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  transition: var(--transition) !important;
}

.on-nav-sub-list a:hover {
  color: var(--gold-dark) !important;
  padding-right: 4px !important;
}

/* 12. التجاوب الكامل للجوال والشاشات الذكية (Mobile Responsive) */
@media (max-width: 1024px) {
  .on-hero-box {
    grid-template-columns: 1fr !important;
    padding: 30px 20px !important;
    text-align: center !important;
  }
  .on-hero-copy { align-items: center !important; }
  .on-hero-title { font-size: 30px !important; }
  .on-hero-dots { justify-content: center !important; }
  .on-trust-bar { grid-template-columns: repeat(2, 1fr) !important; }
  .on-themed-container { grid-template-columns: 1fr !important; }
  .on-themed-side-panel { align-items: center !important; text-align: center !important; }
  .on-saudi-national-card { grid-template-columns: 1fr !important; padding: 28px 20px !important; text-align: center !important; }
  .on-saudi-card-content { align-items: center !important; text-align: center !important; }
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  .on-hero-slider-section { padding: 0 10px !important; margin-top: 10px !important; }
  .on-hero-box { padding: 22px 14px !important; border-radius: 20px !important; min-height: auto !important; }
  .on-hero-title { font-size: 22px !important; line-height: 1.35 !important; text-align: center !important; }
  .on-hero-title span.accent { font-size: 14px !important; line-height: 1.55 !important; margin-top: 6px !important; }
  .on-hero-desc { font-size: 13px !important; text-align: center !important; }
  .on-hero-visual { height: 180px !important; }
  .on-hero-btn { padding: 10px 22px !important; font-size: 13px !important; }

  .on-trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
  }
  .on-trust-item { gap: 8px !important; }
  .on-trust-icon { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .on-trust-text b { font-size: 11.5px !important; }
  .on-trust-text small { font-size: 9.5px !important; }

  .on-circular-cats-section { padding: 24px 8px 8px !important; }
  .on-section-head h2 { font-size: 20px !important; }
  .on-circular-cats-wrapper {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding: 6px 4px 14px !important;
    gap: 14px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .on-circular-cats-wrapper::-webkit-scrollbar { display: none !important; }
  .on-cat-item { flex: 0 0 auto !important; scroll-snap-align: center !important; }
  .on-cat-thumb { width: 72px !important; height: 72px !important; padding: 5px !important; }
  .on-cat-icon { width: 34px !important; height: 34px !important; }
  .on-cat-item span { font-size: 11.5px !important; white-space: nowrap !important; }

  .on-themed-section { margin-top: 24px !important; padding: 0 10px !important; }
  .on-themed-container { padding: 20px 14px !important; border-radius: 20px !important; grid-template-columns: 1fr !important; }
  .on-themed-side-panel { align-items: center !important; text-align: center !important; padding-left: 0 !important; }
  .on-themed-side-panel h2 { font-size: 22px !important; text-align: center !important; }
  .on-themed-side-panel p { font-size: 12.5px !important; text-align: center !important; }
  .on-themed-view-all-btn { width: 100% !important; justify-content: center !important; padding: 10px 18px !important; }

  .on-themed-cards-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .on-themed-cards-row::-webkit-scrollbar { display: none !important; }
  .on-themed-card { flex: 0 0 220px !important; min-width: 220px !important; scroll-snap-align: center !important; }
  .on-card-media { height: 155px !important; padding: 10px !important; }
  .on-card-body { padding: 12px !important; }

  .on-saudi-national-card {
    padding: 24px 16px !important;
    border-radius: 20px !important;
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .on-saudi-card-content h3 { font-size: 22px !important; }
  .on-saudi-card-content p { font-size: 13px !important; }
}

/* تثبيت خط DIN Next LT Arabic على عناصر سلة النصية في الكمبيوتر والجوال */
salla-product-card,
salla-add-product-button,
salla-button,
salla-search,
salla-modal,
salla-slider,
salla-user-menu,
salla-cart-summary,
salla-quick-buy,
salla-rating-stars {
  font-family: var(--font-main) !important;
  --font-main: 'DIN Next LT Arabic', 'DIN Next LT', 'DIN Arabic', -apple-system, BlinkMacSystemFont, sans-serif !important;
  --font-secondary: 'DIN Next LT Arabic', 'DIN Next LT', 'DIN Arabic', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

@media (max-width: 1024px) {
  html, body,
  h1, h2, h3, h4, h5, h6,
  p, a, button, input, select, textarea, option, label,
  span, strong, em, small, b, li, th, td,
  .s-product-card, .s-product-card-vertical,
  .main-menu, .store-header, .store-footer,
  .font-primary, .font-regular {
    font-family: var(--font-main) !important;
  }
}



/* ========================================================================== */
/* الأقسام الرئيسية من الثيم القديم — نفس الصور والروابط، عرض دائري متوسط ومتحرك */
/* ========================================================================== */
.on-circular-cats-section.on-legacy-main-categories {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 22px auto 0 !important;
  padding: 0 14px !important;
}

.on-legacy-cats-scroll {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: transparent !important;
}

.on-legacy-cats-stage {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: auto !important;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
}

/* الصورة الأصلية تبقى هي المصدر الوحيد، ولا يتم تغيير رابطها. */
.on-legacy-cats-image {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.on-legacy-cats-links {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 12px 10px 16px !important;
  direction: ltr !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.on-legacy-cats-links::-webkit-scrollbar { display: none !important; }

.on-legacy-cat-hit {
  flex: 0 0 136px !important;
  width: 136px !important;
  height: 136px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  scroll-snap-align: center !important;
  text-decoration: none !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  border: 1px solid #eadcc4 !important;
  outline: none !important;
  position: relative !important;
  box-shadow: 0 7px 20px rgba(41,31,18,.07) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.on-legacy-cat-hit::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.52) !important;
  pointer-events: none !important;
}

.on-legacy-cat-hit:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 12px 28px rgba(41,31,18,.11) !important;
  border-color: var(--gold) !important;
}

/* ========================================================================== */
/* القائمة الرئيسية: نفس أقسام وروابط الثيم القديم بتصميم أوفر نايس الجديد */
/* ========================================================================== */
.on-side-menu-shell {
  font-family: var(--font-main) !important;
  background: #fff !important;
  min-height: 100% !important;
  color: var(--ink) !important;
}
.on-side-menu-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 18px !important;
  background: linear-gradient(135deg,#fffaf0 0%,#fff 55%,#fdf5f8 100%) !important;
  border-bottom: 1px solid #eee4d6 !important;
  color: var(--ink) !important;
}
.on-side-menu-header .on-side-menu-mark {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--gold-dark) !important;
  background: #fff !important;
  border: 1px solid #ead8ba !important;
  box-shadow: 0 6px 18px rgba(154,118,46,.10) !important;
}
.on-side-menu-header .on-side-menu-mark svg { width: 23px !important; height: 23px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.7 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.on-side-menu-header b { display:block !important; font-size:15px !important; font-weight:900 !important; }
.on-side-menu-header small { display:block !important; margin-top:2px !important; font-size:11px !important; color:#8b7d6d !important; font-weight:600 !important; }

.on-nav-accordion {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 10px 18px !important;
  gap: 4px !important;
}

.on-nav-direct,
.on-nav-details > summary {
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 38px 1fr 24px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 13px !important;
  color: #252525 !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: background .22s ease, color .22s ease, transform .22s ease !important;
  list-style: none !important;
}
.on-nav-details > summary::-webkit-details-marker,
.on-nav-nested > summary::-webkit-details-marker { display:none !important; }
.on-nav-direct:hover,
.on-nav-details > summary:hover,
.on-nav-details[open] > summary {
  background: #fbf7ef !important;
  color: var(--gold-dark) !important;
}
.on-nav-direct:hover { transform: translateX(-2px) !important; }
.on-nav-direct.offer { background: linear-gradient(135deg,#fff2ee,#fff9f1) !important; color:#b95d43 !important; }
.on-nav-direct.highlight { background: linear-gradient(135deg,#fffaf0,#fff) !important; }
.on-nav-direct > i,
.on-nav-details > summary > i { font-style:normal !important; text-align:left !important; font-size:18px !important; color:#a19078 !important; transition:transform .22s ease !important; }
.on-nav-details[open] > summary > i { transform: rotate(180deg) !important; }

.on-menu-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  display:grid !important;
  place-items:center !important;
  color: var(--gold-dark) !important;
  background: linear-gradient(145deg,#fff,#fbf4e7) !important;
  border:1px solid #f0e2ca !important;
}
.on-menu-icon svg {
  width: 19px !important;
  height: 19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.65 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.on-nav-sub-list {
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  margin: 2px 38px 7px 6px !important;
  padding: 7px 10px !important;
  border-right: 1px solid #eadfcf !important;
  border-radius: 0 0 0 12px !important;
  background: #fffdf9 !important;
}
.on-nav-sub-list > a,
.on-nav-nested > div > a {
  display:block !important;
  padding:7px 9px !important;
  border-radius:9px !important;
  color:#555 !important;
  text-decoration:none !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  transition:background .2s ease,color .2s ease,padding .2s ease !important;
}
.on-nav-sub-list > a:hover,
.on-nav-nested > div > a:hover { background:#fff !important; color:var(--gold-dark) !important; padding-right:13px !important; }
.on-nav-sub-list a.view-all { color:var(--gold-dark) !important; font-weight:850 !important; }

.on-nav-nested {
  border-top:1px dashed #eee3d3 !important;
  padding-top:2px !important;
}
.on-nav-nested > summary {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:8px 9px !important;
  border-radius:9px !important;
  cursor:pointer !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  color:#3c3c3c !important;
  list-style:none !important;
}
.on-nav-nested > summary:hover,
.on-nav-nested[open] > summary { background:#fff !important; color:var(--gold-dark) !important; }
.on-nav-nested > summary i { font-style:normal !important; transition:transform .2s ease !important; }
.on-nav-nested[open] > summary i { transform:rotate(180deg) !important; }
.on-nav-nested > div { padding:0 8px 5px 0 !important; }
.on-nav-details.useful-links { margin-top:6px !important; border-top:1px solid #eee5d8 !important; padding-top:6px !important; }

@media (max-width: 767px) {
  .on-circular-cats-section.on-legacy-main-categories { margin-top:18px !important; padding:0 8px !important; }
  .on-legacy-cats-stage { min-width: 0 !important; }
  .on-legacy-cats-scroll { max-width:100% !important; border-radius:14px !important; }
  .on-legacy-cats-links { gap:10px !important; padding:10px 8px 14px !important; }
  .on-legacy-cat-hit { flex-basis:102px !important; width:102px !important; height:102px !important; }
  .on-nav-accordion { padding-left:8px !important; padding-right:8px !important; }
  .on-nav-direct, .on-nav-details > summary { min-height:46px !important; font-size:13px !important; }
}


/* ========================================================================== */
/* إصلاح ظهور الهيدر أثناء التمرير فوق السلايدر الرئيسي — بدون تغيير التصميم */
/* ========================================================================== */
.store-header,
#mainnav,
.main-nav-container,
.main-nav-container.fixed-header,
.main-nav-container.fixed-pinned,
header.store-header {
  z-index: 1200 !important;
  isolation: isolate !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.store-header,
#mainnav,
header.store-header {
  overflow: visible !important;
}

/* السلايدر يبقى تحت طبقة الهيدر أثناء التمرير ولا يقطع أجزاء الهيدر */
.on-hero-slider-section,
.on-hero-box {
  z-index: 1 !important;
}

/* عند تفعيل حالة الهيدر المثبتة من سلة نعطيها طبقة مستقرة فوق المحتوى */
.fixed-header,
.fixed-pinned,
.is-sticky,
.sticky-header {
  z-index: 1250 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}


/* ========================================================================== */
/* تحديث فني للقائمة فقط: زر رجوع + ترتيب الأقسام المطلوبة */
/* ========================================================================== */
.on-side-menu-header .on-side-menu-back {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.on-side-menu-header .on-side-menu-back:hover {
  transform: translateX(2px) !important;
  background: #fffaf0 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 8px 20px rgba(154,118,46,.14) !important;
}
.on-side-menu-header .on-side-menu-back:active {
  transform: translateX(4px) scale(.97) !important;
}
.on-side-menu-header .on-side-menu-back svg {
  width: 22px !important;
  height: 22px !important;
}
.on-nav-accordion > .on-nav-direct,
.on-nav-accordion > .on-nav-details {
  border-bottom: 1px solid rgba(234,223,207,.55) !important;
  padding-bottom: 3px !important;
}
.on-nav-accordion > .on-nav-direct:last-child,
.on-nav-accordion > .on-nav-details:last-child {
  border-bottom: 0 !important;
}

/* ========================================================================== */
/* تحسين أسهم القائمة فقط — بدون أي تغيير في بقية الثيم */
/* ========================================================================== */

/* إخفاء سهم/عنوان Mmenu الافتراضي الذي كان يظهر فوق زر الرجوع المخصص */
#mobile-menu.mm-spn.mm-spn--navbar::before,
#mobile-menu.mm-spn.mm-spn--navbar::after,
.main-menu-drawer.mm-spn.mm-spn--navbar::before,
.main-menu-drawer.mm-spn.mm-spn--navbar::after {
  content: none !important;
  display: none !important;
}

/* منع أي pseudo-element موروث من الثيم من الظهور فوق زر الرجوع */
.on-side-menu-back::before,
.on-side-menu-back::after {
  content: none !important;
  display: none !important;
}

/* زر الرجوع العربي: السهم يتجه لليمين ويظل في المنتصف تماماً */
.on-side-menu-header .on-side-menu-back {
  position: relative !important;
  overflow: hidden !important;
}
.on-side-menu-header .on-side-menu-back svg {
  transform: none !important;
  pointer-events: none !important;
}

/* سهم الأقسام القابلة للفتح — كبسولة صغيرة أنيقة وواضحة */
.on-nav-details > summary > .on-nav-chevron {
  width: 27px !important;
  height: 27px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  font-style: normal !important;
  color: #9a762e !important;
  background: linear-gradient(145deg, #fffdf8, #faf2e3) !important;
  border: 1px solid #ead9bc !important;
  box-shadow: 0 3px 10px rgba(154,118,46,.08) !important;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.on-nav-details > summary > .on-nav-chevron svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.on-nav-details > summary:hover > .on-nav-chevron,
.on-nav-details[open] > summary > .on-nav-chevron {
  background: #fff !important;
  border-color: #d8bc86 !important;
  box-shadow: 0 5px 14px rgba(154,118,46,.13) !important;
}
.on-nav-details[open] > summary > .on-nav-chevron {
  transform: rotate(180deg) !important;
}

/* إلغاء تدوير القاعدة القديمة للنص i حتى لا تتعارض مع السهم الجديد */
.on-nav-details[open] > summary > i.on-nav-chevron {
  transform: rotate(180deg) !important;
}


/* ربط أنميشن نصوص مكوّن سلة بسلايدر أوفر نايس — بدون تغيير التصميم */
.on-hero-title.animate__animated,.on-hero-desc.animate__animated{animation-duration:.72s!important;animation-fill-mode:both!important;}
@keyframes onHeroFadeInUpFallback{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.on-hero-title.animate__fadeInUp,.on-hero-desc.animate__fadeInUp{animation-name:onHeroFadeInUpFallback!important;}


/* OVER NICE: hard-hide legacy hero eyebrow label */
.on-hero-eyebrow { display: none !important; }

/* ربط السلايدر بالثيم القديم: منع وميض بيانات fallback قبل قراءة سلايدات سلة */
html.on-salla-slider-pending .on-hero-slider-section {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.on-salla-slider-linked .on-hero-slider-section {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* OVER NICE: إخفاء السلايدر الأصلي بصرياً من أول رسم لمنع وميض الثيم القديم.
   يبقى في DOM ليكون مصدر بيانات السلايدر المخصص. */
salla-slider:has(.hero-slider-title),
section:has(> salla-slider .hero-slider-title) {
  display: none !important;
  visibility: hidden !important;
}


/* عند وضع رابط صورة مستقل للقسم: تظهر الصورة كاملة ومتوسطة داخل الدائرة مهما كانت أبعادها. */
.on-legacy-cat-hit.on-cat-has-custom-image {
  background-color: #ffffff !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
  padding: 13px !important;
}

@media (max-width: 767px) {
  .on-legacy-cat-hit.on-cat-has-custom-image { padding: 10px !important; }
}


/* الشريط العلوي: استخدام شريط الثيم القديم الأصلي فقط */
.on-announcement-marquee { display: none !important; }

/* الأقسام الرئيسية: نفس صور الثيم القديم داخل الشكل الدائري الجديد بدون قص أو تبديل رابط الصورة */
.on-legacy-cat-hit {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
  padding: 10px !important;
}
@media (max-width: 767px) {
  .on-legacy-cat-hit { padding: 8px !important; }
}

/* ========================================================================== */
/* OVER NICE — إصلاحات التدقيق الآمنة فقط (بدون تغيير تصميم الثيم) */
/* ========================================================================== */

/* إخفاء الكلمة المقترحة الفارغة التي يولدها ثيم Angel */
[data-on-empty-search-keyword="1"],
.angel-search-keywords-list label:empty,
.angel-search-keywords-list label:has(> span:empty) {
  display: none !important;
}

/* مساحة أمان شريط الجوال لأجهزة iPhone الحديثة */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1024px) {
    .bottom-header {
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* العدادات المنتهية أو الفارغة فقط — دون تغيير أي عداد فعّال */
.slider-countdown:empty,
.slider-countdown:has(.s-count-down-ended),
.slider-countdown:has([data-ended="true"]) {
  display: none !important;
}

/* إبقاء خط المتجر المعتمد DIN كما هو وعدم السماح لثيم Angel بإرجاع خط آخر */
html, body,
body.font-primary,
.font-primary,
.angel-search-keyword-btn,
.angel-search-btn,
.bottom-header,
.store-header,
.store-footer {
  font-family: var(--font-main) !important;
}



/* ========================================================================== */
/* OVER NICE — ROOT HERO ANTI-FLASH (2026-09-04)                             */
/* يمنع ظهور سلايدر الثيم القديم في أي frame أثناء التحديث.                 */
/* ========================================================================== */

/* 1) المصدر الأصلي الذي يعلّمه JavaScript مبكراً يبقى مخفياً نهائياً. */
salla-slider[data-on-native-hero-source="1"],
section[data-on-native-hero-section="1"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 2) حماية مستقلة عن :has — حتى لو أضاف Salla محتوى السلايدر تدريجياً،
      صورة/نص السلايدر القديم لا يمكن أن يُرسما على الشاشة. */
body.index salla-slider img[alt="hero banner"],
body.index salla-slider .hero-slider-title,
body.index salla-slider .hero-slider-subtitle {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 3) السلايدر الجديد لا يظهر بمحتوى fallback للحظة؛ ينتظر بيانات Salla أولاً. */
html.on-hero-booting .on-hero-slider-section {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.on-custom-hero-ready .on-hero-slider-section,
html.on-salla-slider-linked .on-hero-slider-section {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* ========================================================
   OVER NICE - توحيد الأزرار الرئيسية بالذهبي الرسمي
   ======================================================== */
.on-hero-btn,
.on-themed-view-all-btn,
.on-card-add-btn,
.on-saudi-btn {
  background: var(--on-action) !important;
  color: #ffffff !important;
  border-color: var(--on-action) !important;
  box-shadow: 0 8px 24px var(--on-action-shadow) !important;
}

.on-hero-btn:hover,
.on-themed-view-all-btn:hover,
.on-card-add-btn:hover,
.on-saudi-btn:hover {
  background: var(--on-action-hover) !important;
  border-color: var(--on-action-hover) !important;
  color: #ffffff !important;
}


/* ========================================================
   OVER NICE - إخفاء أيقونة محادثة الواتساب العائمة فقط
   ======================================================== */
#cartat_fwp,
.cartat_fwp,
.cartat-fwp,
.floating-wpp,
.floating-wpp-popup,
.floating-wpp-btn,
.floating-wpp-button,
[class*="floating-wpp"],
[class*="whatsapp-chat"],
[class*="whats-app"],
[class*="whatsapp_widget"],
a[href*="wa.me"],
a[href*="api.whatsapp.com"],
a[href*="whatsapp.com"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ========================================================
   OVER NICE - Snow White palette overrides
   ======================================================== */
.on-hero-box,
.on-themed-container,
.on-themed-container.perfumes-theme,
.on-themed-container.makeup-theme,
.on-themed-container.packages-theme,
.on-themed-container.trending-theme,
.on-themed-container.offers-theme,
.on-side-menu-header,
.on-nav-direct.offer,
.on-nav-direct.highlight,
.on-nav-direct:hover,
.on-nav-details > summary:hover,
.on-nav-details[open] > summary,
.on-nav-sub-list,
.on-side-menu-header .on-side-menu-back:hover,
.on-nav-details > summary > .on-nav-chevron,
.on-nav-details > summary:hover > .on-nav-chevron,
.on-nav-details[open] > summary > .on-nav-chevron,
.on-menu-icon,
.on-trust-icon {
  background: #F8FCFF !important;
  background-image: none !important;
}

.on-hero-box,
.on-themed-container,
.on-themed-container.perfumes-theme,
.on-themed-container.makeup-theme,
.on-themed-container.packages-theme,
.on-themed-container.trending-theme,
.on-themed-container.offers-theme,
.on-side-menu-header,
.on-nav-direct.offer,
.on-nav-direct.highlight,
.on-nav-sub-list,
.on-side-menu-header .on-side-menu-back:hover,
.on-nav-details > summary > .on-nav-chevron,
.on-menu-icon,
.on-trust-bar,
.on-trust-icon {
  border-color: #E4EBF3 !important;
}

.on-themed-view-all-btn,
.on-card-add-btn,
.on-hero-btn,
.on-saudi-btn {
  background: #343A40 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #343A40 !important;
  box-shadow: 0 8px 24px rgba(52, 58, 64, 0.22) !important;
}

.on-themed-view-all-btn:hover,
.on-card-add-btn:hover,
.on-hero-btn:hover,
.on-saudi-btn:hover {
  background: #23272B !important;
  color: #FFFFFF !important;
  border-color: #23272B !important;
}


/* ========================================================
   OVER NICE - إزالة شريط الخصائص ووضع بنر الثيم القديم تحت أيقونات الأقسام
   ======================================================== */
.on-trust-bar {
  display: none !important;
}

.on-old-promo-banner {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 18px auto 0 !important;
  padding: 0 14px !important;
}

.on-old-promo-banner-inner {
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
}

.on-old-promo-banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 20px !important;
}

@media (max-width: 767px) {
  .on-old-promo-banner {
    margin-top: 14px !important;
    padding: 0 8px !important;
  }
  .on-old-promo-banner img {
    border-radius: 14px !important;
  }
}


/* ========================================================
   OVER NICE - حذف شارات الحاويات وإخفاء أيقونة الدردشة العائمة فقط
   ======================================================== */
.on-themed-badge {
  display: none !important;
}

#cartat_fwp,
.cartat_fwp,
.cartat-fwp,
[id*="cartat" i][style*="fixed" i],
[class*="cartat" i][style*="fixed" i],
.floating-wpp,
.floating-wpp-popup,
.floating-wpp-btn,
.floating-wpp-button,
[class*="floating-wpp" i],
[id*="whatsapp" i][style*="fixed" i],
[class*="whatsapp-widget" i][style*="fixed" i],
[class*="whatsapp-chat" i][style*="fixed" i],
iframe[src*="cartat" i],
iframe[src*="whatsapp" i],
img[alt*="cartat-whatsapp-icon" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}