/* Compact, responsive product cards. Scoped to the homepage product grid. */
#productGrid.product-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:stretch; }
#productGrid .product-card {
  display:flex; flex-direction:column; min-width:0; width:100%; height:100%; padding:0;
  border:1px solid #e6eaf2; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 3px 14px rgba(16,24,40,.05);
}
#productGrid .product-card__image {
  position:relative; display:block; width:100%; min-height:0;
  aspect-ratio:1 / 1; overflow:hidden; background:#fff; font-size:inherit;
}
#productGrid .product-gallery {
  display:block; width:100%; height:100%; min-height:0; border:0;
  padding:0; text-align:center; cursor:pointer; background:#fff;
}
#productGrid .product-card__image img, #productGrid .product-gallery img {
  display:block; width:100%; height:100%; object-fit:contain;
  object-position:center; padding:7px; background:#fff;
}
#productGrid .product-gallery:focus-visible, #productGrid .product-card__title a:focus-visible,
#productGrid .add-cart:focus-visible { outline:3px solid #7eaaff; outline-offset:-3px; }
#productGrid .product-card__placeholder { display:grid; place-items:center; width:100%; height:100%; background:#f7f9fc; font-size:54px; }
#productGrid .product-card__tag {
  position:absolute; z-index:2; top:10px; left:0; max-width:calc(100% - 12px);
  border:0; border-radius:0 7px 7px 0; padding:6px 9px; background:#1c3e7a;
  color:#fff; font-size:10px; font-weight:800; line-height:1.15;
  letter-spacing:0; white-space:normal; pointer-events:none;
}
#productGrid .product-card__tag--discount { background:#a72f36; }
#productGrid .product-card__body { display:flex; flex:1; flex-direction:column; min-width:0; padding:13px 12px 14px; }
#productGrid .product-card__category {
  display:block; margin-bottom:5px; font-size:10px; line-height:1.35; font-weight:800;
  color:#385a93; text-transform:uppercase; letter-spacing:.04em;
}
#productGrid .product-card__title {
  margin:0 0 12px; min-width:0; font-size:14px; line-height:1.38;
  font-weight:650; letter-spacing:0; color:#172237;
}
#productGrid .product-card__title a {
  color:inherit; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  overflow-wrap:anywhere; text-decoration:none; min-height:2.76em;
}
#productGrid .product-card__title a:hover { color:#1c3e7a; }
#productGrid .product-card__pricing {
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:3px 8px; margin-top:auto; min-width:0; line-height:1.3;
}
#productGrid .product-card__sale-price {
  color:#e84221; font-size:19px; line-height:1.25; font-weight:900;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
#productGrid .product-card__old-price {
  color:#7d8798; font-size:12px; line-height:1.25;
  font-weight:550; white-space:nowrap; text-decoration:line-through;
}
#productGrid .add-cart {
  display:flex; align-items:center; justify-content:center;
  width:100%; min-width:0; min-height:38px; margin-top:11px; padding:9px 10px;
  border:0; border-radius:8px; background:#173f87; color:#fff;
  font-size:12px; line-height:1.25; font-weight:800; white-space:nowrap; cursor:pointer;
}
#productGrid .add-cart:hover { background:#0b2c68; }
@media (max-width:1120px) { #productGrid.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:920px) { #productGrid.product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } }
@media (max-width:680px) {
  #productGrid.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  #productGrid .product-card__body { padding:10px 9px 11px; }
  #productGrid .product-card__title { font-size:13px; margin-bottom:10px; }
  #productGrid .product-card__sale-price { font-size:17px; }
  #productGrid .product-card__old-price { font-size:11px; }
  #productGrid .product-card__tag { top:7px; font-size:9px; padding:5px 7px; }
  #productGrid .add-cart { min-height:36px; font-size:11px; margin-top:9px; }
}
@media (max-width:320px) { #productGrid.product-grid { grid-template-columns:1fr; } }
