/* ============================================================
   JU Shop — CSS العام (هوية JU الموحدة + إصلاحات)
   يُلصق في: لوحة سلة → المتجر → التصميم → تخصيص CSS
   يعيد صبغ المتجر كاملاً: بنفسجي ملكي + ذهبي بدل الأزرق/الكحلي
   ============================================================ */








@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');








/* ---------- 1. إعادة تعريف ألوان الثيم (قلب الهوية) ---------- */
:root {
  --color-primary: #D4A94A !important;          /* الذهبي: الأسعار، الروابط، الأزرار الرئيسية */
  --color-primary-dark: #b8923c !important;
  --color-primary-light: #e3c06a !important;
  --color-primary-reverse: #2A0730 !important;








  --bg-primary: #180A1C !important;             /* خلفية الصفحات: بنفسجي داكن بدل الكحلي */
  --bg-secondary: #241028 !important;
  --header-bg: #14060F !important;
  --store-text-primary: #F5F0E6 !important;
  --store-text-secondary: #B8A8BE !important;








  --product-bg: #241028 !important;
  --product-border-color: rgba(212, 169, 74, .22) !important;
  --product-enhanced-btn-bg: #4A0E52 !important;
  --product-enhanced-btn-color: #ffffff !important;








  --bottom-nav-bg: #14060F !important;
  --bottom-nav-text-color: #D4A94A !important;
  --wa-btn-bg: #25D366 !important;
  --wa-btn-text-color: #ffffff !important;








  --font-main: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
}








/* ---------- 2. الخط الموحد ---------- */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, span, li {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif !important;
}
/* JU DASHCAM BRANDS + FOOTER — 2026-08-27 */
html.ju-luxury .ju-dashcam-brands {
  background:#0E1230 !important;
  border-block:1px solid rgba(255,255,255,.07);
  padding-block:clamp(32px,4vw,56px) !important;
}
html.ju-luxury .ju-dashcam-brands .home-block-title {
  margin-bottom:28px !important;
  color:#F5F0E6 !important;
}
html.ju-luxury .ju-dashcam-brands .brands__grid {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:clamp(12px,1.7vw,22px) !important;
  max-width:1180px;
  margin-inline:auto;
  align-items:stretch;
}
html.ju-luxury .ju-dashcam-brands .brands__item {
  min-height:116px;
  padding:22px 24px;
  border:1px solid rgba(151,164,213,.28);
  border-radius:18px;
  background:rgba(248,249,255,.97) !important;
  box-shadow:0 14px 36px rgba(1,4,18,.20);
  opacity:1 !important;
  transform:none !important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
html.ju-luxury .ju-dashcam-brands .brands__item:hover {
  border-color:rgba(46,107,255,.48);
  box-shadow:0 18px 44px rgba(1,4,18,.28);
  transform:translateY(-3px) !important;
}
html.ju-luxury .ju-dashcam-brands .brands__logo {
  display:block;
  width:100%;
  max-width:190px;
  height:60px;
  max-height:none !important;
  margin-inline:auto;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
}
html.ju-luxury .s-block--animated-brands {
  display:none !important;
}
html.ju-luxury footer.store-footer {
  background:#0E1230 !important;
  border-top:0 !important;
  position:relative;
}
html.ju-luxury footer.store-footer::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,#2E6BFF 0%,#7A3BFF 50%,#FF4FA3 100%);
  pointer-events:none;
  z-index:2;
}
html.ju-luxury footer.store-footer .store-footer__curve,
html.ju-luxury footer.store-footer .store-footer__curve path {
  color:#0E1230 !important;
  fill:#0E1230 !important;
}
html.ju-luxury footer.store-footer .store-footer__inner,
html.ju-luxury footer.store-footer .store-footer__contacts-row {
  background:#0E1230 !important;
  color:#F5F0E6 !important;
}
html.ju-luxury footer.store-footer .footer-bottom {
  background:#1c2436 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  color:#F5F0E6 !important;
}
html.ju-luxury footer.store-footer .store-footer__menu-title,
html.ju-luxury footer.store-footer .store-footer__menu-link,
html.ju-luxury footer.store-footer .footer-description,
html.ju-luxury footer.store-footer .footer-rights {
  color:#F5F0E6 !important;
}
html.ju-luxury footer.store-footer .store-footer__menu-link {
  opacity:.8;
}
html.ju-luxury footer.store-footer .store-footer__menu-link:hover {
  opacity:1;
  color:#fff !important;
}
@media (max-width:767px) {
  html.ju-luxury .ju-dashcam-brands .brands__grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  html.ju-luxury .ju-dashcam-brands .brands__item {
    min-height:88px;
    padding:16px;
    border-radius:14px;
  }
  html.ju-luxury .ju-dashcam-brands .brands__logo {
    height:46px;
  }
  html.ju-luxury .ju-dashcam-brands .brands__item:last-child:nth-child(odd) {
    grid-column:1/-1;
    width:calc(50% - 6px);
    justify-self:center;
  }
}
@media (prefers-reduced-motion:reduce) {
  html.ju-luxury .ju-dashcam-brands .anime-item,
  html.ju-luxury footer.store-footer .anime-item {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}
/* JU BRAND CARDS — stronger than late theme injection */
html.ju-luxury body .s-block--brands.ju-dashcam-brands {
  background:#0E1230 !important;
  border-block:1px solid rgba(255,255,255,.07) !important;
  padding-block:clamp(32px,4vw,56px) !important;
}
html.ju-luxury body .s-block--brands.ju-dashcam-brands .brands__grid {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:clamp(12px,1.7vw,22px) !important;
  max-width:1180px !important;
  margin-inline:auto !important;
}
html.ju-luxury body .s-block--brands.ju-dashcam-brands .brands__item {
  min-height:116px !important;
  padding:22px 24px !important;
  border:1px solid rgba(151,164,213,.28) !important;
  border-radius:18px !important;
  background:#F8F9FF !important;
  box-shadow:0 14px 36px rgba(1,4,18,.20) !important;
  opacity:1 !important;
  transform:none !important;
}
html.ju-luxury body .s-block--brands.ju-dashcam-brands .brands__logo {
  width:100% !important;
  max-width:190px !important;
  height:60px !important;
  max-height:none !important;
  margin-inline:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
}
@media (max-width:767px) {
  html.ju-luxury body .s-block--brands.ju-dashcam-brands .brands__grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  html.ju-luxury body .s-block--brands.ju-dashcam-brands .brands__item {
    min-height:88px !important;
    padding:16px !important;
  }
  html.ju-luxury body .s-block--brands.ju-dashcam-brands .brands__logo {
    height:46px !important;
  }
}
/* JU DASHCAM PICKS — balanced 8-product grid */
html.ju-luxury body #ju-details-tabs-panel-0 .s-products-list-wrapper {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}
html.ju-luxury body #ju-details-tabs-panel-0 custom-salla-product-card {
  min-width:0 !important;
  width:100% !important;
}
@media (max-width:1100px) {
  html.ju-luxury body #ju-details-tabs-panel-0 .s-products-list-wrapper {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width:767px) {
  html.ju-luxury body #ju-details-tabs-panel-0 .s-products-list-wrapper {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
}

/* JU PRODUCT CARDS — EDGE-TO-EDGE MEDIA 2026-09-01 */
html.ju-luxury custom-salla-product-card .product-card__image {
  padding:0 !important;
  background:#080B1D !important;
}
html.ju-luxury custom-salla-product-card .product-card__image img {
  padding:0 !important;
  background:#080B1D !important;
}
html.ju-luxury body.index #ju-details-tabs-panel-0 custom-salla-product-card.product-card--fit-height .product-card__image {
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
}
html.ju-luxury body.index #ju-details-tabs-panel-0 custom-salla-product-card .product-card__image > a {
  display:block !important;
  width:100% !important;
  height:100% !important;
}
html.ju-luxury body.index #ju-details-tabs-panel-0 custom-salla-product-card .product-card__image img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* JU PRODUCT CARD PATCH START 2026-09-01 */
/* ==========================================================
   JU PRODUCT CARD SURFACE + MOBILE FLOATING CONTROLS
   Scope: Salla storefront / Selia theme
   Date: 2026-09-01
   ========================================================== */

custom-salla-product-card.product-card {
  background: linear-gradient(155deg, #121933 0%, #0B1027 100%) !important;
  border: 1px solid rgba(151, 164, 213, .18) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
  overflow: hidden !important;
}

custom-salla-product-card.product-card .product-card__image {
  background: #080B1D !important;
  background-image: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

custom-salla-product-card.product-card .product-card__image > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

custom-salla-product-card.product-card .product-card__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #080B1D !important;
  object-fit: contain !important;
  object-position: center !important;
}

custom-salla-product-card.product-card .product-card__content {
  background: linear-gradient(180deg, #111831 0%, #0B1027 100%) !important;
  border-top: 1px solid rgba(151, 164, 213, .13) !important;
  padding: 14px !important;
}

/* The main-page premium product grid must remain square on mobile. */
body.index #ju-details-tabs-panel-0 custom-salla-product-card.product-card--fit-height .product-card__image {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.index #ju-details-tabs-panel-0 custom-salla-product-card .product-card__title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  width: 100% !important;
  min-height: 42px !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

@media (hover: hover) and (pointer: fine) {
  custom-salla-product-card.product-card {
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
  }

  custom-salla-product-card.product-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(244, 215, 122, .32) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .30) !important;
  }
}

@media (max-width: 767px) {
  body.index #ju-details-tabs-panel-0 custom-salla-product-card.product-card .product-card__content {
    padding: 10px !important;
  }

  /* Keep WhatsApp clear of the bottom navigation and separate it from scroll-to-top. */
  #wa-selia {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.index .scroll-to-top.left {
    right: 14px !important;
    left: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  custom-salla-product-card.product-card {
    transition: none !important;
  }
}
/* JU PRODUCT CARD PATCH END 2026-09-01 */


/* A810 group-card cache fallback */
a[href*="/azmaadO"] > img.main-image[src*="placeholder"] {
  content: url("https://cdn.files.salla.network/other/1784789111/32d7ac3f-8e1f-4686-aa03-6940ec908ab6-original.webp") !important;
  object-fit: cover !important;
  object-position: center !important;
}

a[href*="/azmaadO"]:has(> img.main-image[src*="placeholder"]) {
  background: #080B1D url("https://cdn.files.salla.network/other/1784789111/32d7ac3f-8e1f-4686-aa03-6940ec908ab6-original.webp") center / contain no-repeat !important;
}
a[href*="/azmaadO"] > img.main-image[src*="placeholder"] { opacity: 0 !important; }