.products-category { width: 100%; }
.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.catalog-product-card { min-width: 0; box-sizing: border-box; display: flex; align-items: stretch; gap: 1rem; padding: 1rem; background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 16px; box-shadow: 0 8px 20px rgba(15,23,42,.06); }
.product-image-wrap { position: relative; flex: 0 0 150px; height: 150px; min-width: 0; overflow: hidden; border-radius: 12px; background: #f8f8f8; }
.product-image-wrap img { width: 100%; height: 100%; object-fit: contain; }
.product-card-content { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.product-card-content h2 { margin: 0; color: #1f2937; font-size: 1rem; line-height: 1.25; }
.product-card-content p { margin: .45rem 0; color: #6b7280; font-size: .78rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.product-price { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-top: auto; }
.product-badge { position: absolute; top: 8px; right: 8px; z-index: 2; box-sizing: border-box; max-width: calc(100% - 16px); padding: 6px 8px; border-radius: 8px; background: linear-gradient(135deg, #ffb347, #ffcc33); color: #111; font-size: .78rem; font-weight: 700; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-align: center; pointer-events: none; box-shadow: 0 6px 16px rgba(2,6,23,.08); }
.product-badge.type-delivery { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.product-badge.type-both { background: linear-gradient(135deg, #0ea5b2, #06b6d4); color: #fff; }
.product-price del { color: #9ca3af; font-size: .8rem; }
.product-price strong { color: #d7992d; font-size: 1rem; }
.product-save { display: block; margin-top: 2px; color: #16834b; font-size: .875rem; line-height: 1.2; overflow-wrap: anywhere; }
.product-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.qty-controls { display: inline-flex; align-items: center; gap: .45rem; }
.qty-controls button, .btn-add-cart { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border: 0; border-radius: 8px; background: #fff4c9; color: #7a4f00; cursor: pointer; }
.qty-display { min-width: 18px; text-align: center; font-weight: 700; }
.btn-add-cart { background: #f0b54a; color: #111; padding-inline: .65rem; }
.btn-add-cart.in-cart { background: #159957; color: #fff; }
.products-empty { margin: 0; padding: 1rem; color: #6b7280; text-align: center; background: #fff; border-radius: 12px; }
@media (max-width: 1199px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .catalog-product-card { flex-direction: row; gap: .75rem; }
  .product-image-wrap { width: clamp(88px, 38%, 150px); flex: 0 0 clamp(88px, 38%, 150px); height: auto; aspect-ratio: 1 / 1; align-self: flex-start; }
}
@media (max-width: 575px) {
  .products-grid { grid-template-columns: 1fr; gap: .85rem; }
  .catalog-product-card { padding: .75rem; gap: .75rem; }
  .product-image-wrap { width: clamp(88px, 38%, 125px); flex-basis: clamp(88px, 38%, 125px); }
  .product-badge { top: 6px; right: 6px; max-width: calc(100% - 12px); padding: 4px 6px; font-size: .68rem; line-height: 1.2; }
}
@media (min-width: 1600px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.product-image-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  z-index: 2000;
  animation: product-lightbox-fade 0.2s ease;
}

.product-image-lightbox.is-open {
  display: flex;
}

.product-image-lightbox-inner {
  position: relative;
  width: min(90vw, 760px);
  max-width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.97));
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
  padding: 0.9rem;
  transform: scale(0.98);
  animation: product-lightbox-in 0.2s ease forwards;
}

.product-image-lightbox-image {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 14px;
  background: #f8fafc;
}

.product-image-lightbox-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease, background 0.2s ease;
}

.product-image-lightbox-close:hover,
.product-image-lightbox-close:focus-visible {
  background: rgba(15, 23, 42, 0.9);
  transform: scale(1.04);
}

@keyframes product-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes product-lightbox-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Keep catalog badges independent from the shared search badge styles. */
.catalog-product-card .product-image-wrap > .product-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  display: block;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 16px);
  height: auto;
  margin: 0;
  padding: 6px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
  text-align: center;
}

@media (max-width: 575px) {
  .catalog-product-card .product-image-wrap > .product-badge {
    top: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    padding: 4px 6px;
    font-size: .68rem;
    line-height: 1.2;
  }
}