/* ==========================================
   HOWK CSS — النسخة النهائية الكاملة
 
========================================== */

/* 1) خلفية المتجر */ 
html body { 
  background: #000000 !important;
  padding-bottom: 70px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
} 

/* 2) إخفاء المكونات القديمة */
html body .top-nav,
html body .top-navbar,
html body .top-bar,
html body .mobile-menu,
html body .mm-ocd,
html body .mm-spn,
html body .mm-ocd__content,
html body .howk-desktop-drawer,
html body .howk-menu-extra,
html body salla-buy-button,
html body .btn--buy-now,
html body salla-slider.details-slider,
html body .details-slider,
html body .s-product-thumbnails,
html body .product-thumbs,
html body [class*="sticky-bar"]:not(.howk-vn-bar),
html body .howk-buy-bar,
html body .howk-bar-fixed,
html body .howk-v16-bar,
html body .howk-v17-bar,
html body .howk-v18-bar,
html body .howk-v21-vault,
html body .howk-card-overlay,
html body .howk-card-bg,
html body .howk52-info,
html body .howk52-name,
html body .howk52-price,
html body .howk52-colors,
html body .howk52-btn,
html body .howk52-heart,
html body salla-skeleton,
html body salla-loading,
html body .s-skeleton,
html body [class*="skeleton"],
html body .howkvn-tabby {
  display: none !important;
  animation: none !important;
}

/* 3) الهيدر شفاف */
html body header,
html body .main-nav-container,
html body .store-header,
html body .main-nav-container .inner,
html body .main-nav-container .sides-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 75px !important;
  height: 75px !important;
  max-height: 75px !important;
  position: relative !important;
  overflow: visible !important;
  padding: 0 16px !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  html body header,
  html body .main-nav-container,
  html body .store-header,
  html body .main-nav-container .inner,
  html body .main-nav-container .sides-wrap {
    min-height: 90px !important;
    height: 90px !important;
    max-height: 90px !important;
    padding: 0 32px !important;
  }
}

/* 4) اللوقو في المنتصف */
html body .navbar-brand,
html body .header-logo,
html body .store-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  max-height: none !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

html body .navbar-brand img,
html body .header-logo img,
html body .store-logo img {
  height: 90px !important;
  min-height: 90px !important;
  max-height: none !important;
  width: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  html body .navbar-brand img,
  html body .header-logo img,
  html body .store-logo img {
    height: 110px !important;
    min-height: 110px !important;
  }
}

/* 5) أيقونات الهيدر بيضاء */
html body header button svg,
html body header a svg,
html body .howk-search-btn svg,
html body .howk-cart-btn svg {
  fill: none !important;
  stroke: #ffffff !important;
}

html body .s-cart-summary-total,
html body header [class*="cart"] span {
  color: #ffffff !important;
}

html body .s-cart-summary-count {
  background: #ffffff !important;
  color: #101010 !important;
}

/* 6) الأيقونات الثابتة */
html body .howk-actions-left,
html body .howk-actions-right {
  position: fixed !important;
  top: 38px !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
}

html body .howk-actions-right { right: 16px !important; left: auto !important; }
html body .howk-actions-left { left: 16px !important; right: auto !important; }

@media (min-width: 768px) {
  html body .howk-actions-left,
  html body .howk-actions-right { top: 44px !important; }
  html body .howk-actions-right { right: 32px !important; }
  html body .howk-actions-left { left: 32px !important; gap: 14px !important; }
}

/* 7) أيقونات البحث والسلة */
html body .howk-search-btn,
html body .howk-cart-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
}

html body .howk-search-btn svg,
html body .howk-cart-btn svg {
  width: 26px !important;
  height: 26px !important;
  stroke: #ffffff !important;
  fill: none !important;
  stroke-width: 2 !important;
}

@media (min-width: 768px) {
  html body .howk-search-btn,
  html body .howk-cart-btn { width: 44px !important; height: 44px !important; }
  html body .howk-search-btn svg,
  html body .howk-cart-btn svg { width: 28px !important; height: 28px !important; }
}

html body .howk-cart-btn { position: relative !important; }

html body .howk-cart-count {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  z-index: 11 !important;
  pointer-events: none !important;
}

html body .howk-cart-total {
  position: fixed !important;
  bottom: 12px !important;
  left: 16px !important;
  top: auto !important;
  transform: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  z-index: 100001 !important;
  display: inline-block !important;
}

@media (min-width: 768px) {
  html body .howk-cart-total { font-size: 14px !important; left: 32px !important; }
}

/* 8) زر القائمة (burger) */
html body .howk-burger {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
}

html body .howk-burger span {
  display: block !important;
  width: 26px !important;
  height: 2.5px !important;
  background: #ffffff !important;
  border-radius: 2px !important;
}

@media (min-width: 768px) {
  html body .howk-burger { width: 44px !important; height: 44px !important; }
  html body .howk-burger span { width: 28px !important; }
}

/* 9) إخفاء أيقونات سلة الافتراضية */
html body header .header-icon-button,
html body header .header-btn__icon,
html body header .s-cart-summary-count,
html body header .s-cart-summary-total,
html body header a[href*="cart"],
html body header a[href*="login"],
html body header a[href*="account"],
html body header [class*="user"],
html body header [class*="currency"],
html body header [class*="lang"],
html body header .btn--nav-btn,
html body header a[data-testid="store-header-mobile-toggle"],
html body header .menu-toggle,
html body header .navbar-toggle,
html body .sicon-shopping-bag,
html body .sicon-user-circle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 10) الدرج الجانبي */
html body .howk-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: 340px !important;
  max-width: 92vw !important;
  height: 100vh !important;
  background: #101010 !important;
  z-index: 100001 !important;
  transform: translateX(100%) !important;
  transition: transform 0.35s ease !important;
  overflow-y: auto !important;
  padding: 20px 24px !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important;
}

html body.howk-menu-open .howk-drawer { transform: translateX(0) !important; }

html body .howk-drawer-close {
  background: transparent !important;
  border: none !important;
  color: #d9b97a !important;
  font-size: 28px !important;
  cursor: pointer !important;
  width: 100% !important;
  text-align: left !important;
  padding: 4px 0 10px !important;
}

html body .howk-sec-title {
  color: #d9b97a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  margin: 14px 0 4px !important;
  display: block !important;
}

html body .howk-drawer > a,
html body .howk-drawer-links a {
  display: block !important;
  color: #ffffff !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(201, 160, 82, 0.15) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: right !important;
}

html body .howk-drawer > a:hover,
html body .howk-drawer-links a:hover { color: #d9b97a !important; }

html body .howk-login-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  border: 1px solid #d9b97a !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  margin: 6px 0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14px !important;
}

html body .howk-login-box svg,
html body .howk-login-box img { display: none !important; }

html body .howk-login-box span {
  color: #ffffff !important;
  font-size: 14px !important;
}

html body .howk-lang-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  border: 1px solid rgba(201, 160, 82, 0.35) !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  margin: 6px 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* 11) شريط البحث */
html body .howk-search-bar {
  position: fixed !important;
  top: 70px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100005 !important;
  background: #101010 !important;
  padding: 12px 16px !important;
  display: none !important;
  border-bottom: 1px solid rgba(201, 160, 82, 0.25) !important;
}

html body.howk-search-open .howk-search-bar { display: block !important; }

html body .howk-search-bar input {
  width: 100% !important;
  background: #1a1a1a !important;
  border: 1px solid rgba(201, 160, 82, 0.35) !important;
  color: #ffffff !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

/* 12) التعتيم */
html body .howk-menu-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 100000 !important;
}

html body.howk-menu-open .howk-menu-overlay { display: block !important; }
html body.howk-menu-open { overflow: hidden !important; }

/* 13) إزالة الفراغات */
html body main,
html body .store-wrapper,
html body .main-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

html body main > *:first-child,
html body .s-block:first-child,
html body section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .s-block,
html body section.s-block,
html body div.s-block {
  margin: 0 !important;
  padding: 0 !important;
}

html body .s-block + .s-block,
html body section.s-block + section.s-block {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .s-block .container,
html body section .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .s-block__title,
html body .s-slider-block__title {
  margin: 0 !important;
  padding: 0 12px !important;
  height: auto !important;
}

html body .s-products-list,
html body .grid,
html body [class*="products-list"],
html body [class*="grid-cols"] {
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
}

@media (min-width: 768px) {
  html body .s-products-list,
  html body .grid { gap: 18px !important; }
}

html body salla-slider,
html body .s-slider-block {
  margin: 0 !important;
  padding: 0 !important;
}

html body .banner--fixed,
html body .s-block--fixed-banner {
  margin: 0 !important;
  padding: 0 !important;
}

html body .banner--fixed img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 14) صفحة المنتج — المعرض */
html body .howk-vn-gallery {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  max-height: 44vh !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #141210 !important;
  border-radius: 12px !important;
  margin: 0 auto 10px !important;
  display: block !important;
}

@media (min-width: 768px) {
  html body .howk-vn-gallery {
    max-width: 480px !important;
    max-height: 62vh !important;
    aspect-ratio: 4 / 5 !important;
  }
}

html body .howk-vn-gallery img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 15) المصغرات */
html body .howkvn-thumbs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 10px auto 0 !important;
  max-width: 480px !important;
}

html body .howkvn-thumb {
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  aspect-ratio: 4 / 3 !important;
}

html body .howkvn-thumb:first-child { border: 1px solid #c9a052 !important; }

html body .howkvn-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 16) المشاركة والإعجاب */
html body .howkvn-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 480px !important;
  margin: 10px auto 6px !important;
  direction: rtl !important;
}

html body .howkvn-actions button {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
}

html body .howkvn-actions svg {
  stroke: #ffffff !important;
  fill: none !important;
}

/* 17) الاسم والسعر */
html body .howk-vn-name {
  color: #ffffff !important;
  text-align: right !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 6px 0 6px !important;
  display: block !important;
  line-height: 1.4 !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .howk-vn-price {
  color: #c9a052 !important;
  text-align: right !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
  display: block !important;
  direction: rtl !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 18) المقاسات (بدون tabby) */
html body .howkvn-box {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body .howkvn-box button {
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

html body .howkvn-box button.howk-size-disabled,
html body .howkvn-box button[disabled] {
  background: #141414 !important;
  color: #5a5a5a !important;
  border: 1px solid #262626 !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  text-decoration: line-through !important;
  pointer-events: none !important;
}

/* 19) الرمز */
html body .howkvn-sku {
  color: #8a8578 !important;
  font-size: 12px !important;
  text-align: center !important;
  letter-spacing: .08em !important;
  margin: 0 0 18px !important;
  display: block !important;
}

/* 20) قصة المنتج */
html body .howkvn-story {
  position: relative !important;
  height: 150px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin: 0 0 16px !important;
  border: 1px solid rgba(201, 160, 82, 0.3) !important;
  background: #0a0a0a !important;
}

/* 21) الشريط الثابت */
html body .howk-vn-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  z-index: 9998 !important;
  padding: 6px 8px !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
  margin: 0 !important;
  display: flex !important;
}

html body .howk-vn-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

html body .howk-vn-price-slot {
  flex: 1 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-align: right !important;
}

html body .howk-vn-qty-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 1.5px solid #000000 !important;
  border-radius: 6px !important;
  height: 34px !important;
  width: 96px !important;
  flex-shrink: 0 !important;
}

html body .howk-vn-qty-slot button {
  background: transparent !important;
  border: none !important;
  color: #000000 !important;
  width: 30px !important;
  height: 32px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

html body .howk-vn-qty-val {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  min-width: 26px !important;
  text-align: center !important;
}

html body .howk-vn-add-slot { flex: 1.2 !important; }

html body .howk-vn-add-slot button {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  height: 34px !important;
  width: 100% !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

html body .howk-vn-add-slot button svg {
  stroke: #ffffff !important;
  fill: none !important;
}

/* 22) عارض الصورة */
html body .howk-viewer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.94) !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: zoom-out !important;
}

html body .howk-viewer img {
  max-width: 96vw !important;
  max-height: 92vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 23) البطاقات الاحترافية */
html body custom-salla-product-card,
html body .s-product-card-entry,
html body .s-product-card,
html body .s-product-card-vertical {
  position: relative !important;
  aspect-ratio: 3 / 5.5 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #0e0e0e !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(201, 160, 82, 0.25) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  cursor: pointer !important;
}

@media (min-width: 768px) {
  html body custom-salla-product-card,
  html body .s-product-card-entry,
  html body .s-product-card,
  html body .s-product-card-vertical {
    aspect-ratio: 3 / 4.5 !important;
    max-height: 420px !important;
  }
}

html body .s-product-card-image,
html body .product-entry__image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #0e0e0e !important;
  border: none !important;
  border-radius: 0 !important;
}

html body .s-product-card-image img,
html body .product-entry__image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  object-fit: cover !important;
  object-position: 60% 5% !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: transform 0.4s ease !important;
  background: #0e0e0e !important;
}

html body .s-product-card-image::after,
html body .product-entry__image::after,
html body .s-product-card-image::before,
html body .product-entry__image::before {
  content: none !important;
  display: none !important;
}

html body .s-product-card-content,
html body .product-entry__content,
html body .howkn-info {
  display: none !important;
}

html body .howkn-info-inner {
  padding: 18px 10px 14px !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
}

html body .howkn-name {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
  min-height: 34px !important;
}

html body .howkn-price {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 22px !important;
}

html body .howkn-price * {
  color: #c9a052 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

html body .howkn-colors {
  display: flex !important;
  gap: 4px !important;
  justify-content: flex-start !important;
  margin: 2px 0 !important;
  min-height: 14px !important;
}

html body .howkn-btn {
  background: transparent !important;
  color: #c9a052 !important;
  border: 1px solid rgba(201, 160, 82, 0.5) !important;
  border-radius: 8px !important;
  height: 32px !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  margin: 4px 0 0 !important;
  transition: all 0.3s ease !important;
}

html body .howkn-btn svg {
  stroke: #c9a052 !important;
  fill: none !important;
  transition: stroke 0.3s ease !important;
}

html body .howkn-btn span {
  color: #c9a052 !important;
  transition: color 0.3s ease !important;
}

/* تفاعلات hover على البطاقات */
html body custom-salla-product-card:hover,
html body .s-product-card-entry:hover,
html body .s-product-card:hover,
html body .s-product-card-vertical:hover {
  border: 1px solid #c9a052 !important;
  box-shadow: 0 8px 24px rgba(201, 160, 82, 0.25) !important;
  transform: translateY(-2px) !important;
}

html body custom-salla-product-card:hover .s-product-card-image img,
html body .s-product-card-entry:hover .product-entry__image img,
html body .s-product-card:hover .s-product-card-image img,
html body .s-product-card-vertical:hover .product-entry__image img {
  transform: scale(1.05) !important;
}

html body custom-salla-product-card:hover .howkn-name,
html body .s-product-card-entry:hover .howkn-name,
html body .s-product-card:hover .howkn-name,
html body .s-product-card-vertical:hover .howkn-name {
  color: #c9a052 !important;
}

html body custom-salla-product-card:hover .howkn-btn,
html body .s-product-card-entry:hover .howkn-btn,
html body .s-product-card:hover .howkn-btn,
html body .s-product-card-vertical:hover .howkn-btn {
  background: #c9a052 !important;
  border-color: #c9a052 !important;
}

html body custom-salla-product-card:hover .howkn-btn svg,
html body .s-product-card-entry:hover .howkn-btn svg,
html body .s-product-card:hover .howkn-btn svg,
html body .s-product-card-vertical:hover .howkn-btn svg {
  stroke: #000000 !important;
}

html body custom-salla-product-card:hover .howkn-btn span,
html body .s-product-card-entry:hover .howkn-btn span,
html body .s-product-card:hover .howkn-btn span,
html body .s-product-card-vertical:hover .howkn-btn span {
  color: #000000 !important;
}

/* 24) شبكة البطاقات */
html body .s-block .grid,
html body .s-block .s-products-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

@media (min-width: 768px) {
  html body .s-block .grid,
  html body .s-block .s-products-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    max-width: 720px !important;
  }
}

/* 25) بانر هالة */
html body .hala-banner {
  background: #000000 !important;
  padding: 0 12px 8px !important;
  margin: 0 0 6px !important;
  border-radius: 0 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  font-family: 'Noto Naskh Arabic', serif !important;
  margin-top: -75px !important;
  position: relative !important;
  z-index: 1 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  html body .hala-banner { margin-top: -90px !important; }
}

html body .hala-brand {
  color: #ffffff !important;
  display: block !important;
  font-size: 11px !important;
  margin: 16px 0 1px !important;
  line-height: 1.2 !important;
}

html body .hala-kicker {
  color: #f5d78e !important;
  display: block !important;
  font-size: 10px !important;
  margin: 0 0 2px !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  letter-spacing: .12em !important;
}

html body .hala-word {
  color: #f5d78e !important;
  background: none !important;
  -webkit-text-fill-color: #f5d78e !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

html body .hala-word-row {
  margin: 0 !important;
  gap: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .hala-line {
  width: 110px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #f5d78e, transparent) !important;
  box-shadow: 0 0 12px rgba(245, 215, 142, 0.55) !important;
  opacity: 1 !important;
}

html body .hala-eng {
  color: #f5d78e !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-size: 9px !important;
  margin: 0 0 2px !important;
  letter-spacing: .22em !important;
  line-height: 1.1 !important;
}

html body .hala-presence {
  color: #ffffff !important;
  display: block !important;
  font-size: 11px !important;
  margin: 0 0 1px !important;
  line-height: 1.2 !important;
}

html body .hala-tagline {
  color: #f5d78e !important;
  display: block !important;
  font-size: 11px !important;
  margin: 0 !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-weight: 700 !important;
}

/* 26) الفوتر */
html body .store-footer {
  background: #000000 !important;
  padding-top: 20px !important;
}

html body .store-footer * { color: #ffffff !important; }

/* 27) إلغاء الحركات */
html body .s-product-card-image img,
html body .product-entry__image img {
  transition: transform 0.4s ease !important;
}

html body .hala-banner,
html body .hala-banner *,
html body header,
html body header * {
  animation: none !important;
}
/* نص شامل الضريبة والتوصيل — أصغر من السعر */
html body .howk-vn-price-note {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #c9a052 !important;
  opacity: 0.85 !important;
}/* Add custom CSS styles below */
/* ==========================================
   إضافات الصفحة الرئيسية
   ========================================== */

/* 28) حذف العملة من الهيدر بشكل كامل */
html body .s-currency-switcher,
html body .salla-currency,
html body [class*="currency-switcher"],
html body [class*="currency-select"],
html body [class*="CurrencySwitcher"],
html body .header-currency,
html body .currency-picker,
html body .store-currency,
html body header [class*="currency"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 29) تنزيل أول بانر بعد الهيدر (إلغاء الفراغ العلوي) */
html body main > .s-block:first-child,
html body main > section:first-child,
html body main > salla-slider:first-child,
html body main > .s-slider-block:first-child {
  margin-top: -55px !important;
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  html body main > .s-block:first-child,
  html body main > section:first-child,
  html body main > salla-slider:first-child,
  html body main > .s-slider-block:first-child {
    margin-top: -70px !important;
  }
}

/* 30) حذف فراغات البانرات من اليمين واليسار */
html body .s-block .container,
html body section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed,
html body .s-block--fixed-banner,
html body .s-block .banner,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"],
html body .s-block img[src*="image"],
html body .s-block img:not(.s-product-card-image img):not(.product-entry__image img) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed img,
html body .s-block--fixed-banner img,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

/* حماية البطاقات من التأثر (لا تتأثر بهذا التعديل) */
html body .s-products-list .container,
html body .grid .container,
html body .s-block:has(custom-salla-product-card) .container,
html body .s-block:has(.s-product-card) .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (min-width: 768px) {
  html body .s-products-list .container,
  html body .grid .container,
  html body .s-block:has(custom-salla-product-card) .container,
  html body .s-block:has(.s-product-card) .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* ==========================================
   تعديل الصفحة الرئيسية - العملة والمواقع
   ========================================== */

/* 28) حذف العملة من الهيدر بالكامل (كل selectors الممكنة) */
html body .s-currency-switcher,
html body salla-currency-picker,
html body .salla-currency,
html body .salla-currency-picker,
html body [class*="currency-switcher"],
html body [class*="currency-select"],
html body [class*="currency-picker"],
html body [class*="CurrencySwitcher"],
html body [class*="CurrencyPicker"],
html body .header-currency,
html body .currency-picker,
html body .store-currency,
html body header [class*="currency"],
html body [data-component*="currency"],
html body .s-header-currency {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 29) تنزيل أول بانر بعد الهيدر */
html body main > .s-block:first-child,
html body main > section:first-child,
html body main > salla-slider:first-child,
html body main > .s-slider-block:first-child {
  margin-top: -55px !important;
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  html body main > .s-block:first-child,
  html body main > section:first-child,
  html body main > salla-slider:first-child,
  html body main > .s-slider-block:first-child {
    margin-top: -70px !important;
  }
}

/* 30) حذف فراغات البانرات يمين/يسار */
html body .s-block .container,
html body section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed,
html body .s-block--fixed-banner,
html body .s-block .banner,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed img,
html body .s-block--fixed-banner img,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

/* حماية البطاقات من التأثر */
html body .s-products-list .container,
html body .grid .container,
html body .s-block:has(custom-salla-product-card) .container,
html body .s-block:has(.s-product-card) .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (min-width: 768px) {
  html body .s-products-list .container,
  html body .grid .container,
  html body .s-block:has(custom-salla-product-card) .container,
  html body .s-block:has(.s-product-card) .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* 31) اليسار: البحث + السلة + العملة على مستوى واحد مع اللوقو والقائمة */
html body .howk-actions-left {
  left: 22px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (min-width: 768px) {
  html body .howk-actions-left {
    left: 40px !important;
    gap: 14px !important;
  }
}

/* حاوية السلة والعملة: أفقية بجانب بعض */
html body .howk-cart-currency-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

/* العملة: شارة صغيرة داخل الصف (ليست ثابتة أسفل الصفحة) */
html body .howk-currency-display {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  letter-spacing: 0.05em !important;
  background: rgba(201, 160, 82, 0.15) !important;
  border: 1px solid rgba(201, 160, 82, 0.45) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
}

@media (min-width: 768px) {
  html body .howk-currency-display {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}

html body .howk-currency-display .howk-currency-symbol {
  color: #c9a052 !important;
  font-weight: 800 !important;
}

html body .howk-currency-display .howk-currency-code {
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 0.9 !important;
}
/* ==========================================
   الإضافات النهائية — تحل محل كل الإضافات السابقة
   ========================================== */

/* 1) إخفاء العملة الأصلية من الهيدر */
html body .s-currency-switcher,
html body salla-currency-picker,
html body .salla-currency,
html body .salla-currency-picker,
html body [class*="currency-switcher"],
html body [class*="currency-select"],
html body [class*="currency-picker"],
html body [class*="CurrencySwitcher"],
html body [class*="CurrencyPicker"],
html body .header-currency,
html body .currency-picker,
html body .store-currency,
html body header [class*="currency"],
html body [data-component*="currency"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) إخفاء إجمالي السلة القديم (سبب ظهور العملة أسفل الصفحة) */
html body .howk-cart-total {
  display: none !important;
}

/* 3) تنزيل أول بانر بعد الهيدر */
html body main > .s-block:first-child,
html body main > section:first-child,
html body main > salla-slider:first-child,
html body main > .s-slider-block:first-child {
  margin-top: -55px !important;
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  html body main > .s-block:first-child,
  html body main > section:first-child,
  html body main > salla-slider:first-child,
  html body main > .s-slider-block:first-child {
    margin-top: -70px !important;
  }
}

/* 4) حذف فراغات البانرات يمين ويسار */
html body .s-block .container,
html body section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed,
html body .s-block--fixed-banner,
html body .s-block .banner,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed img,
html body .s-block--fixed-banner img,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

/* حماية البطاقات */
html body .s-products-list .container,
html body .grid .container,
html body .s-block:has(custom-salla-product-card) .container,
html body .s-block:has(.s-product-card) .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (min-width: 768px) {
  html body .s-products-list .container,
  html body .grid .container,
  html body .s-block:has(custom-salla-product-card) .container,
  html body .s-block:has(.s-product-card) .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* ==========================================
   الإضافات النهائية — تحل محل كل الإضافات السابقة
   ========================================== */

/* 1) إخفاء العملة الأصلية من الهيدر */
html body .s-currency-switcher,
html body salla-currency-picker,
html body .salla-currency,
html body .salla-currency-picker,
html body [class*="currency-switcher"],
html body [class*="currency-select"],
html body [class*="currency-picker"],
html body [class*="CurrencySwitcher"],
html body [class*="CurrencyPicker"],
html body .header-currency,
html body .currency-picker,
html body .store-currency,
html body header [class*="currency"],
html body [data-component*="currency"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2) حذف شارة العملة وإجمالي السلة القديم نهائياً */
html body .howk-currency-display,
html body .howk-cart-total {
  display: none !important;
}

/* 3) تنزيل أول بانر بعد الهيدر */
html body main > .s-block:first-child,
html body main > section:first-child,
html body main > salla-slider:first-child,
html body main > .s-slider-block:first-child {
  margin-top: -55px !important;
  padding-top: 0 !important;
}

@media (min-width: 768px) {
  html body main > .s-block:first-child,
  html body main > section:first-child,
  html body main > salla-slider:first-child,
  html body main > .s-slider-block:first-child {
    margin-top: -70px !important;
  }
}

/* 4) حذف فراغات البانرات يمين ويسار */
html body .s-block .container,
html body section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed,
html body .s-block--fixed-banner,
html body .s-block .banner,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body .banner--fixed img,
html body .s-block--fixed-banner img,
html body .s-block img[src*="banner"],
html body .s-block img[src*="Banner"] {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

/* حماية البطاقات */
html body .s-products-list .container,
html body .grid .container,
html body .s-block:has(custom-salla-product-card) .container,
html body .s-block:has(.s-product-card) .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (min-width: 768px) {
  html body .s-products-list .container,
  html body .grid .container,
  html body .s-block:has(custom-salla-product-card) .container,
  html body .s-block:has(.s-product-card) .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* 5) مجموعة اليسار: السلة ثم البحث — رموز أكبر */
html body .howk-actions-left {
  left: 22px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  direction: ltr !important;
}

@media (min-width: 768px) {
  html body .howk-actions-left {
    left: 40px !important;
    gap: 16px !important;
  }
}

/* تكبير أزرار وأيقونات البحث والسلة */
html body .howk-search-btn,
html body .howk-cart-btn {
  width: 46px !important;
  height: 46px !important;
}

html body .howk-search-btn svg,
html body .howk-cart-btn svg {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 2.2 !important;
}

@media (min-width: 768px) {
  html body .howk-search-btn,
  html body .howk-cart-btn {
    width: 50px !important;
    height: 50px !important;
  }
  html body .howk-search-btn svg,
  html body .howk-cart-btn svg {
    width: 34px !important;
    height: 34px !important;
  }
}
/* ==========================================
   HOWK Split Logo — نفس الآلية المرجعية بالضبط
   ========================================== */
:root {
  --hk-bg: #000000;                /* خلفية المتجر السوداء — غيّرها لـ #ffffff إن أردت */
  --hk-size: min(44vw, 240px);     /* حجم اللوجو */
  --hk-logo: url("");              /* يُحقن تلقائياً من الجافا */
}

/* الخلفية: نصفين بينفصلوا من المنتصف لفوق وتحت */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background:
    linear-gradient(var(--hk-bg), var(--hk-bg)) top    / 100% 50.2% no-repeat,
    linear-gradient(var(--hk-bg), var(--hk-bg)) bottom / 100% 50.2% no-repeat;
  animation: hk-split 2.4s forwards;
}

/* اللوجو */
body::after {
  content: "";
  position: fixed; top: 50%; left: 50%;
  width: var(--hk-size); height: var(--hk-size);
  margin: calc(var(--hk-size) / -2) 0 0 calc(var(--hk-size) / -2);
  background: var(--hk-logo) center/contain no-repeat;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  animation: hk-logo 2.4s ease forwards;
}

@keyframes hk-logo {
  0%   { opacity: 0; filter: blur(14px); }
  19%  { opacity: 1; filter: blur(0); }
  77%  { opacity: 1; filter: blur(0); }
  94%  { opacity: 0; filter: blur(0); }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes hk-split {
  0%, 64% {
    background-size: 100% 50.2%, 100% 50.2%;
    animation-timing-function: cubic-bezier(.76, 0, .24, 1);
  }
  92%, 100% {
    background-size: 100% 0%, 100% 0%;
    visibility: hidden;
  }
}

/* ===== الخروج: النصفان ينغلقان من فوق وتحت + اللوجو يظهر ===== */
body.hk-exit::before {
  animation: hk-split-close 0.5s cubic-bezier(.76, 0, .24, 1) forwards !important;
  visibility: visible !important;
}

body.hk-exit::after {
  animation: hk-logo-in 0.5s ease forwards !important;
}

@keyframes hk-split-close {
  0%   { background-size: 100% 0%, 100% 0%; visibility: visible; }
  100% { background-size: 100% 50.2%, 100% 50.2%; visibility: visible; }
}

@keyframes hk-logo-in {
  0%   { opacity: 0; filter: blur(14px); }
  100% { opacity: 1; filter: blur(0); }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after {
    content: none !important;
    animation: none !important;
  }
}
/* ==========================================
   بانر مجموعة دٌرّة — بذهبي هالة نفسه
   ========================================== */

html body .durra-banner {
  background: #000000 !important;
  padding: 0 12px 10px !important;
  margin: 0 !important;
  margin-top: -75px !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  font-family: 'Noto Naskh Arabic', serif !important;
}

@media (min-width: 768px) {
  html body .durra-banner { margin-top: -90px !important; }
}

html body main > .durra-banner:first-child { margin-top: -75px !important; }

@media (min-width: 768px) {
  html body main > .durra-banner:first-child { margin-top: -90px !important; }
}

/* السطر الأول: مجموعة حوك — أبيض */
html body .durra-brand {
  color: #ffffff !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 18px 0 4px !important;
  line-height: 1.2 !important;
  letter-spacing: .06em !important;
}

/* صف الكلمة مع الخطين */
html body .durra-word-row {
  margin: 0 !important;
  gap: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* الخطوط الجانبية — بنفس ذهبي هالة */
html body .durra-line {
  width: 110px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #f5d78e, transparent) !important;
  box-shadow: 0 0 12px rgba(245, 215, 142, 0.55) !important;
  opacity: 1 !important;
}

/* دٌرّة — نفس ذهبي هالة بالضبط */
html body .durra-word {
  color: #f5d78e !important;
  background: none !important;
  -webkit-text-fill-color: #f5d78e !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* DURRA — نفس ذهبي هالة بالضبط */
html body .durra-eng {
  color: #f5d78e !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin: 2px 0 6px !important;
  letter-spacing: .3em !important;
  line-height: 1.1 !important;
}

/* قطعة نادرة … لحضور لا يتكرر */
html body .durra-tagline {
  color: #ffffff !important;
  opacity: .92 !important;
  display: block !important;
  font-size: 12px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ===== لصق البانر بالهيدر وبالبطاقات بدون فراغات ===== */
html body .durra-banner + .s-block,
html body .durra-banner + section.s-block,
html body .durra-banner + div.s-block,
html body .durra-banner + .s-products-list,
html body .durra-banner + .grid,
html body .durra-banner + [class*="products"],
html body .durra-banner + [class*="grid"],
html body .durra-banner + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .durra-banner,
html body div.durra-banner {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

html body main > .s-block:first-child,
html body main > section:first-child,
html body main > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* إلغاء أنيميشن عناصر البانر */
html body .durra-banner,
html body .durra-banner * {
  animation: none !important;
  transition: none !important;
}
/* ==========================================
   بانر مجموعة مٌزَن
   ========================================== */

html body .muzun-banner {
  background: #000000 !important;
  padding: 0 12px 10px !important;
  margin: 0 !important;
  margin-top: -75px !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  font-family: 'Noto Naskh Arabic', serif !important;
}

@media (min-width: 768px) {
  html body .muzun-banner { margin-top: -90px !important; }
}

html body main > .muzun-banner:first-child { margin-top: -75px !important; }

@media (min-width: 768px) {
  html body main > .muzun-banner:first-child { margin-top: -90px !important; }
}

/* دار حوك — أبيض */
html body .muzun-brand {
  color: #ffffff !important;
  display: block !important;
  font-size: 11px !important;
  margin: 16px 0 1px !important;
  line-height: 1.2 !important;
}

/* تقدم مجموعة — ذهبي هالة */
html body .muzun-kicker {
  color: #f5d78e !important;
  display: block !important;
  font-size: 10px !important;
  margin: 0 0 2px !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  letter-spacing: .12em !important;
}

/* صف الكلمة مع الخطين */
html body .muzun-word-row {
  margin: 0 !important;
  gap: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .muzun-line {
  width: 110px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #f5d78e, transparent) !important;
  box-shadow: 0 0 12px rgba(245, 215, 142, 0.55) !important;
  opacity: 1 !important;
}

/* مٌزَن — ذهبي هالة */
html body .muzun-word {
  color: #f5d78e !important;
  background: none !important;
  -webkit-text-fill-color: #f5d78e !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

/* THE MUZUN COLLECTION — ذهبي هالة */
html body .muzun-eng {
  color: #f5d78e !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-size: 9px !important;
  margin: 0 0 2px !important;
  letter-spacing: .22em !important;
  line-height: 1.1 !important;
}

/* للشتاء حضورٌ آخر — أبيض */
html body .muzun-presence {
  color: #ffffff !important;
  display: block !important;
  font-size: 11px !important;
  margin: 0 0 1px !important;
  line-height: 1.2 !important;
}

/* لونان … وحضورٌ يخصّك — ذهبي هالة */
html body .muzun-tagline {
  color: #f5d78e !important;
  display: block !important;
  font-size: 11px !important;
  margin: 0 !important;
  text-shadow: 0 0 12px rgba(245, 215, 142, 0.45) !important;
  font-weight: 700 !important;
}

/* ===== لصق البانر بالهيدر وبالبطاقات بدون فراغات ===== */
html body .muzun-banner + .s-block,
html body .muzun-banner + section.s-block,
html body .muzun-banner + div.s-block,
html body .muzun-banner + .s-products-list,
html body .muzun-banner + .grid,
html body .muzun-banner + [class*="products"],
html body .muzun-banner + [class*="grid"],
html body .muzun-banner + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .muzun-banner,
html body div.muzun-banner {
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

html body main > .s-block:first-child,
html body main > section:first-child,
html body main > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html body .muzun-banner,
html body .muzun-banner * {
  animation: none !important;
  transition: none !important;
}
/* ==========================================
   تحديث القائمة الجانبية — الترتيب الجديد
   ========================================== */

/* روابط التصنيفات — أبيض */
html body .howk-drawer a.howk-cat-link {
  display: block !important;
  color: #ffffff !important;
  padding: 11px 4px !important;
  border-bottom: 1px solid rgba(201, 160, 82, 0.12) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: right !important;
}

html body .howk-drawer a.howk-cat-link:hover { color: #d9b97a !important; }

/* روابط الشروط والسياسات — ذهبي */
html body .howk-drawer a.howk-pol-link {
  display: block !important;
  color: #d9b97a !important;
  padding: 9px 4px !important;
  border-bottom: 1px solid rgba(201, 160, 82, 0.10) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-align: right !important;
}

html body .howk-drawer a.howk-pol-link:hover { color: #f5d78e !important; }

/* عناوين الأقسام داخل الدرج */
html body .howk-sec-title {
  color: #d9b97a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  margin: 16px 0 6px !important;
  display: block !important;
}

/* مستطيل اللغة المقسوم نصفين */
html body .howk-lang-split {
  display: flex !important;
  width: 100% !important;
  border: 1px solid rgba(201, 160, 82, 0.45) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin: 16px 0 10px !important;
  background: transparent !important;
}

html body .howk-lang-half {
  flex: 1 !important;
  padding: 11px 8px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  color: #8a8578 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

html body .howk-lang-half:first-child {
  border-left: 1px solid rgba(201, 160, 82, 0.45) !important;
}

html body .howk-lang-half.active {
  background: rgba(201, 160, 82, 0.16) !important;
  color: #f5d78e !important;
  font-weight: 700 !important;
}

/* مستطيل تسجيل الدخول — أسفل كل شيء */
html body .howk-drawer a.howk-login-box {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  border: 1px solid #d9b97a !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 6px 0 4px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

html body .howk-drawer a.howk-login-box:hover {
  background: rgba(201, 160, 82, 0.12) !important;
  color: #f5d78e !important;
}
/* ==========================================
   لوجو أصغر في الصفحة الرئيسية فقط
   ========================================== */
html body.howk-home .navbar-brand img,
html body.howk-home .header-logo img,
html body.howk-home .store-logo img {
  height: 70px !important;
  min-height: 70px !important;
}

@media (min-width: 768px) {
  html body.howk-home .navbar-brand img,
  html body.howk-home .header-logo img,
  html body.howk-home .store-logo img {
    height: 88px !important;
    min-height: 88px !important;
  }
}
/* ==========================================
   الفوتر — مطابقة الصور المرجعية تماماً
   ========================================== */

/* الخلفية الذهبية الخارجية */
html body .store-footer,
html body footer {
  background: #d4b896 !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 26px 12px 34px !important;
  overflow: visible !important;
}

/* البطاقة السوداء */
html body .howk-f-card {
  background: #000000 !important;
  border: none !important;
  border-radius: 28px !important;
  max-width: 1080px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 46px 22px 30px !important;
  position: relative !important;
}

/* الخط المتقطع داخل أسفل البطاقة */
html body .howk-f-card::after {
  content: "" !important;
  display: block !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.35) !important;
  margin: 36px 4px 4px !important;
}

/* الرأس: لوجو + دار حوك + الوصف */
html body .howk-f-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto 8px !important;
}

html body .howk-f-logo {
  display: block !important;
  margin: 0 auto 8px !important;
  width: min(52vw, 210px) !important;
  height: auto !important;
  max-height: 190px !important;
  object-fit: contain !important;
}

html body .howk-f-brand {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 2px auto 10px !important;
  letter-spacing: 0.04em !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

html body .howk-f-desc {
  color: #c9a052 !important;
  font-size: 13.5px !important;
  line-height: 2.1 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

/* دوائر السوشيال بحد أبيض */
html body .howk-f-social {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 28px auto 12px !important;
  width: 100% !important;
}

html body .howk-f-social a {
  width: 54px !important;
  height: 54px !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  margin: 0 !important;
}

html body .howk-f-social a svg,
html body .howk-f-social a i,
html body .howk-f-social a img {
  width: 22px !important;
  height: 22px !important;
  color: #cfd4dc !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* العناوين والروابط وجهات الاتصال */
html body .howk-f-card h2,
html body .howk-f-card h3,
html body .howk-f-card h4 {
  color: #e8eaee !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin: 28px auto 14px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

html body .howk-f-card ul {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}

html body .howk-f-card li {
  margin: 10px auto !important;
  width: 100% !important;
}

html body .howk-f-card a:not(.howk-f-social a) {
  color: #8b94a3 !important;
  font-size: 14px !important;
}

/* ===== المنطقة السفلية على الذهبي ===== */
html body .howk-f-bottom {
  max-width: 1080px !important;
  width: 100% !important;
  margin: 28px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* شرائح الدفع البيضاء */
html body .howk-f-pay {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

html body .howk-f-pay img {
  height: 46px !important;
  width: auto !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 7px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}

/* السجل التجاري + الشعار */
html body .howk-f-cr {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
}

html body .howk-f-cr img {
  height: 86px !important;
  width: auto !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html body .howk-f-cr * {
  color: #4b4b4b !important;
  font-size: 15px !important;
}

html body .howk-f-cr b,
html body .howk-f-cr strong {
  color: #333333 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* سطر الحقوق على الذهبي */
html body .howk-f-copy,
html body .howk-f-copy * {
  color: #3f3f3f !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

/* استجابة الجوال */
@media (max-width: 767px) {
  html body .howk-f-card { padding: 36px 14px 24px !important; border-radius: 22px !important; }
  html body .howk-f-social a { width: 48px !important; height: 48px !important; }
  html body .howk-f-pay img { height: 40px !important; padding: 6px 10px !important; }
  html body .howk-f-cr img { height: 72px !important; }
}
/* علامات الدفع مرتبة من اليسار لليمين */
html body .howk-f-pay {
  direction: ltr !important;
}

/* إنزال "دار حوك" قليلاً تحت اللوجو */
html body .howk-f-brand {
  margin: 14px auto 12px !important;
}

/* رابط اللوجو (إن وُجد) متمركز ككتلة */
html body .howk-f-head a {
  display: block !important;
  margin: 0 auto !important;
  width: fit-content !important;
}

html body .howk-f-head {
  align-items: center !important;
  justify-content: center !important;
}
/* ===== توحيد وإصلاحات نهائية للفوتر ===== */

/* السوشيال جنب بعض (صف أفقي) */
html body .howk-f-social,
html body .howk-f-social ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 28px auto 12px !important;
}

html body .howk-f-social li {
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* علامة السجل التجاري أصغر */
html body .howk-f-cr img {
  height: 56px !important;
}

/* قيم موحدة ديسكتوب وجوال */
html body .howk-f-card {
  padding: 42px 20px 28px !important;
  border-radius: 26px !important;
}

html body .howk-f-logo {
  width: min(58vw, 210px) !important;
  max-height: 180px !important;
}

html body .howk-f-social a {
  width: 52px !important;
  height: 52px !important;
}

html body .howk-f-pay img {
  height: 42px !important;
  padding: 6px 12px !important;
}

/* إلغاء فروق الجوال السابقة — نفس التصميم تماماً */
@media (max-width: 760px) {
  html body .howk-f-card { padding: 42px 20px 28px !important; border-radius: 26px !important; }
  html body .howk-f-logo { width: min(50vw, 210px) !important; max-height: 180px !important; }
  html body .howk-f-social a { width: 46px !important; height: 52px !important; }
  html body .howk-f-pay img { height: 46px !important; padding: 6px 12px !important; }
  html body .howk-f-cr img { height: 50px !important; }
  html body .howk-f-brand { font-size: 15px !important; }
  html body .howk-f-desc { font-size: 11.5px !important; }
}
/* ===== السوشيال: جنب بعض من اليمين لليسار ===== */
html body .howk-f-social,
html body .howk-f-social ul,
html body .howk-f-social div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  direction: rtl !important;
  width: 100% !important;
  margin: 28px auto 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

html body .howk-f-social li {
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  direction: rtl !important;
}

/* ===== علامة السجل التجاري أصغر ===== */
html body .howk-f-cr img {
  height: 40px !important;
}

@media (max-width: 767px) {
  html body .howk-f-cr img { height: 40px !important; }
}
/* ===== السوشيال: صف واحد بنفس الترتيب على الجوال والديسكتوب ===== */
html body .howk-f-social,
html body .howk-f-social ul,
html body .howk-f-social div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  direction: rtl !important;
  width: 100% !important;
}

html body .howk-f-social li {
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

html body .howk-f-social a {
  flex: 0 0 auto !important;
}

/* نفس الشيء صراحةً على الجوال (لتجاوز أي قواعد موبايل من الثيم) */
@media (max-width: 767px) {
  html body .howk-f-social,
  html body .howk-f-social ul,
  html body .howk-f-social div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    direction: rtl !important;
    width: 100% !important;
  }
  html body .howk-f-social a {
    width: 48px !important;
    height: 48px !important;
  }
  html body .howk-f-social a svg,
  html body .howk-f-social a i,
  html body .howk-f-social a img {
    width: 20px !important;
    height: 20px !important;
  }
}
/* ==========================================
   تعديلات الفوتر النهائية — ذهبي + تصغير + دفع أكبر
   ========================================== */

/* 1) كل نص أبيض داخل البطاقة السوداء يصبح ذهبياً */
html body .howk-f-card,
html body .howk-f-card * {
  color: #c9a052 !important;
}

/* استثناءات: الروابط الرمادية وأيقونات السوشيال تبقى كما هي */
html body .howk-f-card a:not(.howk-f-social a) {
  color: #8b94a3 !important;
}

html body .howk-f-social a svg,
html body .howk-f-social a i,
html body .howk-f-social a img {
  color: #cfd4dc !important;
}

/* 2) تصغير الخطوط شويه */
html body .howk-f-brand {
  font-size: 15px !important;
}

html body .howk-f-card h2,
html body .howk-f-card h3,
html body .howk-f-card h4 {
  font-size: 16px !important;
}

html body .howk-f-card li,
html body .howk-f-card p,
html body .howk-f-card a,
html body .howk-f-card span {
  font-size: 12.5px !important;
}

html body .howk-f-desc {
  font-size: 12.5px !important;
}

/* 3) تصغير اللوجو شويه */
html body .howk-f-logo {
  width: min(48vw, 170px) !important;
  max-height: 150px !important;
}

/* 4) تكبير علامات الدفع شويه */
html body .howk-f-pay img {
  height: 52px !important;
  padding: 8px 14px !important;
}

@media (max-width: 767px) {
  html body .howk-f-logo {
    width: min(48vw, 170px) !important;
    max-height: 150px !important;
  }
  html body .howk-f-pay img {
    height: 46px !important;
    padding: 7px 12px !important;
  }
  html body .howk-f-brand { font-size: 15px !important; }
  html body .howk-f-card h2,
  html body .howk-f-card h3,
  html body .howk-f-card h4 { font-size: 16px !important; }
  html body .howk-f-card li,
  html body .howk-f-card p,
  html body .howk-f-card a,
  html body .howk-f-card span { font-size: 12.5px !important; }
}
/* ==========================================
   الفوتر: لوجو أصغر + دفع أكبر (تعديل أخير)
   ========================================== */

/* تصغير اللوجو مرة إضافية */
html body .howk-f-logo {
  width: min(38vw, 130px) !important;
  max-height: 115px !important;
}

/* تكبير علامات الدفع مرة إضافية */
html body .howk-f-pay img {
  height: 64px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
}

@media (max-width: 767px) {
  html body .howk-f-logo {
    width: min(38vw, 130px) !important;
    max-height: 115px !important;
  }
  html body .howk-f-pay img {
    height: 56px !important;
    padding: 8px 12px !important;
  }
}
/* ==========================================
   علامات الدفع — بتنسيق منصة سلة الاحترافي
   ========================================== */

html body .howk-f-pay {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  direction: ltr !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* البطاقة البيضاء: مقاس سلة الأصلي + لوجو بدون تمديد */
html body .howk-f-pay img {
  height: 48px !important;
  width: auto !important;
  max-width: 84px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

/* نفس التنسيق على الجوال */
@media (max-width: 767px) {
  html body .howk-f-pay {
    gap: 8px !important;
  }
  html body .howk-f-pay img {
    height: 44px !important;
    max-width: 76px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
}
/* ==========================================
   علامات الدفع (مدى / Visa / STC Pay / Apple Pay ...)
   بتنسيق منصة سلة النظيف
   ========================================== */

/* الحاوية: توسيط وفواصل منتظمة */
html body .howk-f-pay {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  direction: ltr !important;
  margin: 0 auto !important;
}

/* 1) اللوجو داخل غلاف (تنسيق سلة الافتراضي): الغلاف هو البطاقة البيضاء */
html body .howk-f-pay span:has(> img),
html body .howk-f-pay div:has(> img),
html body .howk-f-pay a:has(> img),
html body .howk-f-pay li:has(> img) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  width: auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  margin: 0 !important;
}

/* اللوجو نفسه (مدى/Visa/STC Pay/Apple Pay): حجم طبيعي بدون أي ضغط = وضوح كامل */
html body .howk-f-pay span:has(> img) > img,
html body .howk-f-pay div:has(> img) > img,
html body .howk-f-pay a:has(> img) > img,
html body .howk-f-pay li:has(> img) > img {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 64px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 2) لو اللوجو مباشر بدون غلاف: اللوجو نفسه يصبح البطاقة */
html body .howk-f-pay > img {
  height: 48px !important;
  width: auto !important;
  max-width: 84px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

/* الجوال: نفس التنسيق بمقاس أصغر قليلاً */
@media (max-width: 767px) {
  html body .howk-f-pay { gap: 8px !important; }

  html body .howk-f-pay span:has(> img),
  html body .howk-f-pay div:has(> img),
  html body .howk-f-pay a:has(> img),
  html body .howk-f-pay li:has(> img),
  html body .howk-f-pay > img {
    height: 44px !important;
    padding: 8px 12px !important;
  }

  html body .howk-f-pay span:has(> img) > img,
  html body .howk-f-pay div:has(> img) > img,
  html body .howk-f-pay a:has(> img) > img,
  html body .howk-f-pay li:has(> img) > img {
    height: 26px !important;
    max-height: 26px !important;
    max-width: 58px !important;
  }
}
/* ==========================================
   توحيد علامات الدفع في مستوى واحد + إزاحة يمين
   ========================================== */

/* أي عنصر مباشر داخل الصف = بطاقة بيضاء موحّدة (نفس المستوى) */
html body .howk-f-pay > * {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  margin: 0 !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  transform: none !important;
}

/* اللوجو داخل البطاقة بحجمه الطبيعي (وضوح كامل) */
html body .howk-f-pay > * > img,
html body .howk-f-pay > * > svg {
  height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: 64px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

/* لوجو مباشر بدون غلاف: يصبح هو البطاقة */
html body .howk-f-pay > img,
html body .howk-f-pay > svg {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 84px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
}

/* الصف: توسيط عمودي + إزاحة يمين شويه */
html body .howk-f-pay {
  align-items: center !important;
  transform: translateX(6px) !important;
}

@media (max-width: 767px) {
  html body .howk-f-pay > *,
  html body .howk-f-pay > img,
  html body .howk-f-pay > svg {
    height: 44px !important;
    max-height: 44px !important;
    padding: 8px 12px !important;
  }
  html body .howk-f-pay > * > img,
  html body .howk-f-pay > * > svg {
    height: 26px !important;
    max-height: 26px !important;
    max-width: 58px !important;
  }
  html body .howk-f-pay { transform: translateX(4px) !important; }
}
/* ==========================================
   1) علامات الدفع: خلفية أصلية بدون بطاقة بيضاء مضافة
   ========================================== */

html body .howk-f-pay,
html body .howk-f-pay > *,
html body .howk-f-pay > img,
html body .howk-f-pay > svg,
html body .howk-f-pay span:has(> img),
html body .howk-f-pay div:has(> img),
html body .howk-f-pay a:has(> img),
html body .howk-f-pay li:has(> img) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* تبقى موحّدة في مستوى واحد بدون خلفية مضافة */
html body .howk-f-pay > *,
html body .howk-f-pay > img,
html body .howk-f-pay > svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
}

html body .howk-f-pay > * > img,
html body .howk-f-pay > * > svg,
html body .howk-f-pay > img,
html body .howk-f-pay > svg {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 90px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block !important;
}

@media (max-width: 767px) {
  html body .howk-f-pay > *,
  html body .howk-f-pay > img,
  html body .howk-f-pay > svg,
  html body .howk-f-pay > * > img,
  html body .howk-f-pay > * > svg {
    height: 38px !important;
    max-height: 38px !important;
    max-width: 78px !important;
  }
}

/* ==========================================
   2) علامة الشهادة: آخر شيء تحت الحقوق
   ========================================== */

html body .howk-f-cert {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 6px auto 0 !important;
}

html body .howk-f-cert img {
  height: 40px !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
/* ==========================================
   الجوال: علامات الدفع صف واحد بالعرض + أكبر
   ========================================== */
@media (max-width: 767px) {

  /* الصف: بدون التفاف، ممتد على كامل العرض، مستوى واحد */
  html body .howk-f-pay {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* كل علامة تأخذ حصة متساوية من العرض */
  html body .howk-f-pay > *,
  html body .howk-f-pay > img,
  html body .howk-f-pay > svg {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    align-self: center !important;
  }

  /* اللوجو يملأ حصته بالكامل بدون تمديد = أكبر وأوضح */
  html body .howk-f-pay > * > img,
  html body .howk-f-pay > * > svg,
  html body .howk-f-pay > img,
  html body .howk-f-pay > svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 46px !important;
    object-fit: contain !important;
    display: block !important;
  }
}
/* ==========================================
   علامات الدفع: صف أفقي واحد بالعرض — كل المستويات
   مدى | STC Pay | Apple Pay | Visa | mada
   ========================================== */

/* كل حاوية داخل منطقة الدفع (أي عمق) تصبح صفاً أفقياً */
html body .howk-f-pay,
html body .howk-f-pay div,
html body .howk-f-pay ul,
html body .howk-f-pay li,
html body .howk-f-pay span,
html body .howk-f-pay a,
html body .howk-f-pay p {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* كل لوجو: حصة متساوية من العرض + حجم احترافي واضح */
html body .howk-f-pay img,
html body .howk-f-pay svg {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ديسكتوب: أكبر شويه وفواصل أوسع */
@media (min-width: 768px) {
  html body .howk-f-pay { gap: 10px !important; }
  html body .howk-f-pay img,
  html body .howk-f-pay svg { max-height: 48px !important; }
}
/* ==========================================
   لوجو بين الصفحات: أعرض أصغر + أسرع
   ========================================== */

/* تصغير عرض اللوجو */
:root {
  --hk-size: min(32vw, 170px);
}

/* تسريع الدخول: 1.8 ثانية بدل 2.4 */
body::before {
  animation-duration: 1.8s !important;
}

body::after {
  animation-duration: 1.8s !important;
}

/* تسريع الخروج: 0.4 ثانية بدل 0.5 */
body.hk-exit::before {
  animation-duration: 0.4s !important;
}

body.hk-exit::after {
  animation-duration: 0.4s !important;
}
/* ==========================================
   لوجو الهيدر: أصغر + منزّل لتحت (موحّد مع الجافا)
   ========================================== */

html body .navbar-brand,
html body .header-logo,
html body .store-logo {
  top: 58% !important;
}

html body .navbar-brand img,
html body .header-logo img,
html body .store-logo img {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
}

/* توحيد الصفحة الرئيسية مع باقي الصفحات (إلغاء فرق howk-home) */
html body.howk-home .navbar-brand img,
html body.howk-home .header-logo img,
html body.howk-home .store-logo img {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

@media (min-width: 768px) {
  html body .navbar-brand,
  html body .header-logo,
  html body .store-logo {
    top: 57% !important;
  }
  html body .navbar-brand img,
  html body .header-logo img,
  html body .store-logo img,
  html body.howk-home .navbar-brand img,
  html body.howk-home .header-logo img,
  html body.howk-home .store-logo img {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
  }
}

/* ==========================================
   بطاقة المنتج: توسيط + ألوان + تفاعل
   ========================================== */

/* الحاوية الداخلية للبطاقة في المنتصف */
html body .howkn-info-inner {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* الاسم: أبيض + في المنتصف (ويتحول ذهبي عند الـ hover من قواعد المرجع) */
html body .howkn-name {
  color: #ffffff !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* السعر: ذهبي + في المنتصف */
html body .howkn-price {
  color: #c9a052 !important;
  text-align: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .howkn-price * {
  color: #c9a052 !important;
}

/* الألوان والزر في المنتصف */
html body .howkn-colors {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .howkn-btn {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ==========================================
   صفحة المنتج: إخفاء المرفقات والمتبقي ورمز المنتج
   ========================================== */

html body .howkvn-sku,
html body [class*="attach"],
html body [class*="file-attach"],
html body [class*="attachment"],
html body [class*="sku"],
html body [class*="remain"],
html body [class*="remaining"],
html body [class*="stock-left"],
html body [class*="left-stock"],
html body salla-attachments,
html body salla-product-attachments {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}
/* ==========================================
   صفحة المنتج: حجب فوري للعناصر المحذوفة نهائياً
   ========================================== */
html body .howkvn-sku,
html body [class*="sku"],
html body [class*="tags"]:not(.howkvn-thumbs),
html body [class*="product-tag"],
html body salla-product-tags,
html body [class*="note"],
html body salla-add-note,
html body salla-order-note {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ==========================================
   صفحة المنتج: حجب فوري لسطر الرمز وويدجت الملاحظة
   ========================================== */
html body .howkvn-sku,
html body [class*="sku"],
html body salla-add-note,
html body salla-order-note,
html body [class*="add-note"],
html body [class*="order-note"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
}
/* ==========================================
   إصلاح: استعادة سطر «شامل الضريبة والتوصيل»
   (كان مخفياً بالخطأ عبر قاعدة [class*="note"])
   ========================================== */
html body .howk-vn-price-note {
  display: inline !important;
  visibility: visible !important;
  opacity: 0.85 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #c9a052 !important;
}

/* حماية إضافية: أي عنصر داخل سعر المنتج لا يُخفى بقواعد الملاحظات */
html body .howk-vn-price .howk-vn-price-note,
html body .howk-vn-price span {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.howk-lp {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 28px;
  text-align: center;
  direction: rtl;
  background: #0d0d0d;
  border-radius: 18px;
  box-sizing: border-box;
}
.howk-lp .video-box {
  width: 100%;
  border: 1px solid #c9a45c;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.howk-lp .video-box video {
  width: 100%;
  max-height: 80vh;
  display: block;
  object-fit: cover;
}
.howk-lp .title {
  margin: 20px 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #c9a45c;
}
.howk-lp .sub {
  margin: 0 0 20px;
  font-size: 15px;
  color: #b8b8b8;
}
.howk-lp .order-btn {
  display: block;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  background: linear-gradient(135deg, #c9a45c, #e3c887);
  color: #0d0d0d !important;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none !important;
}