/* Make header transparent */
#store-header,
header.merged-header,
.main-nav-container,
.main-nav-container .inner {
  background: transparent !important;
  box-shadow: none !important;
}

/* If Salla adds bg on scroll */
#store-header.is-sticky,
#store-header.sticky,
header.is-sticky {
  background: transparent !important;
}

/* Remove white bg from container inside header */
#store-header .inner,
#store-header .container {
  background: transparent !important;
}




/* =========================
   TOP HEADER MARQUEE (SEAMLESS)
========================= */
.locals-header-marquee{
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-top: 2px solid #de2025;
  border-bottom: 2px solid #de2025;
  padding: 10px 0;
  position: relative;
  z-index: 999999;
}

.locals-header-marquee.is-sticky{
  position: sticky;
  top: 0;
}

/* Track moves continuously */
.locals-header-marquee .locals-header-marquee__track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: localsHeaderMarqueeSeamless var(--locals-marquee-duration, 18s) linear infinite;
}

/* A "group" is one full repeated sentence set */
.locals-header-marquee .locals-header-marquee__group{
  display: flex;
  width: max-content;
}

/* Item */
.locals-header-marquee .locals-header-marquee__item{
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 0 28px;
  color: #de2025;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
}

/* Seamless loop: move by exactly half the track (because we duplicate the group) */
@keyframes localsHeaderMarqueeSeamless{
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

@media (max-width: 640px){
  .locals-header-marquee{ padding: 9px 0; }
  .locals-header-marquee .locals-header-marquee__item{
    font-size: 18px;
    padding: 0 18px;
  }
}




/* ✅ Center the whole swiper container */
.swiper.s-slider-container{
  display: flex !important;
  justify-content: center !important;
}

/* ✅ Center the track */
.swiper-wrapper.s-slider-swiper-wrapper{
  justify-content: center !important;
}

/* ✅ Center each slide */
.s-products-slider-card.swiper-slide{
  display: flex !important;
  justify-content: center !important;
}

/* ✅ Center the product card itself */
.s-product-card-entry{
  margin-left: auto !important;
  margin-right: auto !important;
}



.l-products-main-title{
  font-size: 52px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}



/* ✅ Center product section title (Salla) */
.l-products-title{
  width: 100% !important;
  text-align: center !important;
  align-items: center !important;
}

.l-products-main-title{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* ✅ Fix the parent flex "justify-between" that prevents centering */
.l-products-container > .flex.flex-row.justify-between{
  justify-content: center !important;
}



/* استهدف عنوان الهيرو *the other banner dumbass
.hero-title,
.main-title,
.s-hero__title,
.banner__title,
h1 {
  position: relative;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* نحط الصورة بدل النص */
.hero-title::before,
.main-title::before,
.s-hero__title::before,
.banner__title::before,
h1::before {
  content: ""; 
  display: block;
  width: min(600px, 90vw);   /* عرض الصورة */
  height: 160px;            /* ارتفاع الصورة */
  margin: 0 auto;
  background: url("https://l.top4top.io/p_36874toml1.png") center / contain no-repeat;
}

/* =========================
   🎯 بانر علوي متحرك (عكس الاتجاه)
   أبيض + إطار أحمر + نص أحمر
========================= */

.locals-marquee-top{
  width:100%;
  overflow:hidden;
  background:#fff;              /* 🤍 خلفية بيضاء */
  border:2px solid #de2025;     /* 🔴 إطار أحمر */
  border-left:0;
  border-right:0;
  padding:16px 0;               /* 📏 ارتفاع البانر */
}

/* 🏃‍♂️ التراك المتحرك */
.locals-marquee-top .locals-marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation: locals-marquee-reverse var(--marquee-duration, 18s) linear infinite;
}

/* ✍️ شكل النص */
.locals-marquee-top .locals-marquee-item{
  white-space:nowrap;
  flex:0 0 auto;
  padding:0 32px;               /* ↔️ مسافة بين الجمل */
  color:#de2025;                /* 🔴 لون النص */
  font-weight:900;              /* 💪 ثقيل */
  font-size:29px;               /* 🔍 حجم النص */
  line-height:1.2;
}

/* 🔄 حركة بالعكس (من اليسار لليمين) */
@keyframes locals-marquee-reverse{
  from { 
    transform: translateX(calc(-1 * var(--marquee-distance, 0px))); 
  }
  to   { 
    transform: translateX(100%); 
  }
}

/* 📱 للجوال */
@media (max-width: 640px){
  .locals-marquee-top .locals-marquee-item{
    font-size:26px;
    padding:0 20px;
  }
}

/* 🎯 خلي عنوان "وش هو لوكلز؟" يصير Hero Text */
.s-block--about-us h2{
  font-size: clamp(72px, 4vw, 100px) !important; /* 📏 يكبر حسب الشاشة */
  font-weight: 900 !important;                 /* 💪 ثقيل */
  line-height: 1.1 !important;                 /* 🧘‍♂️ مضغوط وحلو */
  letter-spacing: -0.5px;                      /* ✨ احترافي */
}




.locals-marquee-outside{
  width:100%;
  overflow:hidden;
  background:#fff;
  border:2px solid #de2025;
  border-left:0;
  border-right:0;
  padding:16px 0;

  margin-top: 4px;      /* control space above */
  margin-bottom: -8px;   /* control space below */
}

.locals-marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation: locals-marquee var(--marquee-duration, 18s) linear infinite;
}

.locals-marquee-item{
  white-space:nowrap;
  flex:0 0 auto;
  padding:0 32px;        /* more space between repeats */
  color:#de2025;
  font-weight:900;
  font-size:29px;       /* ⬅️ bigger text */
  line-height:1.2;
}

/* يبدأ من برا يمين، وينتهي بعد ما يطلع برا يسار */
@keyframes locals-marquee{
  from { transform: translateX(100%); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
}

@media (max-width: 640px){
  .locals-marquee-item{ font-size:14px; padding:0 16px; }
}
@media (max-width: 640px){
  .locals-marquee-item{
    font-size:26px;
    padding:0 20px;
  }

  .locals-marquee-outside{
    padding:14px 0;
  }
}

/* 1) صفّر أي مسافات على البانر نفسه */
.locals-marquee-outside{
  margin: 0 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* 2) شيل الفراغ اللي تحت سكشن "about-us" لأنه غالبًا اللي مسوي فجوة */
.s-block--about-us{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) إذا تبغاه يلصق تحت السكشن أكثر */
.s-block--about-us + .locals-marquee-outside{
  margin-top: 40px !important;   /* جرّب -8 أو -16 حسب عينك */
}

/* 4) إذا الفجوة تحت البانر (فوق الفوتر) من الفوتر نفسه */
.locals-marquee-outside + footer,
.locals-marquee-outside + .site-footer,
.locals-marquee-outside + .s-footer,
.locals-marquee-outside + #footer{
  margin-top: 40px !important;   /* جرّب -8 أو -16 */
  padding-top: 0 !important;
}





/* ===== Footer Compact (LA FAM reference style) ===== */
:root{
  --lf-red: #de2025; /* غيّرها لو تبغى */
  --lf-border: 1px solid rgba(222,32,37,.6);
}

/* التقط footer بسلة بأكثر من احتمال */
footer, .store-footer, .s-footer, #footer{
  position: relative;
}

/* نلغي أي مسافات ضخمة */
footer .container, .store-footer .container, .s-footer .container, #footer .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

footer{
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}

/* نخفي صف المدفوعات إذا موجود (اللي يطوّل الفوتر غالباً) */
footer .payment, 
footer .payments, 
footer .footer-payments,
footer .s-footer__payments,
footer [class*="payments"],
footer [class*="payment"]{
  display: none !important;
}

/* wrapper الجديد اللي بنركبه بالـ JS */
.lf-footer{
  border-top: var(--lf-border);
  padding: 14px 18px 12px !important;
}

.lf-footer__top{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* left / center / right */
  align-items: start;
  column-gap: 24px;
  padding-bottom: 10px;
  border-bottom: var(--lf-border);
  min-height: 92px; /* تحكم بطول الريفرنس */
}

.lf-footer__bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding-top: 10px;
  min-height: 62px;
}

/* أعمدة */
.lf-col--left{ justify-self: start; }
.lf-col--center{ justify-self: center; text-align:center; }
.lf-col--right{ justify-self: end; text-align:right; }

/* الروابط */
.lf-footer a{
  color: var(--lf-red) !important;
  text-decoration: none !important;
}
.lf-footer a:hover{
  text-decoration: underline !important;
}

/* قائمة الروابط بشكل “handwritten list” */
.lf-links, .lf-social{
  display: grid;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.lf-links a, .lf-social a{
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* اللوجو */
.lf-logo img, .lf-logo svg{
  max-height: 46px;
  height: 46px;
  width: auto;
  display: block;
}

/* نصوص الحقوق */
.lf-copy{
  color: var(--lf-red) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: .2px;
  text-transform: uppercase;
}

/* محاذاة سويتشر اللغة/العملة */
.lf-locale{
  justify-self: end;
  color: var(--lf-red) !important;
}
.lf-locale *{
  color: var(--lf-red) !important;
}

/* موبايل: نخليه ستاك مرتب */
@media (max-width: 768px){
  .lf-footer__top{
    grid-template-columns: 1fr;
    text-align: center;
    row-gap: 12px;
  }
  .lf-col--left, .lf-col--center, .lf-col--right{
    justify-self: center;
    text-align: center;
  }
  .lf-footer__bottom{
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .lf-locale{ justify-self: center; }
}
.lf-logo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 40px;
}

.lf-footer-logo-link {
  display: inline-flex;
  align-items: center;
}

.lf-footer-logo-img {
  height: 34px;      /* عدّلها لو تبي أكبر */
  width: auto;
  display: block;
  object-fit: contain;
}
.lf-footer-logo-img {
  height: 54px;        /* كان 34px → كبرناه تقريبًا +20px */
  width: auto;
  margin-top: 50px;   /* ينزله شوي تحت */
}