/*
 * Deliberately small — the active theme's own Bootstrap CSS handles cards,
 * buttons, grid, and pagination. This file only covers what Bootstrap
 * doesn't: product image cropping, hover animation, and the vanilla modal
 * (no Bootstrap JS dependency, so no data-bs-* wiring needed).
 */
/* Search bar container — actual look comes from an inline style built from
   Settings -> Marketplace -> Search Bar Appearance; this is just the fallback. */
.marketplace-widget .mktp-filters { background: #f8f9fa; border: 1px solid rgba(0, 0, 0, .06); border-radius: .5rem; padding: 1rem; }

/* Loading/error/"no products" placeholders inside the results grid — the grid
   itself carries row-cols-* classes (so real product cards divide evenly up
   to 5 per row), but those rules apply to ANY direct child by position, not
   just ones meant to be a grid cell. Without this override a "col-12"
   placeholder gets squeezed down to a single column's width (e.g. 1/3 or
   1/5) and sits left-aligned instead of spanning the whole row. */
.marketplace-widget [data-mktp-list] > .mktp-full-row { flex: 0 0 100%; max-width: 100%; width: 100%; }

.marketplace-widget .mktp-product-img { width: 100%; height: 100%; object-fit: cover; }

/* Skeleton loading cards — greyed-out blocks with a shimmer sweeping across,
   shown in the same card/grid shape as real results while they load. */
.marketplace-widget .mktp-skeleton-card { pointer-events: none; }
.marketplace-widget .mktp-skeleton {
  background: linear-gradient(90deg, #e9ecef 25%, #f3f4f6 37%, #e9ecef 63%);
  background-size: 400% 100%;
  animation: mktp-shimmer 1.4s ease infinite;
}
.marketplace-widget .mktp-skeleton-img { border-radius: 0; }
.marketplace-widget .mktp-skeleton-line { height: 14px; border-radius: 4px; }
.marketplace-widget .mktp-skeleton-title { height: 18px; width: 70%; }
.marketplace-widget .mktp-skeleton-line-sm { width: 50%; }
@keyframes mktp-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .marketplace-widget .mktp-skeleton { animation: none; background-position: 50% 50%; }
}

.marketplace-widget .mktp-clickable { cursor: pointer; }
.marketplace-widget .mktp-clickable:focus { outline: 2px solid rgba(13, 110, 253, .5); outline-offset: 2px; }

.marketplace-widget .card { transition: transform .2s ease, box-shadow .2s ease; }
.marketplace-widget .card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, .1); }

/* Vanilla modal visibility + backdrop */
.marketplace-widget .modal { position: fixed; inset: 0; z-index: 1050; display: none; padding: 1rem; overflow-y: auto; background: transparent; }
.marketplace-widget .modal.show { display: block; }
.marketplace-widget .modal-dialog { margin: 1.5rem auto; max-width: 600px; pointer-events: none; }
.marketplace-widget .modal-dialog.modal-lg { max-width: 900px; }
.marketplace-widget .modal-dialog.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3rem); }
.marketplace-widget .modal-content { pointer-events: auto; position: relative; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .15); border: 0; padding: 2rem; }
.marketplace-widget .modal-body { padding: 0; }
.marketplace-widget .mktp-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 10; }

.mktp-backdrop { position: fixed; inset: 0; background-color: #000; opacity: .5; z-index: 1040; }
body.mktp-modal-open { overflow: hidden; }