/* IX Shop Grid - Responsive product cards + popup */
/* ====== Tokens ====== */
:root{
  --ix-orange:#ff7a00;
  --ix-black:#111;
  --ix-gray:#777;
  --ix-border:#e9eaee;
  --ix-green:#16a34a;
  --ix-red:#ef4444;
  --ix-radius:16px;
  --ix-shadow:0 8px 22px rgba(0,0,0,.08);
}
html.rtl .products{direction:rtl}

/* ====== Grid ====== */
.products.ix-grid{
  display:flex; flex-wrap:wrap; gap:14px; list-style:none; margin:0; padding:0;
}
.products.ix-grid li.product{
  background:#fff; border:1px solid var(--ix-border); border-radius:var(--ix-radius);
  box-shadow:var(--ix-shadow); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
  flex:1 1 calc(50% - 14px); max-width:calc(50% - 14px); position:relative;
}
.products.ix-grid.ix-cols-3 li.product{ flex-basis:calc(33.333% - 14px); max-width:calc(33.333% - 14px) }
.products.ix-grid.ix-cols-4 li.product{ flex-basis:calc(25% - 14px);     max-width:calc(25% - 14px) }
.products.ix-grid.ix-cols-5 li.product{ flex-basis:calc(20% - 14px);     max-width:calc(20% - 14px) }

.products.ix-grid li.product:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

/* Card content */
.products.ix-grid li.product a.woocommerce-LoopProduct-link{
  display:block; padding:14px 14px 8px;
}
.products.ix-grid li.product img{
  aspect-ratio:1/1; width:100%; object-fit:contain; background:#fafafa; border-radius:12px;
  transition:transform .25s ease;
}
.products.ix-grid li.product:hover img{ transform:scale(1.04) }

/* Sale badge */
.woocommerce span.onsale{
  background:var(--ix-orange); color:#fff; border-radius:999px; padding:6px 10px; font-weight:700;
  right:12px; left:auto; top:12px; min-height:auto; line-height:1; box-shadow:var(--ix-shadow);
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.products.ix-grid li.product .woocommerce-loop-product__title{
  font-size:1rem; line-height:1.6; color:var(--ix-black); margin:12px 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Price styling (del: red + strikethrough, ins: green) */
.woocommerce ul.products li.product .price,
.products.ix-grid li.product .price{
  font-weight:800; margin:8px 14px 10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.woocommerce ul.products li.product .price del,
.products.ix-grid li.product .price del{
  order:2; color:var(--ix-red); opacity:.95; text-decoration-thickness:2px; text-decoration-color:var(--ix-red);
}
.woocommerce ul.products li.product .price del .amount,
.products.ix-grid li.product .price del .amount{ color:var(--ix-red) }
.woocommerce ul.products li.product .price ins,
.products.ix-grid li.product .price ins{
  order:1; background:rgba(22,163,74,.08); color:var(--ix-green); border-radius:10px; padding:2px 8px; text-decoration:none;
}
.products.ix-grid li.product .star-rating{ margin:0 14px 6px }

/* Add to cart button */
.products.ix-grid li.product .button{
  width:calc(100% - 28px); margin:8px 14px 14px; padding:12px 14px; border-radius:12px;
  background:var(--ix-black); color:#fff; font-weight:700; letter-spacing:.2px;
  display:inline-flex; justify-content:center; align-items:center; gap:8px; transition:background .2s ease, transform .04s ease;
}
.products.ix-grid li.product .button:hover{ background:#000 }
.products.ix-grid li.product .button:active{ transform:translateY(1px) }

/* Floating cart badge */
.ix-cart-badge{
  position:fixed; inset-inline-end:18px; bottom:18px; background:#fff; border:1px solid var(--ix-border); border-radius:999px;
  padding:8px 12px; display:flex; align-items:center; gap:8px; box-shadow:var(--ix-shadow); z-index:9999; text-decoration:none;
}
.ix-cart-badge__count{ background:var(--ix-orange); color:#fff; border-radius:999px; padding:2px 8px; font-weight:800 }

/* Modal */
.ix-modal{ position:fixed; inset:0; z-index:10000; display:none }
.ix-modal.is-open{ display:block }
.ix-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px) }
.ix-modal__dialog{
  position:relative; max-width:480px; margin:10vh auto 0; background:#fff; border-radius:20px; border:1px solid var(--ix-border);
  box-shadow:0 24px 80px rgba(0,0,0,.22); padding:24px 22px 18px; text-align:center;
}
.ix-modal__icon{ font-size:40px; margin-bottom:8px }
.ix-modal__product{ color:#333; margin:10px 0 18px }
.ix-modal__actions{ display:flex; justify-content:center; gap:10px }
.ix-btn{ padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:8px }
.ix-btn--solid{ background:var(--ix-orange); color:#fff }
.ix-btn--outline{ background:#fff; border:2px solid var(--ix-black); color:var(--ix-black) }
.ix-modal__close{
  position:absolute; inset-inline-end:10px; top:10px; width:36px; height:36px; border-radius:999px; border:1px solid var(--ix-border);
  background:#fff; cursor:pointer; font-size:20px; line-height:1
}

/* Responsive */
@media (max-width:767.98px){
  .products.ix-grid li.product{ flex-basis:100%; max-width:100% }
}