.bg-white {
    --tw-bg-opacity: 0;
    background-color: #be5050;
    background-color: #000;
}/* ====== شريط علوي أسود بالكامل (سطح المكتب + الجوال) ====== */

/* الرأس الكامل */
header,
header.header,
.header,
.header-main,
.salla-header,
#site-header,
.navbar,
.topbar,
.mobile-header,
.mobile-topbar {
  background-color: #000 !important;  /* أسود */
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* لإزالة الفراغ الأبيض على الجانبين */
header,
.header,
.salla-header,
#site-header {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* النصوص والروابط داخل الشريط */
header a,
.header a,
.navbar a,
.main-menu a,
.menu-item a,
.topbar a,
.mobile-header a {
  color: #fff !important;
  text-decoration: none !important;
}

/* عند المرور على الروابط */
header a:hover,
.navbar a:hover,
.main-menu a:hover {
  opacity: 0.8 !important;
}

/* القوائم المنسدلة */
.dropdown-menu,
.main-menu .sub-menu,
.sub-menu {
  background-color: #000 !important;
  color: #fff !important;
}

/* الشريط العلوي في الجوال */
.mobile-header,
.mobile-topbar,
.header-mobile,
.salla-mobile-header {
  background-color: #000 !important;
  color: #fff !important;
}

/* روابط القائمة الجانبية في الجوال */
.mobile-menu,
.salla-drawer,
.mobile-nav,
.drawer-menu {
  background-color: #000 !important;
  color: #fff !important;
}

.mobile-menu a,
.salla-drawer a,
.mobile-nav a,
.drawer-menu a {
  color: #fff !important;
}

/* الأيقونات (السلة، الحساب، البحث) */
.header-icons svg,
.header-icons i,
.mobile-header .icon,
.header .icon {
  color: #fff !important;
  fill: #fff !important;
}


/* الشريط الذي يحتوي على الشعار والأيقونات */
div.flex.items-stretch.justify-between.relative {
  background-color: #000 !important;  /* أسود */
  color: #fff !important;             /* النص أبيض */
}

/* لضمان ملء العرض بالكامل */
div.flex.items-stretch.justify-between.relative {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* الأيقونات داخل هذا الشريط */
div.flex.items-stretch.justify-between.relative svg,
div.flex.items-stretch.justify-between.relative i {
  color: #fff !important;
  fill: #fff !important;
}




/****/

/*
  ====================================================================
====================================================================
*/


.s-product-card-entry {
  border: 2px solid transparent;
  border-radius: 12px;
  position: relative;
  background-color: white;
  
  background-image: 
    linear-gradient(white, white), 
    radial-gradient(circle at var(--x) var(--y), gold 50%, gray 30%, gold 50%,gray 50%);

  background-clip: padding-box, border-box;
  background-origin: border-box;
  
  animation: orbit 4s linear infinite;
}

@keyframes orbit {
  0%   { --x: 0%;   --y: 50%; }
  25%  { --x: 50%;  --y: 0%; }
  50%  { --x: 100%; --y: 50%; }
  75%  { --x: 50%;  --y: 100%; }
  100% { --x: 0%;   --y: 50%; }
}

@property --x {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --y {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}






@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/********we are wroking here***/
/*
  */

.genius-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
  padding: 1rem 0; 
}


.genius-banner {
  display: block;
  border-radius: 12px; 
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}


.genius-banner:hover {
  transform: translateY(-5px); 
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); 
}


.genius-banner img {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}


.s-button-element:not(:disabled):not([loading]) {
    pointer-events: auto;
    background: black;
    color: white;
}

/**/

.form-label {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    margin-bottom: .625rem;
    --tw-text-opacity: 1;

    color: rgb(255 255 255) !important;
}


.s-fast-checkout-button.outline {
    background-color: white ;
    border: 1px solid var(--color-primary);
    color: #000000;
}
.sticky-product-bar {
    background-color: white !important ;
    border: 1px solid var(--color-primary);
    color: #000000;
}

.s-cart-summary-total {
    font-weight: 600;
    --tw-text-opacity: 1;

    color: rgb(255 255 255) !important;
}

.text-base {
   
    color: white !important;
}