/* Add custom CSS styles below */ 
/* ─────────────────────────────────────────
   Julie Beauty — Banner & Product Image Style
────────────────────────────────────────── */
:root {
  --jb-pink-main: #ff4d86;  
  --jb-pink-light: #ff7aab;
  --jb-bg: #ffffff;
  --jb-text: #111111;
  --jb-muted: #666666;
  --jb-radius: 12px;
  --jb-shadow: 0 8px 30px rgba(0,0,0,0.08);
  --jb-transition: 240ms ease-in-out;
}

/* FREE SHIPPING BANNER */
#jb-free-shipping {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99999;
  background: linear-gradient(90deg, var(--jb-pink-main), var(--jb-pink-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  box-shadow: var(--jb-shadow);
  transform: translateY(-120%);
  opacity: 0;
  transition: transform var(--jb-transition), opacity var(--jb-transition);
  border-bottom-left-radius: var(--jb-radius);
  border-bottom-right-radius: var(--jb-radius);
  text-align: center;
  font-size: 15px;
  direction: rtl;
}

#jb-free-shipping.jb-open {
  transform: translateY(0);
  opacity: 1;
}

#jb-free-shipping .jb-text { font-weight:600; line-height:1.2; }
#jb-free-shipping .jb-cta {
  background: #fff;
  color: var(--jb-pink-main);
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: var(--jb-radius);
  font-weight:700;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255,77,134,0.18);
  margin-left:1rem;
}
#jb-free-shipping .jb-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size:18px;
  cursor:pointer;
  margin-left:8px;
}

/* BODY PUSH when banner open */
body.jb-banner-open {
  padding-top:64px !important;
}

/* PRODUCT IMAGE IMPROVEMENTS */
.product-card img,
.card-body img,
img.product-image {
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
  border-radius: var(--jb-radius);
  transition: transform var(--jb-transition), filter var(--jb-transition);
}

.product-card img:hover,
.card-body img:hover,
img.product-image:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* RESPONSIVE GRID / CARD TWEAK (if تحتاج) */
@media (min-width:768px) {
  .products-grid {
    grid-template-columns: repeat(3,1fr) !important;
  }
}
@media (min-width:1100px) {
  .products-grid {
    grid-template-columns: repeat(4,1fr) !important;
  }
}