/* Layout shell */
.products .container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: 1fr; /* add a sidebar later if you want */
  gap: 24px;
}

.home .shop-logo {
  text-align: center;
  margin: 16px 0 24px;
}
.home .shop-logo img { max-width: 280px; height: auto; }

/* Grid */
ul.products.grid-bysarai {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) {
  ul.products.grid-bysarai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  ul.products.grid-bysarai { grid-template-columns: 1fr; }
}

/* Card */
ul.products.grid-bysarai > li.product {
  position: relative;
  padding: 0;
  margin: 0;
}
ul.products.grid-bysarai > li.product > a {
  position: absolute; inset: 0; z-index: 1; /* make entire card clickable */
}

.imgcont {
  position: relative;
  aspect-ratio: 1 / 1; /* square like the sample thumbs */
  overflow: hidden;
  background: #f5f5f5;
  display:flex; align-items:center; justify-content:center;
}
.imgcont img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
ul.products.grid-bysarai > li.product:hover .imgcont img { transform: scale(1.03); }

/* Sold-out overlay + blur (class added when OOS) */
li.product.sold .imgcont p {
  position: absolute;
  top: 10px; left: 10px;
  background: #000; color: #fff;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 8px; z-index: 2;
}
li.product.sold .imgcont img.blur { filter: grayscale(30%) blur(2px) brightness(0.9); }

/* Description block */
.productdesc { padding: 10px 4px 0; }
.productdesc h2 {
  font-size: 16px; font-weight: 600; line-height: 1.3; margin: 8px 0 6px;
  text-transform: none;
}
.productdesc h3.price {
  font-size: 15px; font-weight: 600; margin: 0 0 4px;
}
.productdesc .currency_sign { font-variant-numeric: tabular-nums; opacity: .9; }
.productdesc p.availability {
  font-size: 13px; margin: 0; color: #777; text-transform: lowercase;
}

/* Pager like the sample */
.pages { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 28px 0 12px; }
.pages .disabled { opacity: .35; }
.pages a, .pages span { font-size: 14px; }
.pages .current { font-weight: 700; }
.pages ul { list-style: none; display: flex; gap: 8px; margin: 0 10px; padding: 0; }
.pages ul li a { text-decoration: none; }
.pages a.next, .pages a.previous { text-decoration: none; }

/* Footer links */
.shop-footer { margin-top: 40px; border-top: 1px solid #eee; padding-top: 20px; }
.shop-footer .linkline ul { display: flex; gap: 16px; list-style: none; margin: 0 0 8px; padding: 0; justify-content: center; }
.shop-footer .bottom { text-align: center; color: #666; font-size: 14px; }

/* Optional: match your theme */
:root {
  --text: #111;
}
body { color: var(--text); }