.card_btn,
.card_btn .salla-btns {
  background: transparent !important;
}

/* =========================
   REELS: Modern layout
   ========================= */

/* 1) Container: horizontal snap on mobile */
.container .reels{
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 6px 18px !important;

  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;
}

/* إزالة شكل السلم */
.container .reels .reel-item{
  margin-top: 0 !important;
}

/* 2) Reel card */
.container .reels .reel-item{
  flex: 0 0 78% !important;
  scroll-snap-align: start !important;

  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;

  aspect-ratio: 9 / 16 !important;
  background: #000 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.12) !important;
}

/* 3) Video fills the card */
.container .reels .reel-item video{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4) Optional: subtle bottom gradient for readability */
.container .reels .reel-item::after{
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* 5) Keep buttons above gradient */
.container .reels .reel-itembtns,
.container .reels .sound-toggle,
.container .reels .s-product-card-wishlist-btn{
  z-index: 5 !important;
}

/* 6) Desktop: switch to clean grid */
@media (min-width: 1024px){
  .container .reels{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .container .reels .reel-item{
    flex: initial !important;
    width: 100% !important;
  }
}

/* =========================
   Banner text (FINAL FIX)
   ========================= */
/* استهداف دقيق للبانر بتاعك من خلال: div.content.container */
@media (max-width: 768px) {
  .content.container h2.text-3xl.font-bold {
    margin-top: -140px !important;
  }
}

/* حماية سعر المنتج نهائيًا (عشان نفس الكلاسات ممكن تكون على السعر) */
@media (max-width: 768px) {
  body.product-single h2.text-3xl.font-bold {
    margin-top: 0 !important;
  }
}

/* =========================
   Tabs header spacing
   ========================= */

tabs-component::part(tab-header) {
  margin-top: 30px !important;
}

/* =========================
   Tabs buttons styling
   ========================= */

/* Default state: dark background + white text */
.tab.styles {
  background-color: #c81a6f !important;
  border-color: #c81a6f !important;
  color: #ffffff !important;
}

/* Ensure inner text/icon are white */
.tab.styles span,
.tab.styles i {
  color: #ffffff !important;
}

/* Keep the hover animation overlay color (the ::before bubble) */
.tab.styles::before {
  background-color: #e9dbe8 !important;
}

/* Hover state: overlay becomes light, so text becomes dark */
.tab.styles:hover,
.tab.styles:hover span,
.tab.styles:hover i {
  color: #6b2b4d !important;
}

/* Optional: focus/keyboard accessibility */
.tab.styles:focus,
.tab.styles:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200, 26, 111, 0.25) !important;
}

/* Optional: active/selected tab if your code adds a class or aria-selected */
.tab.styles.active,
.tab.styles[aria-selected="true"] {
  background-color: #c81a6f !important;
  border-color: #c81a6f !important;
  color: #ffffff !important;
}

.tab.styles.active span,
.tab.styles.active i,
.tab.styles[aria-selected="true"] span,
.tab.styles[aria-selected="true"] i {
  color: #ffffff !important;
}

/* =========================
   Mobile Menu – Text Colors
   ========================= */

/* اللون الأساسي لكل نصوص القائمة */
#mobile-menu,
#mobile-menu a,
#mobile-menu span,
#mobile-menu li,
#mobile-menu i {
  color: #c81a6f !important;
}

/* كسر ألوان Tailwind الرمادي */
#mobile-menu .text-gray-500,
#mobile-menu .text-gray-400,
#mobile-menu .text-gray-600 {
  color: #c81a6f !important;
}

/* Hover state */
#mobile-menu a:hover,
#mobile-menu li:hover > a,
#mobile-menu li:hover > span {
  color: #9b1453 !important;
}

/* Active / Current item */
#mobile-menu a.active,
#mobile-menu li.active > a,
#mobile-menu li.mm-spn--open > a {
  color: #9b1453 !important;
  font-weight: 700;
}

/* Sub menu items */
#mobile-menu ul ul a,
#mobile-menu ul ul span {
  color: #c81a6f !important;
}

/* Hover للـ sub menu */
#mobile-menu ul ul a:hover,
#mobile-menu ul ul li:hover > a {
  color: #6b0f3a !important;
}

/* Icons داخل القائمة */
#mobile-menu i,
#mobile-menu svg {
  color: #c81a6f !important;
}

/* Hover icons */
#mobile-menu a:hover i,
#mobile-menu a:hover svg {
  color: #9b1453 !important;
}

/* =========================
   Header Logo – control WIDTH
   ========================= */

.header-logo {
  max-width: none !important;
}

.header-logo .navbar-brand {
  max-width: none !important;
}

.header-logo .navbar-brand img {
  width: 120px !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* =========================
   FIX header height
   ========================= */
.header_padd {
  height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* =========================
   Logo container
   ========================= */
.header-logo {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* =========================
   Logo image control
   ========================= */
.header-logo img {
  max-width: 160px !important;
  max-height: 100px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}





/* Try to scope to product page if your theme supports it */
body.s-product,
body.product,
.s-product-details {
  --color-secondary: #c81a6f !important;
}