@import url(https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap);body :not(i){font-family:Tajawal,sans-serif}body{background-size:cover!important}:root{--main-color:#f2c61a;--second-color:#191503;--white-color:#fff;--black-color:#000}.index section.s-block.s-block--fixed-banner,.index section.s-block.s-block--fixed-banner .container{width:100%!important;padding:0!important;max-width:100%!important}.mm-ocd--open .mm-ocd__content{background:var(--second-color)}.mm-ocd--open .mm-ocd__content::before{background:#000 url(https://cdn.files.salla.network/homepage/459021013/23a89805-c2ce-475b-8bc6-13114ded9e18_1000x400.webp);content:"";width:100%;background-repeat:no-repeat;background-size:contain;background-position:center;margin:auto;height:28%;min-height:140px;justify-content:center;display:flex}.mm-spn li{background:0 0!important}.mm-spn.mm-spn--navbar:after{opacity:1}.mm-spn.mm-spn--navbar ul .swiper-pointer-events{display:none!important}.mm-spn li a,.mm-spn li span{color:var(--main-color)!important}.index>div.app-inner.flex.flex-col.min-h-full>section:nth-child(3){margin-top:0!important}:is([dir=rtl] .mm-spn.mm-spn--navbar.mm-spn--main):after{border:none!important;background:var(--main-color);color:var(--second-color);font-weight:800!important;text-align:right}@keyframes slide{100%{background-position:50rem}}.s-product-card-content-footer salla-add-product-button .s-button-outline{border-radius:10px;text-align:center;background:var(--main-color);justify-content:center;display:flex;align-items:center;background-image:linear-gradient(90deg,var(--main-color) 0,var(--second-color) 100%);animation:10s linear infinite slide}.angel-feature.flex-center.flex-col{box-shadow:5px 5px 10px #f2c61e54;padding-bottom:18px!important;WIDTH:90%},.cart .nav-header.py-6.px-4.flex.flex-col.bg-gray-100.da-bgg.relative,.product-index .nav-header.py-6.px-4.flex.flex-col.bg-gray-100.da-bgg.relative *,.store-footer__inner *{color:var(--white-color)!important}.product-single .feature-desc h3,.product-single .feature-icon i{color:#fff!important}section.s-block.s-block--features.angel-features.\31 .py-8.angel_anime.animate__.animate__fadeIn .lg\:gap-4{align-items:center}.cart .nav-header.py-6.px-4.flex.flex-col.bg-gray-100.da-bgg.relative,.product-index .nav-header.py-6.px-4.flex.flex-col.bg-gray-100.da-bgg.relative{background:#0b0b06!important}@keyframes pulsate-bck{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}.cart .shadow-default.rounded-md.mt-5.md\:mb-5.transition-height.duration-1000.overflow-hidden{justify-content:center;align-items:center;display:flex}.product-single section.p-block--features.mt-4 .p--features__item.flex.flex-center.gap-2.px-2.py-3.bg-white.da-bgg.rounded-md.angel_anime.animate__.animate__fadeIn{box-shadow:5px 5px 10px #f2c61e54}.da-bgg.relative.md\:mb-6,.dark .product-single .details,.dark .product-single .tabs-wrapper,.product-single .flex.flex-col.bg-gray-100.da-bgg.relative.md\:mb-6,.product-single section.p-block--features.mt-4 .p--features__item.flex.flex-center.gap-2.px-2.py-3.bg-white.da-bgg.rounded-md.angel_anime.animate__.animate__fadeIn{background:var(--second-color)!important}
section .square-grid{ grid-template-columns: repeat(4, minmax(0, 1fr));}
#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--fixed-banner.wide-placeholder.angel_anime.animate__.animate__fadeIn > div > a > img{  width: 60%;
    margin: 0 auto;}
.s-angel--divider.xl-title h2{font-size: 1.6rem;}
@media only screen and (max-width: 768px) {
#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--fixed-banner.wide-placeholder.angel_anime.animate__.animate__fadeIn > div > a > img {
    width: 100%;
    margin: 0 auto;}
section .square-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.s-angel--divider.xl-title h2 {font-size: 1rem; !important}}
#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--faqs.angel_anime.animate__.animate__fadeIn > div > div.faqs-list.grid.items-start.grid-cols-1.md\:grid-cols-2.gap-4 > div > div > label{font-family: Tajawal !important;}
.angel-feature.flex-center.flex-col {
    padding-bottom: 18px !important;
    border: 8px solid;
    border-image: repeating-linear-gradient(135deg, #F8CA00 0 10px, #ffffff 0 20px, #712424 0 30px) 8;
    -webkit-mask: conic-gradient(from 180deg at top 8px right 8px, #0000 90deg, #000 0) var(--_i, 200%) 0 / 200% var(--_i, 8px) border-box no-repeat, conic-gradient(at bottom 8px left 8px, #0000 90deg, #000 0) 0 var(--_i, 200%) / var(--_i, 8px) 200% border-box no-repeat, linear-gradient(#000 0 0) padding-box no-repeat;
    transition: .3s, -webkit-mask-position .3s .3s;
}
.angel-feature.flex-center.flex-col:hover {
  --_i: 100%;
  color: #CC333F;
  transition: .3s, -webkit-mask-size .3s .3s;
}
.banner-square .box-img img:hover{transform:scale(1.2)}
.dark li .mm-spn--open {background:#14141A !important}
    border-radius: 10px;}
.s-add-product-button-mini-checkout-content{display:flex}
.s-add-product-button-mini-checkout-content svg{fill:#ebc322}

/* SVRD Navbar — CSS only (no custom JS) */

:root {
  --svrd-nav-top: 12px;
  --svrd-nav-side: 14px;
  --svrd-nav-height: 56px;
  --svrd-nav-radius: 16px;
  --svrd-nav-gap: 14px;
}

/* Push page content below the floating navbar */
.app-inner {
  padding-top: calc(var(--svrd-nav-top) + var(--svrd-nav-height) + var(--svrd-nav-gap)) !important;
}

/* Outer shell: floating fixed bar
   height only on the bar — overflow must stay visible so menus can open */
.store-header,
.store-header.fixed-sticky,
.store-header.fixed-sticky.is_large,
.store-header.fixed-sticky.scrolled,
.store-header.fixed-sticky.sticky,
.store-header.fixed-sticky.is-sticky {
  position: fixed !important;
  top: var(--svrd-nav-top) !important;
  left: var(--svrd-nav-side) !important;
  right: var(--svrd-nav-side) !important;
  width: auto !important;
  height: var(--svrd-nav-height) !important;
  min-height: var(--svrd-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 1000 !important;
  background: transparent !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

.store-header #mainnav,
.store-header.fixed-sticky #mainnav,
.store-header.fixed-sticky.is_large #mainnav,
#mainnav.main-nav-container {
  height: var(--svrd-nav-height) !important;
  min-height: var(--svrd-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Glass pill — do NOT use overflow:hidden (clips user menu dropdown) */
.store-header .header-inner {
  height: var(--svrd-nav-height) !important;
  min-height: var(--svrd-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  background: rgba(20, 20, 26, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(242, 198, 30, 0.3) !important;
  border-radius: var(--svrd-nav-radius) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.store-header .header-container {
  max-width: 100% !important;
  padding-inline: 18px !important;
  overflow: visible !important;
}

.store-header .header-container,
.store-header .header-container > .flex {
  height: var(--svrd-nav-height) !important;
  min-height: var(--svrd-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: center !important;
}

/* User menu: desktop only — relative dropdown under trigger */
@media (min-width: 1025px) {
  .store-header salla-user-menu,
  .store-header .s-user-menu-wrapper,
  .store-header .s-user-menu-trigger-slot,
  .store-header .s-user-menu-toggler {
    overflow: visible !important;
    position: relative !important;
    z-index: 1100 !important;
  }

  .store-header .s-user-menu-dropdown {
    z-index: 1101 !important;
  }
}

/* User menu: tablet + mobile — fixed panel, not trapped in navbar */
@media (max-width: 1024px) {
  /* backdrop-filter creates a containing block and breaks fixed menus */
  .store-header .header-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .store-header salla-user-menu,
  .store-header .s-user-menu-wrapper {
    overflow: visible !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    z-index: 2100 !important;
  }

  .store-header .s-user-menu-trigger-slot {
    position: relative !important;
    z-index: 2101 !important;
  }

  .store-header .s-user-menu-toggler {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .store-header .s-user-menu-toggler.opened {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2100 !important;
  }

  .store-header .s-user-menu-dropdown {
    position: fixed !important;
    top: calc(var(--svrd-nav-top) + var(--svrd-nav-height) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(75vh, 560px) !important;
    overflow: auto !important;
    z-index: 2101 !important;
    border-radius: 12px !important;
  }

  .store-header salla-user-menu .s-user-menu-trigger-slot,
  .store-header salla-user-menu .s-user-menu-trigger {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex: 0 0 32px !important;
  }

  .store-header salla-user-menu .s-user-menu-trigger-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}

.store-header .header-container > .flex > div:last-child {
  gap: 8px !important;
}

/* Hide Angel extras */
.store-header #back-Btn,
.store-header .mburger p {
  display: none !important;
}

.store-header .navbar-brand {
  padding: 0 !important;
}

.store-header .navbar-brand img {
  height: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
  transform: none !important;
  transition: none !important;
}

/* Icon buttons */
.store-header .mburger,
.store-header .header-btn,
.store-header .s-cart-summary-wrapper,
.store-header .header-cart,
.store-header #s-cart-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.store-header .mburger,
.store-header .header-btn,
.store-header .s-cart-summary-wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(242, 198, 30, 0.24) !important;
  margin: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.store-header .mburger:hover,
.store-header .header-btn:hover,
.store-header .s-cart-summary-wrapper:hover {
  background: rgba(242, 198, 30, 0.14) !important;
  border-color: rgba(242, 198, 30, 0.55) !important;
}

.store-header .mburger i {
  color: #f2c61e !important;
  font-size: 21px !important;
}

.store-header .header-btn i,
.store-header .s-cart-summary-wrapper i,
.store-header #s-cart-icon svg {
  color: #fff !important;
  fill: #fff !important;
  font-size: 17px !important;
}

.store-header #s-cart-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.store-header .header-btn:hover i,
.store-header .s-cart-summary-wrapper:hover i {
  color: #f2c61e !important;
}

.store-header .s-cart-summary-wrapper {
  position: relative !important;
}

.store-header .s-cart-summary-content {
  display: none !important;
}

.store-header .s-cart-summary-count {
  position: absolute !important;
  top: -5px !important;
  inset-inline-end: -5px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #f2c61e !important;
  color: #111116 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 16px !important;
  text-align: center !important;
  border: 1px solid #111116 !important;
}

/* Kill Angel scroll sticky on #mainnav (this caused the jump to top) */
#mainnav.fixed-pinned,
#mainnav.fixed-header,
.main-nav-container.fixed-pinned,
.main-nav-container.fixed-header {
  height: var(--svrd-nav-height) !important;
  min-height: var(--svrd-nav-height) !important;
  max-height: none !important;
  overflow: visible !important;
}

#mainnav.fixed-pinned .inner,
#mainnav.fixed-pinned .header-inner,
#mainnav.fixed-header .inner,
#mainnav.fixed-header .header-inner,
.main-nav-container.fixed-pinned .inner,
.main-nav-container.fixed-pinned .header-inner,
.main-nav-container.fixed-header .inner,
.main-nav-container.fixed-header .header-inner,
.main-nav-container.animated .inner,
.main-nav-container.fixed-pinned.animated .inner,
.main-nav-container.fixed-header.animated .inner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32) !important;
}

@media (max-width: 1024px) {
  #mainnav.fixed-pinned .inner,
  #mainnav.fixed-pinned .header-inner,
  #mainnav.fixed-header .inner,
  #mainnav.fixed-header .header-inner,
  .main-nav-container.fixed-pinned .inner,
  .main-nav-container.fixed-header .inner {
    top: auto !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  :root {
    --svrd-nav-top: 10px;
    --svrd-nav-side: 10px;
    --svrd-nav-height: 52px;
    --svrd-nav-radius: 14px;
    --svrd-nav-gap: 12px;
  }

  .store-header .header-container {
    padding-inline: 10px !important;
  }

  .store-header .navbar-brand img {
    height: 34px !important;
    max-height: 34px !important;
  }

  .store-header .mburger,
  .store-header .header-btn,
  .store-header .s-cart-summary-wrapper,
  .store-header .header-cart,
  .store-header #s-cart-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
  }
}

/* Mobile menu must sit above the floating navbar */
.mm-ocd,
.mm-ocd.mm-ocd--open {
  z-index: 2000 !important;
}

.mm-ocd__backdrop {
  z-index: 1999 !important;
}

/* SVRD hero-banner: max_width desktop setting must not break mobile */
@media (max-width: 767px) {
  .s-block--bundle-hero-banner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .s-block--bundle-hero-banner salla-custom-component[component-name="hero-banner"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

/* SVRD hero CTA — smooth scroll to next section / categories */
html {
  scroll-behavior: smooth;
}

#svrd-next,
#svrd-categories {
  scroll-margin-top: 90px;
}

/* Category pages: 3 product cards per row — mobile only */
@media (max-width: 767px) {
  .product-index .s-products-list-wrapper.s-products-list-vertical-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .product-index .s-products-list-wrapper.s-products-list-vertical-cards > custom-salla-product-card,
  .product-index .s-products-list-wrapper.s-products-list-vertical-cards > .s-product-card-entry {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/*
  Product page mobile TEST layout (Angel real DOM):
  Parent:  #product-* .flex.flex-col.items-start.md:flex-row
  Photo:   .sidebar > .details-slider (45%)
  Meta:    .main-content > title / .price / .product-availablity / .main-categoty
  Rest:    .main-content > form and everything else (full width under)
*/
@media (max-width: 767px) {
  .product-single [id^="product-"].flex.flex-col.items-start {
    display: grid !important;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr) !important;
    column-gap: 0.5rem !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding-inline: 0.75rem !important;
    width: 100% !important;
  }

  /* Photo column */
  .product-single [id^="product-"] > .sidebar {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    align-self: start !important;
  }

  .product-single [id^="product-"] > .sidebar .wish-share {
    transform: scale(0.85);
    transform-origin: bottom left;
  }

  /* Don’t force a square frame — that caused black bars on the sides */
  .product-single [id^="product-"] > .sidebar .details-slider,
  .product-single [id^="product-"] > .sidebar .image-slider,
  .product-single [id^="product-"] > .sidebar .swiper,
  .product-single [id^="product-"] > .sidebar .swiper-wrapper,
  .product-single [id^="product-"] > .sidebar .swiper-slide,
  .product-single [id^="product-"] > .sidebar .magnify-wrapper,
  .product-single [id^="product-"] > .sidebar .relative {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }

  .product-single [id^="product-"] > .sidebar img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Flatten main-content so its children join the parent grid */
  .product-single [id^="product-"] > .main-content {
    display: contents !important;
  }

  /* Hide empty hooks so they don't steal grid rows */
  .product-single [id^="product-"] .main-content > salla-hook {
    display: none !important;
  }

  /* Default: everything from main-content is full width under the row */
  .product-single [id^="product-"] > .main-content > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Meta beside photo — one solid card, no gaps between rows */
  .product-single [id^="product-"] > .main-content > .flex.flex-col,
  .product-single [id^="product-"] > .main-content > .price,
  .product-single [id^="product-"] > .main-content > .product-availablity,
  .product-single [id^="product-"] > .main-content > .main-categoty {
    grid-column: 2 !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0.15rem 0.5rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .product-single [id^="product-"] > .main-content > .flex.flex-col {
    padding-top: 2.5rem !important;
  }

  .product-single [id^="product-"] > .main-content > .price {
    padding-bottom: 0 !important;
  }

  .product-single [id^="product-"] > .main-content > .product-availablity {
    padding-top: 0 !important;
  }

  .product-single [id^="product-"] > .main-content > .main-categoty {
    padding-bottom: 2rem !important;
    flex-wrap: wrap !important;
    gap: 0.15rem !important;
  }

  .product-single [id^="product-"] > .main-content > .flex.flex-col h1 {
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: #fff !important;
  }

  .product-single [id^="product-"] > .main-content > .price .total-price {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--main-color, #f2c61a) !important;
  }

  .product-single [id^="product-"] > .main-content > .product-availablity {
    gap: 0.3rem !important;
  }

  .product-single [id^="product-"] > .main-content > .product-availablity strong {
    font-size: 0.75rem !important;
    padding: 0.12rem 0.4rem !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, 0.18) !important;
  }

  .product-single [id^="product-"] > .main-content > .main-categoty p,
  .product-single [id^="product-"] > .main-content > .main-categoty a {
    font-size: 0.7rem !important;
    margin: 0 !important;
  }

  .product-single [id^="product-"] > .main-content > .main-categoty a {
    color: var(--main-color, #f2c61a) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  /* Options block under the row — give it breathing room */
  .product-single [id^="product-"] > .main-content > .form.product-form,
  .product-single [id^="product-"] > .main-content > form.product-form {
    margin-top: 0.75rem !important;
  }
}
.s-product-options-thumbnails-wrapper div p{
  color:white !important
}