body {
  background: #ffffff;
}

.header-container, 
header.header-container,
.main-header {
  background: #000000 !important;
}

.header-container .mburger .text-primary,
.header-container .mburger p,
.header-container .header-buttons,
.header-container .search-btn,
.header-container .header-btn,
.header-container a, 
.header-container span,
.header-container i,
.header-container svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.store-footer, 
.store-footer__inner,
footer.store-footer {
  background-color: #000000 !important;
  background: #000000 !important;
  padding-top: 15px !important;
}

.store-footer,
.store-footer p,
.store-footer a,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer h5,
.store-footer h6,
.store-footer span {
  color: #ffffff !important;
}

.store-footer .to-top a {
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 30px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.store-footer .to-top a p,
.store-footer .to-top a i {
  margin: 0 4px !important;
  color: #ffffff !important;
}

.store-footer .to-top a:hover {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

.store-footer .to-top a:hover p,
.store-footer .to-top a:hover i {
  color: #000000 !important;
}

.store-footer .s-social-link a,
.store-footer salla-social a,
.store-footer .footer-social a,
.store-footer .customer-service-icons a,
.store-footer [class*="social"] a {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.store-footer .footer-top div.flex.align-center a,
.store-footer div[class*="contact"] a,
.store-footer div[class*="service"] a,
.store-footer .footer-top .flex-col.da-brdr a,
.store-footer .container .flex-col a[href*="wa.me"],
.store-footer .container .flex-col a[href*="tel:"],
.store-footer .container .flex-col a[href*="mailto:"] {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 8px !important;
  transition: all 0.3s ease !important;
}

.store-footer .footer-top div.flex.align-center a i,
.store-footer .footer-top div.flex.align-center a svg,
.store-footer .footer-top div.flex.align-center a svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
  font-size: 18px !important;
}

.store-footer svg,
.store-footer svg path,
.store-footer svg g,
.store-footer i,
.store-footer .icon {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.store-footer .s-social-link a:hover,
.store-footer salla-social a:hover,
.store-footer .footer-top div.flex.align-center a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}

.store-footer .s-social-link a:hover svg,
.store-footer .s-social-link a:hover svg path,
.store-footer salla-social a:hover svg,
.store-footer salla-social a:hover svg path,
.store-footer .footer-top div.flex.align-center a:hover svg,
.store-footer .footer-top div.flex.align-center a:hover svg path,
.store-footer .footer-top div.flex.align-center a:hover i {
  fill: #bda06d !important;
  color: #bda06d !important;
}


.s-product-card-image-cover {
    aspect-ratio: 2 / 3 !important;
    overflow: hidden;
}

.s-product-card-image-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}










/* 1. Icons aur Salla ke saare auto-generated text elements ko hide karna taake overlap zero ho jaye */
.salla-advertisement svg, 
.salla-advertisement i, 
.salla-advertisement [class*="icon"],
[class*="advertisement-title"],
.salla-advertisement h1, 
.salla-advertisement h2, 
.salla-advertisement h3,
.salla-advertisement span,
.salla-advertisement font,
.salla-advertisement a { 
    display: none !important; 
}

/* Original Paragraph ke real text ko transparent aur zero size karna */
.salla-advertisement p {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-block !important;
    width: max-content !important;
    white-space: nowrap !important;
    animation: singleMarqueeTrack 24s linear infinite !important; /* Smooth slow animation */
}

/* 2. Main outer container ko single row mein lock karna */
.salla-advertisement,
.salla-advertisement div {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    width: 100% !important;
    animation: none !important; 
    transform: none !important;
}

/* 3. Pehla Track (First Loop): Naya exact text bina Across Saudi Arabia ke */
.salla-advertisement p::before {
    content: "جود الاصالة  \2022  Summer Sale 20% Off | Free Shipping  \2022  تخفيضات الصيف بخصم 20% | شحن مجاني" !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: inline-block !important;
    padding-right: 100px !important; /* Pehle aur doosre loop ke beech ka gap */
}

/* 4. Doosra Track (Second Loop): Seamless continous loop ke liye naya text */
.salla-advertisement p::after {
    content: " \2022  جود الاصالة  \2022  Summer Sale 20% Off | Free Shipping  \2022  تخفيضات الصيف بخصم 20% | شحن مجاني" !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    display: inline-block !important;
}

/* Pure Single Horizontal Movement Keyframes */
@keyframes singleMarqueeTrack {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}











/* =================================================== */
/* 2. FINAL STRUCTURE FIX (App-Inner Layout)          */
/* =================================================== */

/* Main outer container ko vertical flow mein lock karna */
.app-inner.flex.flex-col {
    display: flex !important;
    flex-direction: column !important;
}

/* Header ko pehle నంబర్ (Top) par lekar aana */
header.store-header {
    order: 1 !important;
    position: relative !important;
}

/* Announcement bar ko doosre number (Header ke theek neeche) par lana */
.salla-advertisement {
    order: 2 !important;
    position: relative !important;
    top: 0 !important; /* Purani saari absolute positioning khatam */
    width: 100% !important;
    display: block !important;
}

/* Baki website ke content (Salla hooks aur body) ko uske baad set karna */
.salla-advertisement ~ * {
    order: 3 !important;
}

/* Pehle wale galat rules ko clean karne ke liye reset code */
#mainnav {
    display: block !important;
}
.main-content, #app, body, .store-body {
    margin-top: 0 !important;
}