/* =========================================================
   MAGIC STORE — MASTER CSS 2026
   CLEAN VERSION
   RED #ED2027 + WHITE
   ========================================================= */

:root{
  --magic-red:#ed2027;
  --magic-red-dark:#c8171d;
  --magic-white:#ffffff;
  --magic-text:#171717;
  --magic-muted:#666666;
  --magic-border:#eeeeee;
  --magic-red-border:rgba(237,32,39,.15);
  --magic-shadow:0 18px 48px rgba(237,32,39,.10);
}

html{
  scroll-behavior:smooth;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

main{
  overflow:hidden;
}

*{
  box-sizing:border-box;
}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--magic-red)!important;
  outline-offset:3px;
}


/* =========================================================
   01 — HEADER
   ========================================================= */

header svg,
.store-header svg,
header i,
.store-header i,
header button,
.store-header button{
  opacity:1!important;
  visibility:visible!important;
}

header svg,
.store-header svg{
  color:#111!important;
  stroke:currentColor!important;
}

header i,
.store-header i{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

header input[type="search"],
header input[type="text"],
.store-header input,
.search-bar input,
salla-search input{
  background:#fff!important;
  color:#111!important;
  border-color:rgba(0,0,0,.16)!important;
}

header input::placeholder,
.store-header input::placeholder,
.search-bar input::placeholder{
  color:#777!important;
}

header .navbar-brand img,
header .store-logo img,
header a[href="/"] img,
.store-header img{
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
  visibility:visible!important;
}


/* =========================================================
   02 — RED NAVIGATION
   ========================================================= */

.main-nav-container,
.main-nav-container .container{
  background:var(--magic-red)!important;
  background-color:var(--magic-red)!important;
  color:#fff!important;
}

.main-nav-container a,
.main-nav-container span,
.main-nav-container i,
.main-nav-container button{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.main-nav-container svg{
  color:#fff!important;
  stroke:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
}

.main-nav-container a:hover{
  color:#fff!important;
  opacity:.82;
}


/* =========================================================
   03 — HEADER ICONS
   ========================================================= */

/* MAGIC FIX — keep header controls visible without forcing the customer dropdown open */
.store-header .header-btn,
.store-header salla-cart-summary,
.store-header salla-user-menu,
.store-header [class*="header-btn"]{
  opacity:1!important;
  visibility:visible!important;
}

/* Only direct trigger content stays visible.
   Salla keeps full control of dropdown open/closed state. */
.store-header .header-btn > *,
.store-header salla-cart-summary > *,
.store-header salla-user-menu > button,
.store-header salla-user-menu > a{
  opacity:1!important;
  visibility:visible!important;
}

.store-header i,
.store-header [class^="sicon-"],
.store-header [class*=" sicon-"],
header [class^="sicon-"],
header [class*=" sicon-"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  opacity:1!important;
  visibility:visible!important;
  font-size:22px!important;
  line-height:1!important;
}

.store-header i::before,
.store-header [class^="sicon-"]::before,
.store-header [class*=" sicon-"]::before,
header [class^="sicon-"]::before,
header [class*=" sicon-"]::before{
  display:inline-block!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  opacity:1!important;
  visibility:visible!important;
}

.store-header button svg,
.store-header a svg,
.store-header salla-cart-summary svg,
.store-header salla-user-menu svg,
header button svg,
header salla-cart-summary svg{
  display:inline-block!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  color:#111!important;
  stroke:#111!important;
  opacity:1!important;
  visibility:visible!important;
}

.store-header salla-cart-summary,
header salla-cart-summary{
  position:relative!important;
  overflow:visible!important;
}

.store-header salla-cart-summary .s-cart-summary-count,
header salla-cart-summary .s-cart-summary-count,
.store-header [class*="cart"] [class*="count"],
header [class*="cart"] [class*="count"],
.store-header [class*="cart"] [class*="badge"],
header [class*="cart"] [class*="badge"]{
  background:var(--magic-red)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:5!important;
}

.store-header salla-search svg,
.store-header .search-bar svg,
.store-header [class*="search"] svg,
header salla-search svg,
header .search-bar svg{
  color:#555!important;
  stroke:#555!important;
  opacity:1!important;
  visibility:visible!important;
}

.main-nav-container i,
.main-nav-container [class^="sicon-"],
.main-nav-container [class*=" sicon-"],
.main-nav-container svg{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  stroke:currentColor!important;
}


/* =========================================================
   04 — PRODUCT CARDS
   ========================================================= */

.product-card,
.product-entry,
salla-product-card{
  border:1px solid var(--magic-border)!important;
  background:#fff!important;
  border-radius:16px!important;
  overflow:hidden;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease!important;
}

.product-card img,
.product-entry img,
salla-product-card img{
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

@media(min-width:768px){

  .product-card:hover,
  .product-entry:hover,
  salla-product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 38px rgba(0,0,0,.08)!important;
    border-color:var(--magic-red)!important;
  }

  .product-card:hover img,
  .product-entry:hover img,
  salla-product-card:hover img{
    transform:scale(1.025);
  }
}


/* =========================================================
   05 — BUTTONS
   ========================================================= */

main .btn,
main button,
.s-button-btn{
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease!important;
}

.s-button-primary,
button.s-button-primary,
.btn-primary,
.add-to-cart,
salla-add-product-button button{
  background:var(--magic-red)!important;
  border-color:var(--magic-red)!important;
  color:#fff!important;
}

.s-button-primary:hover,
.btn-primary:hover,
.add-to-cart:hover,
salla-add-product-button button:hover{
  background:var(--magic-red-dark)!important;
  border-color:var(--magic-red-dark)!important;
}


/* =========================================================
   06 — GENERAL BANNERS
   ========================================================= */

main [class*="banner"]{
  overflow:hidden;
}

main [class*="banner"] img{
  border-radius:20px!important;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}

@media(min-width:768px){
  main [class*="banner"]:hover img{
    transform:scale(1.015);
  }
}


/* =========================================================
   07 — ABOUT / HERO
   ========================================================= */

[class*="hero-area"]{
  position:relative;
  overflow:hidden;
  background:#fff!important;
  padding:0!important;
}

[class*="hero-area"] .container{
  width:92%!important;
  max-width:1380px!important;
  margin:0 auto!important;
  padding:65px 24px!important;
}

[class*="hero-area"] h1,
[class*="hero-area"] h2,
[class*="hero-area"] h3{
  color:var(--magic-red)!important;
  -webkit-text-fill-color:var(--magic-red)!important;
  font-weight:800!important;
  line-height:1.25!important;
}

[class*="hero-area"] p{
  color:var(--magic-red)!important;
  -webkit-text-fill-color:var(--magic-red)!important;
  opacity:.78;
  line-height:1.9!important;
}

[class*="hero-area"] img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:560px!important;
  object-fit:cover!important;
  border-radius:28px!important;
  box-shadow:var(--magic-shadow)!important;
}


/* =========================================================
   08 — MAGIC MARQUEE
   ========================================================= */

[class*="marquee"]{
  background:var(--magic-red)!important;
  color:#fff!important;
}

[class*="marquee"] *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}


/* =========================================================
   09 — ABOUT IMAGE GALLERY
   ========================================================= */

[class*="images-gallery"]{
  position:relative;
  overflow:hidden;
  background:#fff!important;
  padding:55px 0 75px!important;
}

[class*="images-gallery"] .container{
  width:92%!important;
  max-width:1380px!important;
  margin:0 auto!important;
}

[class*="images-gallery"] img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  border-radius:24px!important;
  box-shadow:0 15px 40px rgba(237,32,39,.09)!important;
  transition:
    transform .35s ease,
    box-shadow .35s ease!important;
}

@media(hover:hover){

  [class*="images-gallery"] img:hover{
    transform:translateY(-5px) scale(1.01)!important;
    box-shadow:0 22px 55px rgba(237,32,39,.14)!important;
  }
}


/* =========================================================
   10 — STATISTICS
   ========================================================= */

[class*="statistics"],
[class*="stats"]{
  background:var(--magic-red)!important;
  color:#fff!important;
}

[class*="statistics"] *,
[class*="stats"] *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

[class*="statistics"] .container,
[class*="stats"] .container{
  width:92%!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding-top:50px!important;
  padding-bottom:50px!important;
}

[class*="statistics"] strong,
[class*="stats"] strong,
[class*="statistics"] [class*="number"],
[class*="stats"] [class*="number"]{
  font-weight:900!important;
}


/* =========================================================
   11 — WHY MAGIC
   REAL CLASS CONFIRMED
   ========================================================= */

.s-block--features-center-img{
  position:relative!important;
  background:#fff!important;
  padding:76px 0!important;
}

.s-block--features-center-img > .container{
  width:92%!important;
  max-width:1380px!important;
  margin:0 auto!important;
}

.s-block--features-center-img .title-wrapper{
  width:100%!important;
  text-align:center!important;
  margin-bottom:45px!important;
}

.s-block--features-center-img .title-wrapper h1,
.s-block--features-center-img .title-wrapper h2,
.s-block--features-center-img .title-wrapper h3,
.s-block--features-center-img .title-wrapper .title{
  color:var(--magic-red)!important;
  -webkit-text-fill-color:var(--magic-red)!important;
  font-size:clamp(32px,3vw,44px)!important;
  font-weight:800!important;
  line-height:1.25!important;
}

.s-block--features-center-img .title-wrapper p{
  color:var(--magic-muted)!important;
  -webkit-text-fill-color:var(--magic-muted)!important;
  font-size:17px!important;
  line-height:1.85!important;
  margin-top:10px!important;
}

.s-block--features-center-img .grid{
  gap:28px!important;
  align-items:center!important;
}

.s-block--features-center-img .grid h3,
.s-block--features-center-img .grid h4,
.s-block--features-center-img .grid h5,
.s-block--features-center-img .grid strong{
  color:var(--magic-red)!important;
  -webkit-text-fill-color:var(--magic-red)!important;
  font-weight:800!important;
}

.s-block--features-center-img .grid p{
  color:var(--magic-text)!important;
  -webkit-text-fill-color:var(--magic-text)!important;
  line-height:1.8!important;
}

.s-block--features-center-img .grid img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  border-radius:26px!important;
  box-shadow:var(--magic-shadow)!important;
}

.s-block--features-center-img .grid > div{
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease!important;
}

@media(hover:hover){

  .s-block--features-center-img .grid > div:hover{
    transform:translateY(-5px);
  }
}


/* =========================================================
   12 — MAGIC FOR MODERN HOME / QUOTE
   ========================================================= */

[class*="quotes"]{
  position:relative;
  overflow:hidden;
  background:#fff!important;
  padding:60px 20px!important;
}

[class*="quotes"] .container{
  width:92%!important;
  max-width:1080px!important;
  margin:0 auto!important;
  padding:52px 44px!important;
  background:#fff!important;
  border:1px solid var(--magic-red-border)!important;
  border-radius:28px!important;
  box-shadow:0 16px 44px rgba(237,32,39,.07)!important;
}

[class*="quotes"] h1,
[class*="quotes"] h2,
[class*="quotes"] h3{
  color:var(--magic-red)!important;
  -webkit-text-fill-color:var(--magic-red)!important;
  font-weight:800!important;
  line-height:1.35!important;
}

[class*="quotes"] p{
  color:var(--magic-text)!important;
  -webkit-text-fill-color:var(--magic-text)!important;
  max-width:900px!important;
  font-size:17px!important;
  line-height:1.95!important;
}

[class*="quotes"] svg,
[class*="quotes"] i{
  color:var(--magic-red)!important;
  fill:var(--magic-red)!important;
}


/* =========================================================
   13 — FAQ
   ========================================================= */

[class*="questions"],
[class*="faq"]{
  background:#fff!important;
}

[class*="questions"] .container,
[class*="faq"] .container{
  width:92%!important;
  max-width:1120px!important;
  margin:0 auto!important;
}

[class*="questions"] h1,
[class*="questions"] h2,
[class*="faq"] h1,
[class*="faq"] h2{
  color:var(--magic-red)!important;
  -webkit-text-fill-color:var(--magic-red)!important;
  font-weight:800!important;
}

details{
  background:#fff!important;
  border:1px solid var(--magic-red-border)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  margin-bottom:12px!important;
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease!important;
}

details:hover{
  border-color:var(--magic-red)!important;
}

details[open]{
  border-color:var(--magic-red)!important;
  box-shadow:0 12px 30px rgba(237,32,39,.08)!important;
}

details summary{
  cursor:pointer!important;
  font-weight:700!important;
}


/* =========================================================
   14 — STORE INFO
   ========================================================= */

[class*="store-info"]{
  background:var(--magic-red)!important;
  color:#fff!important;
}

[class*="store-info"] *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

[class*="store-info"] svg{
  color:#fff!important;
  stroke:currentColor!important;
}


/* =========================================================
   15 — FOOTER
   ========================================================= */

footer.store-footer-wrap,
footer.store-footer-wrap > .store-footer,
footer.store-footer-wrap .store-footer,
footer.store-footer-wrap .store-footer__inner,
footer.store-footer-wrap .footer-certificates{
  background:var(--magic-red)!important;
  background-color:var(--magic-red)!important;
  background-image:none!important;
  color:#fff!important;
}

footer.store-footer-wrap .store-footer h1,
footer.store-footer-wrap .store-footer h2,
footer.store-footer-wrap .store-footer h3,
footer.store-footer-wrap .store-footer h4,
footer.store-footer-wrap .store-footer h5,
footer.store-footer-wrap .store-footer p,
footer.store-footer-wrap .store-footer li,
footer.store-footer-wrap .store-footer label,
footer.store-footer-wrap .store-footer a,
footer.store-footer-wrap .store-footer span,
footer.store-footer-wrap .store-footer i{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

footer.store-footer-wrap .store-footer img[alt*="MAGIC"],
footer.store-footer-wrap .store-footer__logo img,
footer.store-footer-wrap .store-footer .store-logo img,
footer.store-footer-wrap .store-footer .footer-logo img,
footer.store-footer-wrap .store-footer a[href="/"] img{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
}

footer.store-footer-wrap .bg-white.text-gray-600,
footer.store-footer-wrap .store-footer__copyright,
footer.store-footer-wrap .copyrights,
footer.store-footer-wrap .footer-copyright,
footer.store-footer-wrap .footer-bottom,
footer.store-footer-wrap .footer-is-light{
  background:#fff!important;
  color:#111!important;
  border-top:1px solid #e7e7e7!important;
}

footer.store-footer-wrap .bg-white.text-gray-600 img,
footer.store-footer-wrap .store-footer__copyright img,
footer.store-footer-wrap .copyrights img,
footer.store-footer-wrap .footer-copyright img,
footer.store-footer-wrap .footer-bottom img{
  filter:none!important;
}

footer.store-footer-wrap .bg-white.text-gray-600,
footer.store-footer-wrap .bg-white.text-gray-600 a,
footer.store-footer-wrap .bg-white.text-gray-600 span,
footer.store-footer-wrap .bg-white.text-gray-600 p{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  opacity:1!important;
  visibility:visible!important;
}

footer.store-footer-wrap .bg-white.text-gray-600 > .container::after{
  content:"جميع الحقوق محفوظة 2026 | MAGIC";
  display:flex!important;
  align-items:center;
  justify-content:center;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  font-size:14px!important;
  font-weight:500!important;
  white-space:nowrap;
}


/* =========================================================
   16 — DESKTOP
   ========================================================= */

@media(min-width:1024px){

  main salla-slider:first-of-type{
    max-width:1440px!important;
    margin:32px auto 55px!important;
    padding:0 24px!important;
    overflow:hidden!important;
  }

  main salla-slider:first-of-type .swiper{
    overflow:hidden!important;
    border-radius:20px!important;
  }

  main salla-slider:first-of-type .swiper-slide{
    border-radius:20px!important;
    overflow:hidden!important;
  }

  main salla-slider:first-of-type img{
    width:100%!important;
    border-radius:20px!important;
  }

  .products-slider,
  .products-container,
  .product-grid{
    margin-top:22px!important;
  }
}


/* =========================================================
   17 — MOBILE
   ========================================================= */

@media(max-width:767px){

  header .navbar-brand img,
  header .store-logo img,
  header a[href="/"] img{
    width:110px!important;
    max-width:110px!important;
    height:44px!important;
    max-height:44px!important;
  }

  .main-menu,
  .main-menu .sub-menu,
  .mm-spn,
  .mm-spn ul{
    background:#fff!important;
  }

  .main-menu a,
  .main-menu span,
  .mm-spn a,
  .mm-spn span{
    color:#111!important;
    -webkit-text-fill-color:#111!important;
  }

  .container{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  main h1{
    font-size:29px!important;
    line-height:1.25!important;
  }

  main h2{
    font-size:24px!important;
    line-height:1.35!important;
  }

  main p{
    font-size:14px!important;
    line-height:1.9!important;
  }

  .product-card,
  .product-entry,
  salla-product-card{
    border-radius:14px!important;
  }

  main button,
  main .btn,
  main .s-button-btn{
    min-height:46px;
    border-radius:12px!important;
    font-weight:700;
  }


  /* ABOUT MOBILE */

  [class*="hero-area"] .container,
  [class*="images-gallery"] .container,
  [class*="statistics"] .container,
  [class*="stats"] .container,
  .s-block--features-center-img > .container,
  [class*="quotes"] .container,
  [class*="questions"] .container,
  [class*="faq"] .container{
    width:calc(100% - 30px)!important;
    max-width:none!important;
  }

  [class*="hero-area"] .container{
    padding:36px 0!important;
  }

  [class*="hero-area"] h1,
  [class*="hero-area"] h2{
    font-size:30px!important;
  }

  [class*="hero-area"] p{
    font-size:15px!important;
  }

  [class*="hero-area"] img{
    max-height:none!important;
    object-fit:contain!important;
    border-radius:18px!important;
  }

  [class*="images-gallery"]{
    padding:36px 0 46px!important;
  }

  [class*="images-gallery"] img{
    border-radius:16px!important;
  }

  [class*="statistics"] .container,
  [class*="stats"] .container{
    padding-top:38px!important;
    padding-bottom:38px!important;
  }

  .s-block--features-center-img{
    padding:48px 0!important;
  }

  .s-block--features-center-img .title-wrapper{
    margin-bottom:28px!important;
  }

  .s-block--features-center-img .title-wrapper h1,
  .s-block--features-center-img .title-wrapper h2,
  .s-block--features-center-img .title-wrapper h3,
  .s-block--features-center-img .title-wrapper .title{
    font-size:28px!important;
  }

  .s-block--features-center-img .title-wrapper p{
    font-size:15px!important;
  }

  .s-block--features-center-img .grid{
    gap:18px!important;
  }

  .s-block--features-center-img .grid img{
    border-radius:18px!important;
  }

  [class*="quotes"]{
    padding:42px 15px!important;
  }

  [class*="quotes"] .container{
    padding:34px 20px!important;
    border-radius:20px!important;
  }

  [class*="quotes"] h1,
  [class*="quotes"] h2,
  [class*="quotes"] h3{
    font-size:27px!important;
  }

  [class*="quotes"] p{
    font-size:15px!important;
  }

  details{
    border-radius:14px!important;
  }

  footer.store-footer-wrap{
    padding-top:30px!important;
    text-align:center;
  }

  footer.store-footer-wrap .store-logo img,
  footer.store-footer-wrap .footer-logo img{
    max-width:145px!important;
    height:auto!important;
  }

  footer.store-footer-wrap .bg-white.text-gray-600 > .container{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:18px!important;
  }

  footer.store-footer-wrap .bg-white.text-gray-600 > .container::after{
    width:100%!important;
    text-align:center!important;
    font-size:13px!important;
    margin:0 auto!important;
    margin:0 auto!important;
  }
}

/* =========================================================
   MAGIC ABOUT PAGE — FINAL 2026
   Page components only: Hero / Quotes / Benefits / Gallery /
   Features / FAQ. Red + White premium styling.
   ========================================================= */

:root{
  --magic-red:#ED2027;
  --magic-red-dark:#C8171D;
  --magic-ink:#171717;
  --magic-muted:#666;
  --magic-soft:#F7F7F8;
  --magic-line:#ECECEC;
  --magic-radius:24px;
  --magic-shadow:0 18px 55px rgba(0,0,0,.08);
}

/* landing-page component rhythm */
.s-block--hero-area,
.s-block--quotes,
.s-block--images-gallery,
.s-block--product-features-list,
.s-block--features-center-img,
.s-block--questions,
.s-block--faqs,
.s-block--benefits,
[class*="s-block--benefit"]{
  position:relative!important;
}

.s-block--hero-area > .container,
.s-block--quotes > .container,
.s-block--images-gallery > .container,
.s-block--product-features-list > .container,
.s-block--features-center-img > .container,
.s-block--questions > .container,
.s-block--faqs > .container,
.s-block--benefits > .container,
[class*="s-block--benefit"] > .container{
  width:min(92%,1380px)!important;
  max-width:1380px!important;
  margin-inline:auto!important;
}

/* HERO */
.s-block--hero-area{
  padding:34px 18px 72px!important;
  background:linear-gradient(135deg,#fff 0%,#fff 58%,#f7f7f8 100%)!important;
  overflow:hidden!important;
}
.s-block--hero-area:before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:rgba(237,32,39,.07);filter:blur(10px);left:-180px;top:-170px;pointer-events:none;
}
.s-block--hero-area .container{
  min-height:560px!important;padding:58px 54px!important;background:#fff!important;
  border:1px solid var(--magic-line)!important;border-radius:30px!important;
  box-shadow:var(--magic-shadow)!important;overflow:hidden!important;
}
.s-block--hero-area h1,.s-block--hero-area h2,.s-block--hero-area h3{
  color:var(--magic-ink)!important;-webkit-text-fill-color:var(--magic-ink)!important;
  font-size:clamp(42px,5vw,74px)!important;line-height:1.08!important;font-weight:900!important;
  letter-spacing:-1.5px!important;margin-bottom:22px!important;
}
.s-block--hero-area p{color:#555!important;font-size:18px!important;line-height:1.9!important;max-width:650px!important;}
.s-block--hero-area small,.s-block--hero-area [class*="sub"]{color:var(--magic-red)!important;-webkit-text-fill-color:var(--magic-red)!important;font-weight:800!important;}
.s-block--hero-area img{width:100%!important;max-height:510px!important;object-fit:contain!important;border-radius:24px!important;filter:drop-shadow(0 22px 30px rgba(0,0,0,.13))!important;}
.s-block--hero-area a:empty,.s-block--hero-area button:empty{display:none!important;}

/* STORY / VISION / FINAL QUOTE BLOCKS */
.s-block--quotes{padding:70px 18px!important;background:#fff!important;}
.s-block--quotes .container{
  padding:54px 58px!important;border:1px solid var(--magic-line)!important;border-radius:26px!important;
  background:linear-gradient(135deg,#fff 0%,#fafafa 100%)!important;box-shadow:0 12px 38px rgba(0,0,0,.055)!important;
}
.s-block--quotes h1,.s-block--quotes h2,.s-block--quotes h3{
  color:var(--magic-ink)!important;font-size:clamp(30px,3vw,46px)!important;font-weight:900!important;line-height:1.2!important;margin-bottom:16px!important;
}
.s-block--quotes h1:after,.s-block--quotes h2:after,.s-block--quotes h3:after{
  content:"";display:block;width:56px;height:5px;background:var(--magic-red);border-radius:20px;margin-top:16px;
}
.s-block--quotes p{color:var(--magic-muted)!important;font-size:17px!important;line-height:2!important;max-width:920px!important;}

/* BENEFITS — MAGIC TV + AC */
.s-block--benefits,[class*="s-block--benefit"]{padding:76px 18px!important;background:var(--magic-soft)!important;}
.s-block--benefits .title-wrapper,[class*="s-block--benefit"] .title-wrapper{text-align:center!important;margin-bottom:38px!important;}
.s-block--benefits .title-wrapper h2,.s-block--benefits .title-wrapper h3,[class*="s-block--benefit"] .title-wrapper h2{
  font-size:clamp(30px,3vw,44px)!important;font-weight:900!important;color:var(--magic-ink)!important;
}
.s-block--benefits .grid,[class*="s-block--benefit"] .grid{gap:24px!important;}
.s-block--benefits .grid>*,[class*="s-block--benefit"] .grid>*{
  background:#fff!important;border:1px solid var(--magic-line)!important;border-radius:24px!important;padding:30px!important;
  box-shadow:0 12px 35px rgba(0,0,0,.055)!important;transition:.25s ease!important;
}
.s-block--benefits .grid>*:hover,[class*="s-block--benefit"] .grid>*:hover{transform:translateY(-5px)!important;border-color:rgba(237,32,39,.35)!important;box-shadow:0 18px 45px rgba(237,32,39,.10)!important;}
.s-block--benefits img,[class*="s-block--benefit"] img{border-radius:18px!important;}

/* GALLERIES */
.s-block--images-gallery{padding:64px 18px!important;background:#fff!important;}
.s-block--images-gallery .grid{gap:22px!important;}
.s-block--images-gallery img{width:100%!important;border-radius:22px!important;box-shadow:0 14px 38px rgba(0,0,0,.08)!important;transition:transform .3s ease!important;}
.s-block--images-gallery img:hover{transform:translateY(-4px)!important;}

/* VALUES */
.s-block--product-features-list,.s-block--features-center-img{padding:82px 18px!important;background:var(--magic-soft)!important;}
.s-block--product-features-list .title-wrapper,.s-block--features-center-img .title-wrapper{text-align:center!important;margin-bottom:42px!important;}
.s-block--product-features-list .title-wrapper h2,.s-block--product-features-list .title-wrapper h3,
.s-block--features-center-img .title-wrapper h2,.s-block--features-center-img .title-wrapper h3{
  color:var(--magic-ink)!important;font-size:clamp(30px,3vw,44px)!important;font-weight:900!important;
}
.s-block--product-features-list .grid,.s-block--features-center-img .grid{gap:20px!important;}
.s-block--product-features-list .grid>*,.s-block--features-center-img .grid>*{
  background:#fff!important;border:1px solid var(--magic-line)!important;border-radius:22px!important;padding:26px!important;box-shadow:0 10px 30px rgba(0,0,0,.05)!important;
}
.s-block--product-features-list h3,.s-block--product-features-list h4,.s-block--features-center-img h3,.s-block--features-center-img h4{font-weight:850!important;color:var(--magic-ink)!important;}
.s-block--product-features-list i,.s-block--features-center-img i{color:var(--magic-red)!important;}

/* WHY MAGIC / FAQ */
.s-block--questions,.s-block--faqs{padding:82px 18px!important;background:#fff!important;}
.s-block--questions .title-wrapper,.s-block--faqs .title-wrapper{text-align:center!important;margin-bottom:38px!important;}
.s-block--questions .title-wrapper h2,.s-block--faqs .title-wrapper h2{font-size:clamp(30px,3vw,44px)!important;font-weight:900!important;color:var(--magic-ink)!important;}
.s-block--questions details,.s-block--faqs details{
  background:#fff!important;border:1px solid var(--magic-line)!important;border-radius:18px!important;margin-bottom:14px!important;padding:4px 18px!important;box-shadow:0 8px 24px rgba(0,0,0,.04)!important;
}
.s-block--questions summary,.s-block--faqs summary{font-weight:800!important;color:var(--magic-ink)!important;padding:18px 0!important;}
.s-block--questions details[open],.s-block--faqs details[open]{border-color:rgba(237,32,39,.35)!important;box-shadow:0 12px 32px rgba(237,32,39,.08)!important;}
.s-block--questions details[open] summary,.s-block--faqs details[open] summary{color:var(--magic-red)!important;}

/* Last content block as closing CTA-like panel */
main .s-block--quotes:last-of-type .container{
  background:linear-gradient(135deg,var(--magic-red) 0%,#c8171d 100%)!important;border:0!important;box-shadow:0 20px 55px rgba(237,32,39,.22)!important;text-align:center!important;
}
main .s-block--quotes:last-of-type h1,main .s-block--quotes:last-of-type h2,main .s-block--quotes:last-of-type h3,
main .s-block--quotes:last-of-type p{color:#fff!important;-webkit-text-fill-color:#fff!important;margin-inline:auto!important;}
main .s-block--quotes:last-of-type h1:after,main .s-block--quotes:last-of-type h2:after,main .s-block--quotes:last-of-type h3:after{background:#fff!important;margin-inline:auto!important;}

@media(max-width:1023px){
  .s-block--hero-area{padding:18px 12px 44px!important;}
  .s-block--hero-area .container{min-height:auto!important;padding:36px 22px!important;border-radius:22px!important;}
  .s-block--hero-area h1,.s-block--hero-area h2,.s-block--hero-area h3{font-size:38px!important;letter-spacing:-.6px!important;}
  .s-block--hero-area p{font-size:16px!important;}
  .s-block--hero-area img{margin-top:24px!important;max-height:none!important;}
  .s-block--quotes,.s-block--benefits,[class*="s-block--benefit"],.s-block--images-gallery,
  .s-block--product-features-list,.s-block--features-center-img,.s-block--questions,.s-block--faqs{padding:48px 12px!important;}
  .s-block--quotes .container{padding:34px 22px!important;border-radius:20px!important;}
  .s-block--quotes h1,.s-block--quotes h2,.s-block--quotes h3{font-size:29px!important;}
}

@media(max-width:640px){
  .s-block--hero-area .container{padding:30px 18px!important;}
  .s-block--hero-area h1,.s-block--hero-area h2,.s-block--hero-area h3{font-size:33px!important;}
  .s-block--hero-area p,.s-block--quotes p{font-size:15px!important;line-height:1.85!important;}
  .s-block--quotes .container{padding:30px 18px!important;}
  .s-block--images-gallery img{border-radius:16px!important;}
}/* ========================================================= MAGIC —
ABOUT PAGE ONLY — RED / WHITE FINAL ضع هذا الكود في آخر خانة CSS المخصص
========================================================= */

/* نطاق صفحة “من نحن” فقط: لا يطبق إلا عند اجتماع مكونات الصفحة */
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn{ –magic-red:#ED2027;
–magic-white:#FFFFFF; }

/* منع الألوان غير المطلوبة داخل أقسام صفحة من نحن */ body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–benefits,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
.s-block–images-gallery, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–product-features-list, body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
.s-block–features-center-img, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–questions{ box-sizing:border-box!important;
}

/* HERO — أحمر قوي + أبيض */ body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area{ position:relative!important;
padding:34px 18px 70px!important; background:#ED2027!important;
overflow:hidden!important; } body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area .container{
width:min(94%,1440px)!important; max-width:1440px!important;
min-height:570px!important; margin:auto!important;
padding:58px!important; background:#ED2027!important; border:2px solid
#FFFFFF!important; border-radius:32px!important; box-shadow:0 24px 70px
rgba(237,32,39,.28)!important; overflow:hidden!important; }
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
h1, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area h2, body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
h3{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important;
font-size:clamp(44px,5vw,76px)!important; font-weight:900!important;
line-height:1.05!important; } body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area p, body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
small, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area [class*=“sub”]{
color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; }
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
p{ font-size:18px!important; line-height:1.9!important;
max-width:650px!important; } body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area img{ width:100%!important;
max-height:500px!important; object-fit:contain!important;
border-radius:26px!important; border:3px solid #FFFFFF!important; }

/* جميع الحاويات */ body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn
:is(.s-block–quotes,.s-block–benefits,.s-block–images-gallery,.s-block–product-features-list,.s-block–features-center-img,.s-block–questions) >
.container{ width:min(92%,1380px)!important; max-width:1380px!important;
margin-inline:auto!important; }

/* القصة + الرؤية */ body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–quotes{ padding:74px 18px!important;
background:#FFFFFF!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes
.container{ padding:52px 58px!important; background:#FFFFFF!important;
border:2px solid #ED2027!important; border-radius:28px!important;
box-shadow:0 18px 50px rgba(237,32,39,.12)!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes h1,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes h2,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes h3,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes p{
color:#ED2027!important; -webkit-text-fill-color:#ED2027!important; }
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes h1,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes h2,
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes h3{
font-size:clamp(31px,3vw,48px)!important; font-weight:900!important; }

/* عالم MAGIC / body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–benefits{ padding:82px 18px!important;
background:#ED2027!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–benefits
:is(h1,h2,h3,h4,p,span){ color:#FFFFFF!important;
-webkit-text-fill-color:#FFFFFF!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–benefits
.grid>{ background:#ED2027!important; border:2px solid
#FFFFFF!important; border-radius:26px!important; padding:28px!important;
box-shadow:0 18px 45px rgba(255,255,255,.10)!important;
transition:transform .25s ease!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–benefits
.grid>*:hover{ transform:translateY(-6px)!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–benefits
img{ border-radius:20px!important; border:2px solid #FFFFFF!important; }

/* المعارض */ body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–images-gallery{ padding:72px
18px!important; background:#FFFFFF!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
.s-block–images-gallery img{ width:100%!important;
border-radius:24px!important; border:3px solid #ED2027!important;
box-shadow:0 18px 46px rgba(237,32,39,.14)!important;
transition:transform .28s ease!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
.s-block–images-gallery img:hover{ transform:translateY(-5px)
scale(1.01)!important; }

/* القيم / body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn
:is(.s-block–product-features-list,.s-block–features-center-img){
padding:84px 18px!important; background:#ED2027!important; }
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
:is(.s-block–product-features-list,.s-block–features-center-img)
:is(h1,h2,h3,h4,p,span,i){ color:#FFFFFF!important;
-webkit-text-fill-color:#FFFFFF!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
:is(.s-block–product-features-list,.s-block–features-center-img) .grid>{
background:#ED2027!important; border:2px solid #FFFFFF!important;
border-radius:24px!important; padding:26px!important; }

/* لماذا MAGIC / body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–questions{ padding:84px 18px!important;
background:#FFFFFF!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–questions
:is(h1,h2,h3,p){ color:#ED2027!important;
-webkit-text-fill-color:#ED2027!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–questions
details{ background:#FFFFFF!important; border:2px solid
#ED2027!important; border-radius:20px!important;
margin-bottom:14px!important; padding:5px 20px!important; box-shadow:0
10px 28px rgba(237,32,39,.09)!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–questions
summary, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–questions details {
color:#ED2027!important; -webkit-text-fill-color:#ED2027!important; }

/* آخر Quote = CTA ختامي */ body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–questions + .s-block–quotes{
background:#FFFFFF!important; padding:30px 18px 88px!important; }
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–questions +
.s-block–quotes .container{ background:#ED2027!important; border:2px
solid #ED2027!important; border-radius:32px!important; padding:70px
36px!important; text-align:center!important; box-shadow:0 24px 65px
rgba(237,32,39,.26)!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–questions +
.s-block–quotes :is(h1,h2,h3,p,span){ color:#FFFFFF!important;
-webkit-text-fill-color:#FFFFFF!important; margin-inline:auto!important;
}

/* موبايل */ @media(max-width:1023px){ body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn
.s-block–hero-area{padding:18px 12px 46px!important;} body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
.container{ min-height:auto!important; padding:34px 22px!important;
border-radius:24px!important; } body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
h1, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area h2, body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
h3{font-size:38px!important;} body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn
:is(.s-block–quotes,.s-block–benefits,.s-block–images-gallery,.s-block–product-features-list,.s-block–features-center-img,.s-block–questions){
padding:50px 12px!important; } }

@media(max-width:640px){ body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area .container{padding:28px
18px!important;} body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area h1, body:has(main
.s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–hero-area
h2, body:has(main .s-block–hero-area):has(main
.s-block–questions):has(main .s-block–product-features-list)
main.animate-fadeIn .s-block–hero-area h3{font-size:33px!important;}
body:has(main .s-block–hero-area):has(main .s-block–questions):has(main
.s-block–product-features-list) main.animate-fadeIn .s-block–quotes
.container{padding:30px 20px!important;} }
/* =====================================================
   MAGIC ABOUT — HERO FIX PATCH
   ضع هذا الكود في نهاية CSS فقط
   ===================================================== */

.s-block--hero-area{
    background:#ED2027 !important;
    padding:55px 20px !important;
    margin:0 !important;
    overflow:hidden !important;
}

.s-block--hero-area > .container{
    max-width:1450px !important;
    width:94% !important;
    margin:0 auto !important;

    background:#ED2027 !important;
    border:2px solid #FFFFFF !important;
    border-radius:32px !important;

    padding:55px !important;
    box-shadow:0 25px 70px rgba(237,32,39,.22) !important;
}

/* النصوص */
.s-block--hero-area h1,
.s-block--hero-area h2,
.s-block--hero-area h3,
.s-block--hero-area h4,
.s-block--hero-area p,
.s-block--hero-area span,
.s-block--hero-area small{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
}

.s-block--hero-area h1,
.s-block--hero-area h2,
.s-block--hero-area h3{
    font-weight:900 !important;
    line-height:1.15 !important;
}

.s-block--hero-area h1,
.s-block--hero-area h2{
    font-size:clamp(42px,4.5vw,72px) !important;
}

.s-block--hero-area p{
    font-size:18px !important;
    line-height:2 !important;
    max-width:620px !important;
}

/* الصورة */
.s-block--hero-area img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:520px !important;
    object-fit:cover !important;

    border-radius:25px !important;
    border:3px solid #FFFFFF !important;

    box-shadow:
      0 25px 60px rgba(0,0,0,.18),
      0 0 0 1px rgba(255,255,255,.2) !important;
}

/* =====================================================
   إزالة المستطيل السماوي
   ===================================================== */

.s-block--hero-area button:empty,
.s-block--hero-area a:empty,
.s-block--hero-area [class*="btn"]:empty,
.s-block--hero-area [class*="button"]:empty{
    display:none !important;
}

/* زر حقيقي إن كان يحتوي نصاً */
.s-block--hero-area a[class*="btn"],
.s-block--hero-area button{
    background:#FFFFFF !important;
    color:#ED2027 !important;
    -webkit-text-fill-color:#ED2027 !important;

    border:2px solid #FFFFFF !important;
    border-radius:999px !important;

    min-height:52px !important;
    padding:13px 30px !important;

    font-weight:800 !important;
    box-shadow:none !important;
}

/* القضاء على أي لون سماوي داخل Hero */
.s-block--hero-area [style*="background"],
.s-block--hero-area [class*="button"],
.s-block--hero-area [class*="btn"]{
    border-color:#FFFFFF !important;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:1024px){

    .s-block--hero-area{
        padding:25px 12px !important;
    }

    .s-block--hero-area > .container{
        width:96% !important;
        padding:32px 22px !important;
        border-radius:24px !important;
    }

    .s-block--hero-area h1,
    .s-block--hero-area h2{
        font-size:38px !important;
    }

    .s-block--hero-area p{
        font-size:16px !important;
    }

    .s-block--hero-area img{
        max-height:none !important;
        margin-top:25px !important;
        border-radius:20px !important;
    }
}

@media(max-width:600px){

    .s-block--hero-area > .container{
        padding:25px 17px !important;
    }

    .s-block--hero-area h1,
    .s-block--hero-area h2{
        font-size:32px !important;
    }
}/* MAGIC — REMOVE HERO BLUE BLOCK */

.s-block--hero-area a[href=""],
.s-block--hero-area a:not([href]),
.s-block--hero-area button:has(:empty),
.s-block--hero-area .btn:has(:empty){
    display:none !important;
}

/* استهداف الشريط السماوي الظاهر داخل Hero */
.s-block--hero-area a,
.s-block--hero-area button{
    background:#FFFFFF !important;
    background-color:#FFFFFF !important;
    color:#ED2027 !important;
    -webkit-text-fill-color:#ED2027 !important;
    border-color:#FFFFFF !important;
}

/* أي عنصر CTA بلا نص ظاهر */
.s-block--hero-area a:not(:has(*)):empty,
.s-block--hero-area button:not(:has(*)):empty{
    display:none !important;
}/* MAGIC ABOUT — REMOVE EMPTY HERO BUY BUTTON */
.s-block--hero-area .button-wrap,
.s-block--hero-area a.buy-button.s-button-element{
    display:none !important;
}/* MAGIC ABOUT — FORCE REMOVE HERO EMPTY CTA */

.s-block--hero-area .button-wrap.mb-5,
.s-block--hero-area .button-wrap,
.s-block--hero-area .button-wrap > div,
.s-block--hero-area a.buy-button,
.s-block--hero-area a.buy-button.s-button-element,
.s-block--hero-area a.s-button-element.s-button-solid{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
}/* =========================================
   MAGIC — IBM Plex Sans for Arabic + English
   ========================================= */

/* IBM Plex Sans — entire MAGIC store */
html,
body,
body *,
button,
input,
textarea,
select,
option,
a,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
label {

}

/* Arabic */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] body * {

}

/* English */
html[lang="en"],
html[lang="en"] body,
html[lang="en"] body * {

}

/* Arabic text inside mixed-language content */
:lang(ar),
[lang="ar"] {

}

/* English / Latin text inside mixed-language content */
:lang(en),
[lang="en"] {

}

body {
    font-variant-ligatures: normal;
}

/* =====================================================
   MAGIC — FINAL FONT SYSTEM
   IBM Plex Sans / IBM Plex Sans Arabic
   Arabic + English
   ===================================================== */

html,
body,
body *,
main,
main *,
header,
header *,
footer,
footer *,
nav,
nav *,
button,
input,
textarea,
select,
option,
a,
label,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {

}

html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] body *,
[lang="ar"],
:lang(ar) {

}

html[lang="en"],
html[lang="en"] body,
html[lang="en"] body *,
[lang="en"],
:lang(en) {

}

/* Salla components */
salla-button,
salla-add-product-button,
salla-product-card,
salla-cart-summary,
salla-search,
salla-user-menu,
salla-login,
salla-menu {

}

body {
    font-variant-ligatures: normal !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

/* =====================================================
   MAGIC — FINAL FONT SYSTEM
   OPEN SANS — ARABIC + ENGLISH
   ===================================================== */



/* Open Sans — entire MAGIC store */
html,
body,
body *,
main,
main *,
header,
header *,
footer,
footer *,
nav,
nav *,
button,
input,
textarea,
select,
option,
a,
label,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {

}

/* Arabic */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] body *,
[lang="ar"],
:lang(ar) {

}

/* English */
html[lang="en"],
html[lang="en"] body,
html[lang="en"] body *,
[lang="en"],
:lang(en) {

}

/* Salla components */
salla-button,
salla-add-product-button,
salla-product-card,
salla-cart-summary,
salla-search,
salla-user-menu,
salla-login,
salla-menu {

}

body {
    font-variant-ligatures: normal !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

/* =====================================================
   MAGIC — FINAL FONT SYSTEM
   ALEXANDRIA — ARABIC + ENGLISH
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&display=swap');

/* النصوص فقط */
html,
body,
h1,h2,h3,h4,h5,h6,
p,a,button,input,textarea,select,option,label,
small,strong,b,em,li,th,td,summary {
    font-family:'Alexandria',sans-serif !important;
}

/* العربية والإنجليزية */
html[lang="ar"],html[lang="ar"] body,
html[lang="en"],html[lang="en"] body,
[lang="ar"],[lang="en"],:lang(ar),:lang(en) {
    font-family:'Alexandria',sans-serif !important;
}

/* =====================================================
   SALLA ICON FONT — لا تلمس Alexandria الأيقونات
   ===================================================== */
[class^="sicon-"],
[class*=" sicon-"],
i[class^="sicon-"],
i[class*=" sicon-"] {
    font-family:sallaicons !important;
    speak:never !important;
    font-style:normal !important;
    font-weight:400 !important;
    font-variant:normal !important;
    text-transform:none !important;
    line-height:1 !important;
    -webkit-font-smoothing:antialiased !important;
    -moz-osx-font-smoothing:grayscale !important;
}

header [class^="sicon-"],
header [class*=" sicon-"],
.store-header [class^="sicon-"],
.store-header [class*=" sicon-"],
.main-nav-container [class^="sicon-"],
.main-nav-container [class*=" sicon-"] {
    font-family:sallaicons !important;
}

/* SVG ليست font icons */
svg { font-family:initial; }

body {
    font-variant-ligatures:normal !important;
    -webkit-font-smoothing:antialiased !important;
    -moz-osx-font-smoothing:grayscale !important;
    text-rendering:optimizeLegibility !important;
.footer-lang-currency-btns salla-button .s-button-text,
.footer-lang-currency-btns salla-button .s-button-text > span {
  color: #171717 !important;
}.footer-lang-currency-btns .s-button-text,
.footer-lang-currency-btns .s-button-text *,
.footer-lang-currency-btns .s-button-text *::before {
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
}salla-button.btn--main > a > button.btn--main {
  pointer-events: none !important;
}footer.store-footer-wrap .bg-white.text-gray-600 > .container::after {
  content: none !important;
  display: none !important;
}/* MAGIC — عرض الفيديو كاملًا على الكمبيوتر والهاتف */
#video-bg-0.s-block--video-bg {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

#video-bg-0.s-block--video-bg > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 768px) {
  #video-bg-0.s-block--video-bg {
    height: 56.25vw !important;
    min-height: 0 !important;
  }
}/* إصلاح أزرار الروابط في متجر MAGIC */
salla-button.btn--main[href],
salla-button.btn--main[href] > a[href] {
  pointer-events: auto !important;
}

salla-button.btn--main[href] > a[href] {
  cursor: pointer !important;
}

salla-button.btn--main[href] > a[href] > button {
  pointer-events: none !important;
}@media (min-width: 1024px) {
  body.product-index .product-index-page-header .container {
    justify-content: flex-start !important;
  }

  body.product-index .product-index-page-header .container > div,
  body.product-index .product-index-page-header salla-breadcrumb {
    text-align: start !important;
  }
text-rendering:optimizeLegibility !important;
}
.footer-lang-currency-btns
  (() => {
  function updateEnglishACBanner() {
    if (document.documentElement.lang !== 'en') return;

    const banner = [...document.querySelectorAll('.s-block--banner-design')]
      .find(section => section.querySelector('salla-button[href*="c1232154766"]'));

    const background = banner?.querySelector('[style*="background-image"]');
    background?.style.setProperty(
      'background-image',
      'url("https://cdn.files.salla.network/other/1806962633/e385c337-8713-4c54-a64b-eb22c314e0a0-original.webp")',
      'important'
    );
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', updateEnglishACBanner, { once: true });
  } else {
    updateEnglishACBanner();
  }
})();/* MAGIC — Hide Salla charity/donation message */
.checkout-page [class*="charity"],
.checkout-page [class*="donation"],
.checkout-page [class*="giving"],
body [class*="charity"],
body [class*="donation"] {
    display: none !important;
}


/* =========================================================
   MAGIC — CHECKOUT CHARITY MESSAGE REMOVAL
   Arabic + English | Desktop + Mobile
   Confirmed from checkout DOM
   ========================================================= */

/* Checkout footer donation/charity message shown after payment process */
#payment_process ~ .footer-text-wrapper:has(.list--brands),
#payment_process + .footer-text-wrapper:has(.list--brands){
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

/* Fallback for Salla checkout structure */
body:has(#payment_process) .footer-text-wrapper:has(.list--brands){
    display:none !important;
}

/* =========================================================
   MAGIC — HERO VIDEO FINAL FIX
   Desktop: full 16:9 frame (1920x1080 ratio), no crop.
   Mobile: show the complete video, no crop and no stretching.
   ========================================================= */

/* Desktop / tablet */
#video-bg-0.s-block--video-bg,
#video-bg-0,
section#video-bg-0 {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #000 !important;
}

#video-bg-0 video,
#video-bg-0 .video-bg,
#video-bg-0 .video-bg video,
#video-bg-0 .s-block--video-bg__video,
#video-bg-0 [class*="video"] video {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  margin: 0 !important;
}

/* Mobile: preserve the entire original 16:9 video */
@media (max-width: 767px) {
  #video-bg-0.s-block--video-bg,
  #video-bg-0,
  section#video-bg-0 {
    width: 100% !important;
    height: 56.25vw !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
  }

  #video-bg-0 video,
  #video-bg-0 .video-bg,
  #video-bg-0 .video-bg video,
  #video-bg-0 .s-block--video-bg__video,
  #video-bg-0 [class*="video"] video {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}