/* Add custom CSS styles below */

/* General start */
:root {
  --main-color: #f7af45;
  --second-color: #414042;
  --ss-color: #7c6645;
  --third-color: #ca8b2b;
  --text-color: #f5efea;
  --back-color: #968f8a;
  --black-color: #292727;
}

/* General End */
.almarai-light {
  font-family: "Almarai", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.almarai-regular {
  font-family: "Almarai", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.almarai-bold {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.almarai-extrabold {
  font-family: "Almarai", sans-serif;
  font-weight: 800;
  font-style: normal;
}



/* NavBar start */

#mainnav {
  background-color: var(--second-color);
}
.header-btn__icon:hover {
  color: var(--main-color) !important;
  transition: 0.4s;
  scale: 1.03;
}
.header-btn:hover {
  border: none;
  color: var(--main-color);
  transition: 0.3s;
  scale: 1.04;
}

.s-cart-summary-total {
  color: var(--black-color);
}
#mobile-menu {
  background: var(--third-color);
}
@media only screen and (max-width: 1024px) {
  .mm-spn.mm-spn--light {
    color: var(--second-color);
    background: var(--main-color);
  }
  .btn--close:hover {
    rotate: 360deg;
    scale: 1.1;
    transition: 0.3s;
  }
}

/* NavBar End */

/* Banners */
.s-block--fixed-banner img {
  background: none;
  border-radius: 25px 0px 25px 0px;
  filter: drop-shadow(7px 9px 10px var(--black-color));
  animation-name: example;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
@keyframes example {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.02;

    filter: drop-shadow(1px 1px 3px var(--back-color));
  }

  100% {
    scale: 1;
  }
}
/* Title */
.s-slider-block__title-right h2 {
  color: var(--text-color);
  font-size: 1.4rem;
  text-shadow: 1px 3px 3px var(--back-color) !important;
}

.font-bold {
  color: var(--text-color);
}

/*  cards*/

.swiper-wrapper {
  padding: 10px;
}
.s-product-card-entry {
  background: linear-gradient(140deg, var(--main-color), var(--third-color));
  color: var(--text-color);
  border: 1px solid var(--third-color);
  border-radius: 25px;
}

.s-product-card-entry .s-product-card-image {
  border-radius: 20px;
  box-shadow: 1px 2px 2px var(--back-color);
  scale: 0.96;
}
.s-product-card-content-title a {
  color: var(--text-color);
}
.s-product-card-content-title a:hover {
  color: var(--black-color);
}

.s-product-card-entry:hover {
  box-shadow: 5px 6px 7px var(--back-color);
  transition: 0.5s;
  scale: 1.02;
  .s-product-card-image {
    border-radius: 15px;
    scale: 0.94;
    transition: 0.5s;
    border: 1px solid var(--ss-color);
    box-shadow: 1px 1px 0px var(--back-color);
  }
}
.s-button-element {
  border: 1px solid var(--text-color);
  background: linear-gradient(140deg, var(--ss-color), var(--main-color));
  border-radius: 25px;
  color: var(--text-color);
}
.s-button-element:hover {
  background: linear-gradient(140deg, var(--main-color), var(--text-color));
  color: var(--black-color);
  border: 1px solid var(--third-color);
  transition: 0.3s;
  scale: 1.02;
}

/* أحدث المنتجات */
.right-side h2 {
  font-size: 1.6rem;
  text-shadow: 1px 5px 5px var(--third-color);
}

/* مميزات المتجر */
.s-block--features__item .feature-icon {
  background-color: var(--third-color) !important;
  border: 1px solid var(--second-color);
}
.s-block--features__item .feature-icon i {
  color: var(--main-color);
}
.s-block--features__item {
  border: 1px solid var(--second-color);
  background: var(--main-color);
}
.s-block--features__item h2,
.s-block--features__item p {
  color: #000;
}

/* Footer */

.store-footer {
  background: linear-gradient(
    90deg,
    var(--main-color),
    var(--third-color)
  ) !important;
  padding: 30px;
  font-size: 14px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  box-shadow: 1px 1px 7px 7px var(--ss-color);
  text-align: center;
  border: 1px solid var(--third-color);
}
.footer-is-light .store-footer .store-footer__inner {
  background-color: transparent;
}
.store-footer__inner {
  background-color: transparent !important;
}
.store-footer__inner .flex {
  justify-content: center;
}
.store-footer__inner .max-w-sm {
  margin: auto;
}
.store-footer h3 {
  text-align: center !important;
  padding: 1rem;
  border-radius: 30px;
  background: linear-gradient(to right, var(--back-color), var(--third-color));
  color: var(--text-color);
  font-size: 1.7rem;
}
.store-footer h3:hover {
  color: var(--text-color);
  opacity: 1;
  cursor: pointer;
}

.footer-list {
  color: var(--second-color);
}
.store-footer__inner .max-w-sm {
  color: var(--second-color);
}
.store-footer a {
  color: var(--second-color);
}
.store-footer a:hover {
  color: var(--text-color);
  opacity: 1;
  transform: scale(1.03);
  transition: 0.4s;
}

.store-footer i {
  color: var(--black-color);
  border-color: var(--black-color);
}
.store-footer__inner {
  text-align: center;
}

salla-apps-icons,
salla-apps-icons h3 {
  display: none;
}
.s-apps-icons-list {
  display: none;
  justify-content: space-around;
  align-items: center;
}
.store-footer::after {
  content: "برمجة و تطوير   ADFAZ";
  top: 0px;
  font-size: 16px;
  opacity: 1;
  text-align: center;
  font-weight: bold;
  width: 100%;
  display: inline-block;
  color: var(--second-color) !important;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.s-block--features__item .feature-icon {
  background-color: var(--third-color);
}
.s-social-list {
  display: none;
}

.s-block--features__item .feature-icon i {
  color: #eee7e7;
}

.text-primary {
  color: var(--main-color);
}
/* FORCE OFF-WHITE BACKGROUNDS */
:root{
  --second-color: #F7F5F2 !important;
}

html, body{
  background: #F7F5F2 !important;
  background-image: none !important;
}

/* أغلب حاويات سلة/الثيمات */
main, section, .container, .content, .page, .home, .app-content{
  background: transparent !important;
}

/* كروت/بلوكات داخل الصفحة */
.card, .box, .widget, .section, .block, .panel, .footer, footer{
  background: #F7F5F2 !important;
  background-image: none !important;
}

/* الهيدر لو فيه تغميق */
header, .header, .navbar{
  background: #F7F5F2 !important;
  background-image: none !important;
}
/* FOOTER & LINKS SECTION FIX */
footer, .footer, .links, .important-links, .s-footer {
  background-color: #F7F5F2 !important;
}
footer a, .footer a, .links a {
  background: transparent !important;
}
/* SOFT LUXURY TONE DOWN */
:root {
  --main-color: #2B2B2B !important;
  --third-color: #EDEAE5 !important;
}
/* MOBILE SECTION IMAGE FIX */
@media (max-width: 768px) {
  .s-block img {
    max-height: 180px;
    object-fit: cover;
  }
}
/* ===== FINAL FIX: REMOVE DARK OVERLAYS ===== */

/* إزالة أي تغميق فوق الصور */
.hero::before,
.hero::after,
.overlay,
.section-overlay,
.banner::before,
.banner::after {
  display: none !important;
  opacity: 0 !important;
}

/* الهيرو والصور بدون تعتيم */
.hero,
.banner,
.s-block {
  background-color: transparent !important;
}

/* ===== MOBILE IMAGE SIZE FIX ===== */
@media (max-width: 768px) {
  .s-block img,
  .hero img,
  .banner img {
    max-height: 220px !important;
    object-fit: cover !important;
    border-radius: 16px;
  }
}

/* ===== FOOTER FIX (إلغاء التغميق) ===== */
footer,
.footer {
  background: #F7F5F2 !important;
  color: #2B2B2B !important;
}

footer * {
  color: #2B2B2B !important;
}
/* ===== MOBILE SPACING SOFT FIX ===== */
@media (max-width: 768px) {
  section,
  .s-block {
    margin-bottom: 24px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* ===== TYPOGRAPHY: MODERN SOFT LUXURY ===== */
:root{
  --text-color: #1F1F1F;
  --muted-text: #6B6B6B;
}

body{
  font-family: "Almarai", sans-serif !important;
  color: var(--text-color) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.section-title,
.s-block__title,
.product-title{
  font-family: "Almarai", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  color: var(--text-color) !important;
}

/* نصوص عامة */
p, .text, .description, .product-description, .s-block__subtitle{
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--muted-text) !important;
}

/* أزرار */
button, .btn, .button, .s-button{
  font-family: "Almarai", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

/* روابط */
a{ color: var(--text-color) !important; }
a:hover{ opacity: .85; }

/* ===== MOBILE FONT SIZES ===== */
@media (max-width: 768px){
  h1, .s-block__title{ font-size: 22px !important; }
  h2, .section-title{ font-size: 20px !important; }
  h3{ font-size: 18px !important; }

  p, .description, .product-description, .s-block__subtitle{
    font-size: 14.5px !important;
  }

  button, .btn, .button, .s-button{
    font-size: 14.5px !important;
  }
}
  /* ===== STEP 2: FIX BIG IMAGES + REMOVE DARK OVERLAY ===== */

/* 1) الغِ أي تعتيم/طبقة داكنة فوق صور الأقسام والبانرات */
.hero::before,
.hero::after,
.banner::before,
.banner::after,
.s-block::before,
.s-block::after,
.section::before,
.section::after,
.section-title::before,
.section-title::after,
.overlay,
.bg-overlay,
.section-overlay,
.hero-overlay{
  background: transparent !important;
  opacity: 0 !important;
  display: none !important;
  content: none !important;
}

/* 2) ثبتي حجم صور الأقسام/البلوكات (خاصة بالموبايل) بدون تكبير مزعج */
@media (max-width: 768px){
  .s-block img,
  .hero img,
  .banner img,
  .section img{
    width: 100% !important;
    height: 190px !important;     /* إذا تبينها أصغر: 170px */
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* فراغات ألطف */
  .s-block, .section, .banner, .hero{
    margin-bottom: 14px !important;
  }
}

/* 3) للكمبيوتر/الآيباد: لا تكون الصور عملاقة */
@media (min-width: 769px){
  .s-block img,
  .hero img,
  .banner img,
  .section img{
    width: 100% !important;
    max-height: 360px !important;  /* إذا تبينها أقل: 320px */
    object-fit: cover !important;
    border-radius: 18px !important;
  }
}
  /* ===== FINAL FIX: CLEAN OFF-WHITE HEADER & PAGE ===== */

/* الهيدر العلوي (إلغاء أي تدرج أو ظل) */
.header,
.navbar,
.header-wrapper,
.header-container,
.site-header {
  background: #F7F5F2 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* شريط البحث العلوي */
.header input,
.search-bar,
.search-input {
  background: #FFFFFF !important;
  border-radius: 14px !important;
}

/* الخلفية العامة للموقع */
body,
html,
.page,
.page-content {
  background-color: #F7F5F2 !important;
}

/* إزالة أي ظل حول الأقسام */
.section,
.s-block,
.banner,
.hero {
  box-shadow: none !important;
}
  /* ===== FINAL CLEAN STYLE – YILDIZ ===== */

/* الخلفية العامة */
html, body {
  background-color: #F7F5F2 !important;
  background-image: none !important;
}

/* جميع الأقسام */
main, section, .container, .content, .page-content {
  background: transparent !important;
}

/* البطاقات والصناديق */
.card, .box, .widget, .section, .block, .s-block {
  background-color: #F7F5F2 !important;
  background-image: none !important;
  border-radius: 16px;
}

/* الهيدر */
header, .header, .navbar {
  background-color: #F7F5F2 !important;
  background-image: none !important;
}

/* الفوتر */
footer, .footer {
  background-color: #F7F5F2 !important;
  color: #2B2B2B !important;
}

footer * {
  color: #2B2B2B !important;
}

/* ===== تصغير الصور في الجوال ===== */
@media (max-width: 768px) {
  .s-block img,
  .hero img,
  .banner img {
    max-height: 180px !important;
    object-fit: cover !important;
    border-radius: 16px;
  }
}

/* ألوان النص */
:root {
  --main-color: #2B2B2B !important;
  --second-color: #F7F5F2 !important;
  --third-color: #EDEAE5 !important;
}
  /* =========================
   YILDIZ — FIX DARK BG + OVERSIZE IMAGES (MOBILE)
   Paste at VERY END of Additional CSS
========================= */

/* 1) Force off-white background everywhere */
html, body,
#app, .app, .site-wrapper,
.page, .page-content, .content, .container,
main, section {
  background-color: #F7F5F2 !important;
  background-image: none !important;
}

/* 2) Kill ANY overlay that makes the site look dark */
body::before,
body::after,
.page::before,
.page::after,
.content::before,
.content::after,
.s-block::before,
.s-block::after,
.banner::before,
.banner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* 3) Fix footer dark background */
footer, .footer, .s-footer, .store-footer, .links, .important-links {
  background-color: #F7F5F2 !important;
  background-image: none !important;
  color: #2B2B2B !important;
}
footer * , .s-footer * {
  color: #2B2B2B !important;
}

/* 4) Mobile image size fix (sections / hero / banners) */
@media (max-width: 768px) {
  .s-block img,
  .hero img,
  .banner img {
    width: 100% !important;
    max-height: 220px !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
  }

  /* Reduce huge spacing between blocks (optional) */
  .s-block { margin-bottom: 14px !important; }
}
  /* REMOVE DARK OVERLAY FROM CATEGORY IMAGES */
.s-block::before,
.s-block::after,
.banner::before,
.banner::after {
  background: none !important;
  opacity: 0 !important;
}

/* ENSURE IMAGES ARE CLEAN */
.s-block img {
  filter: none !important;
}
  /* FORCE REMOVE ALL IMAGE OVERLAYS – FINAL FIX */
.s-block::before,
.s-block::after,
.s-block-overlay,
.s-block__overlay,
.s-block .overlay,
.banner::before,
.banner::after,
.banner-overlay,
.hero::before,
.hero::after {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* FORCE CLEAN IMAGES */
.s-block img,
.banner img,
.hero img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* REMOVE DARK BACKGROUND FROM BLOCKS */
.s-block,
.banner,
.hero {
  background: #F7F5F2 !important;
}html{outline:6px solid red !important;}
  /* Sunglasses Banner Fix */
.s-block-fixed-banner::before,
.s-block-fixed-banner::after {
    background: transparent !important;
    opacity: 0 !important;
}

.s-block-fixed-banner img {
    filter: brightness(1.18) contrast(1.05) !important;
}/* Force brighten sunglasses banner only */
.s-block-fixed-banner img {
    filter: brightness(1.25) contrast(1.08) saturate(1.05) !important;
}

.s-block-fixed-banner {
    background: transparent !important;
}/* FINAL FIX – Kill any banner overlay completely */
.s-block-fixed-banner,
.s-block-fixed-banner * {
    background: transparent !important;
}

.s-block-fixed-banner .banner-overlay,
.s-block-fixed-banner .s-block__overlay,
.s-block-fixed-banner .overlay {
    display: none !important;
    opacity: 0 !important;
}

.s-block-fixed-banner img {
    filter: brightness(1.35) contrast(1.1) !important;
}/* FINAL – Sunglasses banner clean & bright */
.s-block-fixed-banner {
    background-color: #f7f5f2 !important;
}

.s-block-fixed-banner img {
    opacity: 1 !important;
    filter: none !important;
}

.s-block-fixed-banner::before,
.s-block-fixed-banner::after,
.s-block-fixed-banner .overlay,
.s-block-fixed-banner .banner-overlay {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
}