@font-face {
  font-family: 'DINNextArabic';
  src: url('https://alfont.com/wp-content/fonts/new-arabic-fonts//alfont_com_AlFont_com_DINNextLTArabic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

* {
  font-family: 'DINNextArabic', sans-serif !important;
}
body {
  background: #FCFCFD  !important;
}
.tp-bar.tp-bar-header {
    height: 60px;
}
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .tp-feature-area .tp-feature-items {
      grid-template-columns: repeat(1, 1fr) !important;
      row-gap: 20px;
  }

  [section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"]  .feature-box {

  flex-direction: row !important; 

  padding: 0 !important;
}

.cart-badge {
    background-color: #D9251D !important;
}
/* ===== TOP BAR (.tp-bar) — badge + text + CTA as one unit (DOM built by JS) ===== */

/* Theme often sets the link to width:100% + space-between — keep children grouped */
.tp-bar.tp-bar-header .tp-mask .tp-marquee a.tp-bar-item,
.tp-bar .tp-marquee a.tp-bar-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  vertical-align: middle !important;
}

.tp-bar-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}


.tp-bar-badge {
  display: block !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: var(--ab-img-h-d, 26px) !important;
  object-fit: contain !important;
  animation: tp-bar-blink 1s ease infinite !important;
}

.tp-bar-text {
  flex: 0 0 auto !important;
  display: inline-block !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

/* Line 1: "ضمان ذهبي" — bigger, bold */
.tp-bar-title {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  text-align: start ;
}

/* Line 2: rest of the sentence — smaller, italic */
.tp-bar-sub {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  opacity: 1 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

/* Badge image: blink (fade out/in) */
@keyframes tp-bar-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* CTA: pulse (scale up/down) */
@keyframes tp-bar-pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}


.tp-bar-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  min-width: 70px !important;
  width: auto !important;
  height: 28px !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  animation: tp-bar-pulse 1s ease-in-out infinite alternate !important;
}


/* Marquee track: one compact item, not full-width stretched children */
.tp-bar.tp-bar-header .tp-mask .tp-marquee,
.tp-bar .tp-marquee {
  display: inline-flex !important;
  align-items: center !important;
  width: max-content !important;
  flex-shrink: 0 !important;
}

.tp-bar.tp-bar-header .tp-mask,
.tp-bar .tp-mask {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Static bar (stop-move): centered like Figma, hide duplicate marquee copy */
.tp-bar.stop-move .tp-mask {
  justify-content: center !important;
}

.tp-bar.stop-move .tp-marquee {
  width: auto !important;
  min-width: 0 !important;
}

.tp-bar.stop-move .tp-mask > .tp-marquee:nth-child(2) {
  display: none !important;
}

@media (max-width: 767.98px) {
  .tp-bar-badge {
    height: 40px !important;
  }

  .tp-bar-text {
    font-size: 12px !important;
  }
}




/* ===== FIGMA PRODUCT CARD — section a31a80d8 only ===== */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-home .products-grid {
    display: block !important;}
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] {
  --tp-figma-green: #00a651;
  --tp-figma-navy: #282c5c;
  --tp-figma-red: #e53935;
  --tp-figma-grey: #667085;
  --tp-figma-tag-bg: #f2f4f7;
  --tp-figma-discount-bg: #fde8e8;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-title-section {
  text-align: center !important;
  margin-bottom: 18px !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-title-section h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  color: #000 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-title-section p {
  font-size: 14px !important;
  margin: 0 !important;
  color: var(--tp-figma-grey) !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .products-grid {
  max-width: 420px;
  margin: 0 auto;
   display: block !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-box {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #eaecf0 !important;
  background: #fff !important;
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.08) !important;
  position: relative !important;
  overflow: visible !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-box:hover {
  box-shadow: 0 8px 32px rgba(16, 24, 40, 0.12) !important;
  transform: none !important;
  overflow: visible !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-box:hover .img-2,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .box-img-product.img-2 {
  display: none !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-product-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .img-and-btns {
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-figma-visual {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .img-and-btns .footer-btns {
  display: none !important;
}

/* Swiper removed in JS — safety hide if still in DOM */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-card-images-swiper,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-card-images-swiper *,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-card-swiper-nav,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-card-swiper-pagination {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  opacity: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] a.tp-figma-product-link {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-main-stage {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 420px !important;
  overflow: hidden !important;
  background: #f9fafb !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-main-image,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .box-img-product.img-1 img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 420px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-image-mode-cover .tp-main-image,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-image-mode-cover img.tp-main-image {
  position: static !important;
  inset: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .box-img-product.img-1 {
  display: block !important;
  width: 100% !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}



/* Wishlist */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .add-to-wishlist {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 4 !important;
  opacity: 1 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .add-to-wishlist button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #98a2b3 !important;
    cursor: pointer !important;
}

/* Free delivery ribbon */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-free-delivery {
  position: absolute;
  top: 40px;
  left: -5px;
  z-index: 3;
  background: var(--tp-figma-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 10px 6px 14px;
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.12);
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-free-delivery::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  border-width: 5px 0 0 6px;
  border-style: solid;
  border-color:  var(--tp-figma-green)  transparent transparent transparent;
}

/* Thumbnails */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumbs-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  direction: rtl;
  -webkit-overflow-scrolling: touch;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumbs-row::-webkit-scrollbar {
  display: none;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumb-btn {
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumb-btn.active,
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumb-btn:hover {
  border-color: var(--tp-figma-navy);
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumb-btn:active {
  transform: scale(0.96);
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-thumb-item {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Green ticker */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma {
  width: 100%;
  overflow: hidden;
  background: var(--tp-figma-green);
  direction: ltr;
  margin-top: 0;
  height: 32px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma .tp-card-ticker-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  animation: tp-figma-ticker-scroll 16s linear infinite;
  will-change: transform;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma:hover .tp-card-ticker-track {
  animation-play-state: paused;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma .tp-card-ticker-item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  direction: rtl;
  padding: 0 8px;
  flex-shrink: 0;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma .tp-card-ticker-star {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 10px;
  opacity: 0.95;
  padding: 0 6px;
  flex-shrink: 0;
}

@keyframes tp-figma-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Meta row: sold + rating */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding:0;
  direction: rtl;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-sold-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: #e55a00;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #00838f;
  direction: rtl;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-row svg {
  color: #f5a623;
  flex-shrink: 0;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-score {
  font-weight: 700;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-count {
  color: var(--tp-figma-grey);
  font-weight: 500;
}

/* Content */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper {
  padding: 8px 12px 12px !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  margin: 8px 0 6px !important;
  color: #101828 !important;
  text-align: center !important; 
}
.product-box .tp-content-product.tp-content-product--meta {
    display: flex;
    text-align: center;
    justify-content: center;
}
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  direction: rtl;
  margin-bottom: 8px;
  justify-content: center !important;
}
h1.title-product {
    text-align: center;
}
.col-product-info .price-product {
    width: max-content;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.tp-extra-info .tp-extra-viewers {
    justify-content: center;
}
.div-product-weight {
      width: 100%;
    justify-content: center;
}

.col-product-info .product-description * {
   

    text-align: center;
}
.quantity-add-cart, .quantity-style-2 {
    margin-bottom: 12px;
    justify-content: center;
}
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--tp-figma-tag-bg);
  color: #344054;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-product--meta {
  pointer-events: none;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-price-product {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 4px 0 10px !important;
  direction: rtl;
  justify-content: start !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-price-product .price-new {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #AE1E17 !important;
  margin: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-price-product .price-old {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #98a2b3 !important;
  text-decoration: line-through !important;
  margin: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-discount-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--tp-figma-discount-bg);
  color: var(--tp-figma-red);
  font-size: 11px;
  font-weight: 700;
}

/* CTA button */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper .footer-btns {
  display: flex !important;
  margin: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper .footer-btns .product-card-add-to-cart {
  width: 100% !important;
  padding: 12px 0 !important;
  background: var(--tp-figma-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background 0.2s !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper .footer-btns .product-card-add-to-cart:hover {
  background: #1e2248 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-content-wrapper .footer-btns .product-card-add-to-cart svg {
  width: 20px;
  height: 20px;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .bundle-offer-badge {
  display: none !important;
}
/* ===== Rating Box ===== */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: #f2f4f7 !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  direction: rtl !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-score {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #00a651 !important;
  line-height: 18px !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-star-icon {
  display: inline-flex !important;
  align-items: center !important;
  order: -1;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-rating-count {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #344054 !important;
  line-height: 18px !important;
}

/* إخفاء الـ rating-wrapper الأصلي لو فضل في DOM */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .product-card-rating-wrapper {
  display: none !important;
}

/* ticker */
[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma .tp-card-ticker-sep {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  flex-shrink: 0 !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma .tp-card-ticker-sep svg {
  display: block !important;
  filter: drop-shadow(0 0 2px rgba(255,215,0,0.5)) !important;
}

[section-id="a31a80d8-0466-4114-9497-33f6791f3e3d"] .tp-card-ticker--figma .tp-card-ticker-star {
  display: none !important;
}





  /* about store*/
/* القائمة كلها */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .tp-feature-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
}

/* الكارت */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .feature-box {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;

    padding: 16px !important;
    border-radius: 12px;
    background: #fff;

    text-align: right !important;
}

/* الأيقونة */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .feature-box .icon {
    width: 44px;
    height: 44px;
    min-width: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* حجم الأيقونة */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .feature-box .icon img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
}

/* المحتوى */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .feature-box .content {
    flex: 1;
    text-align: right;
}

/* العنوان */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .feature-box .title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 4px;
}

/* الوصف */
[section-id="9004b9ec-0b4f-4413-a931-6ca66324d3ee"] .feature-box p {
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
.feature-box::after {

    width: 0px !important;
    
}
    .product-box .footer-btns .product-card-add-to-cart, .product-box .footer-btns a {
        font-size: 14px;
        border-radius: 10px !important;
    }

.href {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    min-width: 128px !important;
    height: 32px !important;

    padding: 8px 16px !important;
    gap: 8px !important;

    border-radius: 8px !important;
    background: #26265C !important;
    color: #fff !important;
    text-decoration: none !important;

    white-space: nowrap !important;
  margin-bottom: 10px;
}

.href svg {
     width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;

 
}

.href svg * {
    stroke: #fff !important;
}
.tp-footer-widget-content {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.footer-accordion-toggle::after{
    display:none !important;
}.footer-accordion-toggle{
    display:none !important;
}
.footer {
    background: #26265C !important;
    border-radius: 14px;
}
.tp-footer-area {
    background-color: #26265C !important;
    color: white !important;
    text-align: center !important;
    border: none !important;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 1;}
.certificates {
   
    flex-wrap: nowrap !important;
}
.tp-footer-widget-content {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
}
.tp-footer-bottom {
    background: transparent !important;
}









/* =========================================================================
   FOOTER — "مركز المساعدة" help box + mobile stacked/centered redesign
   ---------------------------------------------------------------------------
   - The help box (phone / email / WhatsApp icons) shows on ALL screens
     (mobile + desktop) with the same shape, replacing the plain text
     phone/email inside the contact column.
   - The box DOM is built by footer.js (tpFooterEnhanceBoot). Pair this file
     with footer.js.
   - Desktop keeps its columns. Mobile (<=991.98px) stacks everything
     centered and restyles social icons as rounded squares.
   - Selectors use html body + !important so they win regardless of the
     order theme CSS loads in.
   ========================================================================= */

/* Help Center box — visible on every screen, same shape ------------------- */
html body .tp-footer-area .tp-help-center {
  display: block !important;
  max-width: 360px;
  margin: 10px auto 4px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

/* Replace phone/email text + the "تواصل معنا" heading with the box --------- */
html body .tp-footer-area .tp-footer-talk,
html body .tp-footer-area .tp-footer-contact-item.show-email {
  display: none !important;
}
html body .tp-footer-area button[aria-controls="footer-acc-contact"] {
  display: none !important;
}

/* Keep the contact panel open so the box is always visible (incl. desktop) */
html body .tp-footer-area #footer-acc-contact.collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}

.tp-footer-area .tp-help-center-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}

.tp-footer-area .tp-help-center-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.tp-footer-area .tp-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.tp-footer-area .tp-help-icon:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.tp-footer-area .tp-help-icon svg {
  width: 22px;
  height: 22px;
}

/* =========================================================================
   MOBILE (<=991.98px) — stack + center everything
   ========================================================================= */
@media (max-width: 991.98px) {
  .tp-footer-area .tp-footer-widget,
  .tp-footer-area .tp-footer-widget-content {
    text-align: center !important;
  }

  .tp-footer-area .tp-footer-top .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .tp-footer-area .tp-footer-top .row > [class*="col-"] {
    width: 100% !important;
    max-width: 480px !important;
    flex: 0 0 auto !important;
  }

  /* Reorder: logo/desc/certs -> help center + social -> links */
  .tp-footer-area .tp-footer-top .row > div:nth-child(1) {
    order: 1;
  }
  .tp-footer-area .tp-footer-top .row > div:nth-child(3) {
    order: 2;
  }
  .tp-footer-area .tp-footer-top .row > div:nth-child(2) {
    order: 3;
  }

  /* Force every accordion content open (no collapsing on mobile) */
  .tp-footer-area .footer-accordion-item .tp-footer-widget-content.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* Logo centered */
  .tp-footer-area .tp-footer-logo {
    text-align: center !important;
  }
  .tp-footer-area .tp-footer-logo img {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Description centered */
  .tp-footer-area .tp-footer-desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 420px !important;
  }

  /* Certificates row centered */
  .tp-footer-area .certificates {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    margin-top: 14px !important;
  }
  .tp-footer-area .certificates .maroof-icon {
    margin: 0 !important;
  }

  /* "روابط تهمك" title -> static centered heading */
  .tp-footer-area .tp-footer-widget-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  /* Links list centered */
  .tp-footer-area .footer-accordion-item .tp-footer-widget-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .tp-footer-area .footer-accordion-item .tp-footer-widget-content ul li {
    text-align: center !important;
  }

  /* ----- Social icons as rounded squares ----- */
  .tp-footer-area .tp-footer-social {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 6px auto 0 !important;
  }
  .tp-footer-area .tp-footer-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .tp-footer-area .tp-footer-social a:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-2px);
  }
  .tp-footer-area .tp-footer-social a svg {
    width: 24px !important;
    height: 24px !important;
  }
  /* Globe/website icon not part of the target design on mobile */
  .tp-footer-area .tp-footer-social a[aria-label="Website"] {
    display: none !important;
  }

  /* ----- Bottom bar centered ----- */
  .tp-footer-area .tp-footer-bottom-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
  }
  .tp-footer-area .tp-footer-payment {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

/* =========================================================================
   BRANDS / "الجهات المرخصة" — section e49926e9
   CSS-only: show the 3 brand logos as fixed cards in a single centered row.
   The slider is frozen purely via `transform: none !important` (no JS needed).
   Cards are enlarged so each logo stays fully visible & legible.
   ========================================================================= */
[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .tp-brands-swiper {
  opacity: 1 !important;
  overflow: visible !important;
}

[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
}

[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .swiper-slide {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 160px !important;
  height: auto !important;
  margin: 0 !important;
}

[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .tp-brand-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 160px !important;
  height: 128px !important;
  padding: 12px 8px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .tp-brand-thumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .tp-brand-thumb a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .tp-brand-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* Empty titles add nothing — keep cards clean */
[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .tp-brand-title {
  display: none !important;
}

/* Hide leftover swiper scrollbar */
[section-id="e49926e9-2ad6-4728-87b6-284d1e46bdd2"] .swiper-scrollbar {
  display: none !important;
}

/**
   * تفاصيل المنتج — استبدال الـ rotator المتحرك (تقييم/مبيعات/مشاهدات بالتناوب)
   * ببلوك ثابت يعرض الثلاثة مع بعض:
   *   صف 1: عدد المشاهدين (يتحدّث live من السكربت الأصلي).
   *   صف 2: تقييم المنتج + عدد مرات البيع.
   * الأرقام كلها تتسحب من الـ rotator الأصلي. التنسيق في ملف الـ CSS.
   */
  document.addEventListener("DOMContentLoaded", function () {
    tpExtraInfoBoot();
  });

  if (document.readyState !== "loading") {
    tpExtraInfoBoot();
  }

  function tpExtraInfoBoot() {
    "use strict";
    if (tpExtraInfoBoot._done) return;
    tpExtraInfoBoot._done = true;

    var RATING_LABEL =
      "\u062A\u0642\u064A\u064A\u0645 \u0627\u0644\u0645\u0646\u062A\u062C"; /* تقييم المنتج */

    var EYE_SVG =
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
      '<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z"/>' +
      '<circle cx="12" cy="12" r="3"/>' +
      "</svg>";

    var STAR_SVG =
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">' +
      '<path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 18.6 6.1 21.3l1.2-6.6L2.5 9.5l6.6-.9L12 2.5z"/>' +
      "</svg>";

    var FIRE_SVG =
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">' +
      '<path d="M13.8561 22C26.0783 19 19.2338 7 10.9227 2C9.9453 5.5 8.47838 6.5 5.54497 10C1.66121 14.6339 3.5895 20 8.96719 22C8.1524 21 6.04958 18.9008 7.5 16C8 15 9 14 8.5 12C9.47778 12.5 11.5 13 12 15.5C12.8148 14.5 13.6604 12.4 12.8783 10C19 14.5 16.5 19 13.8561 22Z"/>' +
      "</svg>";

    function txt(el) {
      return el ? (el.textContent || "").replace(/\s+/g, " ").trim() : "";
    }

    function buildOne(rotator) {
      if (!rotator || rotator.dataset.tpExtraBuilt) return;

      var ratingAvg = txt(rotator.querySelector(".product-rating-average"));
      var ratingCount = txt(
        rotator.querySelector(".product-card-rating-count")
      );
      var soldText =
        txt(rotator.querySelector(".sold-count .lang")) ||
        txt(rotator.querySelector(".product-count .lang"));
      var viewersEl = rotator.querySelector(".viewers-text");
      var viewersText = txt(viewersEl);

      if (!ratingAvg && !soldText && !viewersText) return;

      var box = document.createElement("div");
      box.className = "tp-extra-info";

      var html = "";

      if (viewersText) {
        html +=
          '<div class="tp-extra-viewers">' +
          EYE_SVG +
          '<span class="tp-extra-viewers-text">' +
          viewersText +
          "</span></div>";
      }

      html += '<div class="tp-extra-row2">';

      if (ratingAvg) {
        html +=
          '<div class="tp-extra-rating">' +
          STAR_SVG +
          '<span class="tp-extra-rating-label">' +
          RATING_LABEL +
          "</span>" +
          '<span class="tp-extra-rating-value">' +
          ratingAvg +
          "</span>";
        if (ratingCount) {
          html +=
            '<span class="tp-extra-rating-count">' + ratingCount + "</span>";
        }
        html += "</div>";
      }

      if (soldText) {
        html +=
          '<div class="tp-extra-sold"><span class="tp-extra-sold-text">' +
          soldText +
          "</span>" +
          FIRE_SVG +
          "</div>";
      }

      html += "</div>";

      box.innerHTML = html;

      rotator.parentNode.insertBefore(box, rotator.nextSibling);
      rotator.dataset.tpExtraBuilt = "1";

      /* مزامنة عدد المشاهدين مع السكربت الأصلي (اللي بيحدّث الرقم باستمرار) */
      if (viewersEl) {
        var target = box.querySelector(".tp-extra-viewers-text");
        if (target) {
          var sync = function () {
            var t = txt(viewersEl);
            if (t && t !== target.textContent) target.textContent = t;
          };
          var vObs = new MutationObserver(sync);
          vObs.observe(viewersEl, {
            childList: true,
            characterData: true,
            subtree: true,
          });
        }
      }
    }

    function build() {
      document
        .querySelectorAll(".product-extra-info-rotator")
        .forEach(buildOne);
    }

    build();
    window.addEventListener("load", build);
    setTimeout(build, 800);
    setTimeout(build, 1800);

    var root = document.querySelector(".col-product-info") || document.body;
    if (root) {
      var rootObserver = new MutationObserver(build);
      rootObserver.observe(root, { childList: true, subtree: true });
    }
  }


/* =========================================================================
   PRODUCT EXTRA INFO — replace the rotating (animated) rotator with a static
   block showing all three at once: viewers (row 1), then rating + sold (row 2).
   The original .product-extra-info-rotator is hidden; .tp-extra-info is built
   by tpExtraInfoBoot() in the JS file and pulls its numbers from the original.
   ========================================================================= */
/* Hide the original rotator ONLY after JS has built the static replacement
   (class added by JS). If JS doesn't run, the original stays visible — never blank. */
.product-extra-info-rotator.tp-extra-done {
  display: none !important;
}

.tp-extra-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  direction: rtl !important;
  text-align: right !important;
  margin: 10px 0 14px !important;
}

.tp-extra-info .tp-extra-viewers {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #344054 !important;
}

.tp-extra-info .tp-extra-viewers svg {
  width: 20px !important;
  height: 20px !important;
  color: #667085 !important;
  flex-shrink: 0 !important;
}

.tp-extra-info .tp-extra-row2 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.tp-extra-info .tp-extra-rating,
.tp-extra-info .tp-extra-sold {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.tp-extra-info .tp-extra-rating {
  color: #344054 !important;
}

.tp-extra-info .tp-extra-rating svg {
  width: 18px !important;
  height: 18px !important;
  color: #f5a623 !important;
  fill: #f5a623 !important;
  flex-shrink: 0 !important;
}

.tp-extra-info .tp-extra-rating-label {
  color: #344054 !important;
}

.tp-extra-info .tp-extra-rating-value {
  font-weight: 800 !important;
  color: #079455 !important;
}

.tp-extra-info .tp-extra-rating-count {
  color: #667085 !important;
  font-weight: 500 !important;
}

.tp-extra-info .tp-extra-sold {
  color: #344054 !important;
}

.tp-extra-info .tp-extra-sold-num {
  color: #079455 !important;
  font-weight: 800 !important;
}

.tp-extra-info .tp-extra-sold svg {
  width: 20px !important;
  height: 20px !important;
  color: #ef4444 !important;
  flex-shrink: 0 !important;
}

        .col-product-info .product-description * {
    color: #475467 !important;
}
.col-product-info .price-product .product-formatted-price {
    color: #AE1E17 !important;
}

.div-product-weight {
    color: #475467 !important;
}
#product-variants-options .form-group label, .quantity-add-cart label, .quantity-style-2 label {
  color: #475467 !important;
}


.select-quantity-div .quantity-input input {
  color: #475467 !important;}

.description-box {
    color: #101828 !important;
}
/* =========================================================================
   Dafa — Mobile menu (#sliding-menu) as a bottom sheet + Figma look.

   IMPORTANT: load this file AFTER the theme / mmenu CSS so it overrides it
   (otherwise the menu keeps sliding from the side). Pair with menu.js.
   Applies on ALL screen sizes.
   ========================================================================= */

:root {
  --tp-menu-sheet-height: 82vh;
  --tp-menu-sheet-radius: 18px;
  --tp-menu-sheet-handle: #d0d2d8;
  --tp-menu-sheet-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
}

/* Dimmer behind the sheet stays fully visible */
a.mm-blocker.mm-slideout,
.mm-wrapper__blocker.mm-blocker {
  opacity: 1 !important;
}

/* Never push the page sideways (mmenu off-canvas behaviour) */
.mm-slideout {
  transform: none !important;
}

/* ----- Bottom sheet panel (override every off-canvas position class) ----- */
html body nav#sliding-menu.mm-menu,
html body nav#sliding-menu.mm-menu.mm-menu--offcanvas,
html body nav#sliding-menu.mm-menu--position-front,
html body nav#sliding-menu.mm-menu--position-right,
html body nav#sliding-menu.mm-menu--position-left,
html body nav#sliding-menu.mm-menu--position-right-front,
html body nav#sliding-menu.mm-menu--position-left-front {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--tp-menu-sheet-height) !important;
  max-height: var(--tp-menu-sheet-height) !important;
  min-height: 0 !important;

  border-radius: var(--tp-menu-sheet-radius) var(--tp-menu-sheet-radius) 0 0 !important;
  box-shadow: var(--tp-menu-sheet-shadow) !important;
  overflow: hidden !important;
  background: #ffffff !important;

  display: flex !important;
  flex-direction: column !important;

  /* Slide from the bottom (closed state) */
  transform: translate3d(0, 105%, 0) !important;
  transform-origin: center bottom !important;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.3s ease !important;
  will-change: transform;
  z-index: 100000 !important;
}

/* Opened state slides up into view */
html body nav#sliding-menu.mm-menu.mm-menu--opened {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Drag / grab handle at the top */
nav#sliding-menu.mm-menu::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 10px auto 6px;
  border-radius: 999px;
  background: var(--tp-menu-sheet-handle);
  align-self: center;
}

/* Scrollable body */
nav#sliding-menu.mm-menu .mm-panels {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

nav#sliding-menu.mm-menu .mm-navbars--top {
  flex-shrink: 0 !important;
}

/* Remove the leftover bottom navbar (social etc.) — not in the Figma design.
   The cart/login icons are moved out of it into the top bar by menu.js. */
nav#sliding-menu .mm-navbars--bottom {
  display: none !important;
}

/* Lock body scroll while the sheet is open (class added by menu.js) */
body.tp-menu-bottom-sheet-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ----- Top bar: logo (right) + cart & login icons (left) ----- */
nav#sliding-menu .mm-navbars--top .mm-navbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 4px 18px 12px !important;
}

nav#sliding-menu .logo-menu {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
nav#sliding-menu .menu-logo {
  width: auto !important;
  height: 40px !important;
  max-width: 120px !important;
  object-fit: contain !important;
}

/* Hide the close (X) — closing is via swipe-down / tapping the dimmer */
nav#sliding-menu .mm-btn--close {
  display: none !important;
}

/* Cart + login icons (moved into the top bar by menu.js) */
nav#sliding-menu .tp-menu-top-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 0 0 auto !important;
}
nav#sliding-menu .tp-menu-top-actions a,
nav#sliding-menu .tp-menu-top-actions button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: #1f2937 !important;
  font-size: 0 !important; /* hide the text label, keep the icon */
  line-height: 0 !important;
  cursor: pointer !important;
}
nav#sliding-menu .tp-menu-top-actions svg {
  width: 24px !important;
  height: 24px !important;
}
nav#sliding-menu .tp-menu-top-actions .cart-badge {
  position: absolute !important;
  top: -7px !important;
  left: -9px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #e53935 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ----- Remove the category thumbnails everywhere in the menu ----- */
nav#sliding-menu .menu-image {
  display: none !important;
}

/* ----- Clean links list (Figma) ----- */
nav#sliding-menu .mm-listview .mm-listitem {
  border: none !important;
}
nav#sliding-menu .mm-listview .mm-listitem::after {
  display: none !important;
}
nav#sliding-menu .mm-listview .mm-listitem__text {
  display: flex !important;
  align-items: center !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  text-align: right !important;
}
nav#sliding-menu .mm-listview .mm-listitem + .mm-listitem {
  border-top: 1px solid #f0f1f3 !important;
}
/* =========================================================================
   PRODUCT CARD — minimal Figma look (reusable)
   ---------------------------------------------------------------------------
   Applies to any .product-box that card.js tags with .tp-card-min.
   - Hides the image swiper nav buttons + pagination dots, shows only the
     first image (no sliding).
   - Adds a meta row under the image: "🔥 مباع 200 مرة" (200 in green)
     + inline rating (score / star / count).
   - Price text + riyal icon use #AE1E17.
   Pair with card.js. Cards inside the dedicated a31a80d8 section are skipped
   by the JS so this never clashes with that design.
   ========================================================================= */

/* ----- Image: keep the slider/images, only hide nav arrows + dots -------- */
.tp-card-min .product-card-swiper-nav {
  display: none !important;
}
.tp-card-min .product-card-swiper-pagination,
.tp-card-min .product-card-images-swiper .swiper-pagination {
  display: none !important;
}

/* ----- Meta row: sold + rating on one line ------------------------------- */
.tp-card-min .tp-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 0;
  direction: rtl;
}

.tp-card-min .tp-card-sold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #344054;
  white-space: nowrap;
}
.tp-card-min .tp-card-sold-num {
  color: #079455;
  font-weight: 800;
}

.tp-card-min .tp-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  direction: ltr;
  white-space: nowrap;
}
.tp-card-min .tp-card-rating-score {
  color: #344054;
  font-weight: 700;
}
.tp-card-min .tp-card-rating svg {
  color: #f5a623;
  flex-shrink: 0;
}
.tp-card-min .tp-card-rating-count {
  color: #667085;
  font-weight: 500;
}

/* ----- Price + riyal icon in brand red ----------------------------------- */
.tp-card-min .tp-price-product .price-new {
  color: #ae1e17 !important;
  font-weight: 800 !important;
}
.tp-card-min .tp-price-product .price-new .riyal-svg {
  color: #ae1e17 !important;
  fill: #ae1e17 !important;
}
.tp-card-min .tp-price-product .price-new .riyal-svg path {
  fill: currentColor !important;
}

/* Hide the original theme rating wrapper (it's re-rendered inside the meta row) */
.tp-card-min .product-card-rating-wrapper {
  display: none !important;
}
   /* =========================================================================
   HEADER — floating glass nav that docks to full width on scroll
   ---------------------------------------------------------------------------
   Structure (theme):
     header.header-nav
       section.tp-bar      -> top promo marquee bar (stays full width)
       .bg-header          -> main nav (logo + icons)  <- glass / docking part

   - The WHOLE header.header-nav is fixed, so the promo bar is never covered.
   - At the top: .bg-header floats with side gaps (40px desktop / 16px mobile),
     rounded corners and a translucent glass background (backdrop blur) so the
     content behind it shows through.
   - On scroll: header.js adds .tp-header-scrolled and .bg-header animates to
     full width, square corners and a solid white fill.
   - !important + html body so it wins over the theme's header styles.
   Pair with header.js.
   ========================================================================= */

/* ----- Whole header fixed; promo bar travels with it --------------------- */
html body header.header-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent !important;
}

html body header.header-nav .tp-bar {
  position: relative;
  z-index: 2;
}

/* ----- Floating glass nav (initial state) -------------------------------- */
html body .bg-header {
  position: relative;
  margin: 12px 40px 0 !important;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.35) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.1);
  transition: margin 0.35s ease, border-radius 0.35s ease,
    background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease,
    backdrop-filter 0.35s ease;
}

/* Inner wrappers must be transparent so the glass actually shows through */
html body .bg-header .container,
html body .bg-header .header-box {
  background: transparent !important;
}

/* ----- Docked state (scrolled) — full width, solid, square --------------- */
html body header.header-nav.tp-header-scrolled .bg-header {
  margin: 0 !important;
  border-radius: 0;
  background: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(16, 24, 40, 0.12);
}

/* ----- Mobile: 16px side gaps -------------------------------------------- */
@media (max-width: 991.98px) {
  html body .bg-header {
    margin: 8px 16px 0 !important;
    border-radius: 14px;
  }
  html body header.header-nav.tp-header-scrolled .bg-header {
    margin: 0 !important;
    border-radius: 0;
  }
}
        .tp-banners .tp-items a img {
 
    border-radius:  0 !important;
    -webkit-border-radius: 0 !important;
 
}
        @media (max-width: 768px) {
    .s-block {
        padding-top: 0px !important;
    }
}
        /* =========================================================================
   BANNER — section 5d2de601: full-bleed (kill the Bootstrap container)
   Make the banner stretch edge-to-edge with no side padding, on every screen
   (especially mobile).
   ========================================================================= */
[section-id="5d2de601-a8d8-4fe3-aa21-4e95655591bf"] .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[section-id="5d2de601-a8d8-4fe3-aa21-4e95655591bf"],
[section-id="5d2de601-a8d8-4fe3-aa21-4e95655591bf"] > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[section-id="5d2de601-a8d8-4fe3-aa21-4e95655591bf"] .tp-items img,
[section-id="5d2de601-a8d8-4fe3-aa21-4e95655591bf"] .tp-items picture {
  width: 100% !important;
  display: block !important;
}