/* Payslashes Sprint 22 — Visible Marketplace UI/UX Reflection
   Loaded after the legacy card styles so the storefront immediately reflects
   the enterprise design language without changing existing backend behaviour. */

:root {
  --ps-market-green: #008f62;
  --ps-market-green-dark: #006d4c;
  --ps-market-green-soft: #eaf8f3;
  --ps-market-orange: #f56a13;
  --ps-market-ink: #0f1d36;
  --ps-market-muted: #667792;
  --ps-market-line: #dce5ef;
  --ps-market-surface: #ffffff;
}

/* Product grids get a calmer rhythm and equal-height cards. */
.products-grid,
.products-row,
.product-grid,
.jumia-products-grid,
.ps-product-grid {
  align-items: stretch !important;
  row-gap: 24px !important;
}

article.pcv2-card {
  position: relative !important;
  isolation: isolate !important;
  height: 515px !important;
  min-height: 515px !important;
  max-height: 515px !important;
  overflow: hidden !important;
  border: 1px solid var(--ps-market-line) !important;
  border-radius: 22px !important;
  background: var(--ps-market-surface) !important;
  box-shadow: 0 8px 22px rgba(15, 29, 54, .08) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

article.pcv2-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  z-index: 5;
  background: linear-gradient(90deg, var(--ps-market-green), #28b988);
  opacity: 0;
  transition: opacity .22s ease;
}

article.pcv2-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(0, 143, 98, .34) !important;
  box-shadow: 0 22px 48px rgba(15, 29, 54, .16) !important;
}

article.pcv2-card:hover::before { opacity: 1; }

article.pcv2-card > .pcv2-media {
  flex: 0 0 218px !important;
  height: 218px !important;
  min-height: 218px !important;
  max-height: 218px !important;
  padding: 14px !important;
  overflow: hidden !important;
  border-bottom: 1px solid #edf2f7 !important;
  background:
    radial-gradient(circle at 50% 32%, #ffffff 0 42%, rgba(240,245,249,.92) 100%) !important;
}

article.pcv2-card .pcv2-image-link {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

article.pcv2-card .pcv2-main-img,
article.pcv2-card .pcv2-hover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 14px rgba(15, 29, 54, .10)) !important;
  transition: transform .36s ease, opacity .28s ease !important;
}

article.pcv2-card:hover .pcv2-main-img { transform: scale(1.065) !important; }

article.pcv2-card .pcv2-wishlist,
article.pcv2-card .pcv2-preview {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(207, 218, 230, .95) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.94) !important;
  color: #34445e !important;
  box-shadow: 0 8px 20px rgba(15, 29, 54, .10) !important;
  backdrop-filter: blur(10px) !important;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease !important;
}

article.pcv2-card .pcv2-wishlist:hover,
article.pcv2-card .pcv2-wishlist.active {
  transform: scale(1.07) !important;
  border-color: #ffd1d8 !important;
  background: #fff4f6 !important;
  color: #e02d4f !important;
}

article.pcv2-card .pcv2-preview:hover {
  transform: scale(1.07) !important;
  border-color: #bde5d7 !important;
  background: var(--ps-market-green-soft) !important;
  color: var(--ps-market-green-dark) !important;
}

article.pcv2-card .pcv2-badges {
  top: 12px !important;
  left: 12px !important;
  gap: 6px !important;
}

article.pcv2-card .pcv2-badge {
  min-height: 25px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  box-shadow: 0 6px 14px rgba(15, 29, 54, .10) !important;
}

article.pcv2-card > .pcv2-body {
  flex: 1 1 auto !important;
  height: 297px !important;
  min-height: 297px !important;
  max-height: 297px !important;
  padding: 14px 15px 15px !important;
  background: #fff !important;
}

article.pcv2-card .pcv2-content {
  flex: 0 0 127px !important;
  height: 127px !important;
  min-height: 127px !important;
  max-height: 127px !important;
  gap: 5px !important;
}

article.pcv2-card .pcv2-meta {
  flex: 0 0 25px !important;
  height: 25px !important;
  gap: 7px !important;
}

article.pcv2-card .pcv2-category,
article.pcv2-card .pcv2-brand {
  height: 25px !important;
  min-height: 25px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #edf3fb !important;
  color: #29466f !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

article.pcv2-card .pcv2-brand {
  background: #f0f4f8 !important;
  color: #42536d !important;
}

article.pcv2-card h3.pcv2-title {
  flex: 0 0 43px !important;
  height: 43px !important;
  min-height: 43px !important;
  max-height: 43px !important;
  margin: 0 !important;
  color: var(--ps-market-ink) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.33 !important;
  letter-spacing: -.015em !important;
}

article.pcv2-card h3.pcv2-title a { color: inherit !important; }
article.pcv2-card h3.pcv2-title a:hover { color: var(--ps-market-green-dark) !important; }

article.pcv2-card .pcv2-spec {
  flex: 0 0 20px !important;
  height: 20px !important;
  color: var(--ps-market-muted) !important;
  font-size: 11.5px !important;
  line-height: 20px !important;
}

article.pcv2-card .pcv2-price {
  flex: 0 0 31px !important;
  height: 31px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

article.pcv2-card .pcv2-current-price {
  color: var(--ps-market-orange) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
}

article.pcv2-card .pcv2-original-price {
  color: #8d99aa !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

article.pcv2-card .pcv2-commerce {
  flex: 0 0 148px !important;
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding-top: 2px !important;
}

article.pcv2-card .pcv2-promo {
  position: absolute !important;
  top: 13px !important;
  left: 13px !important;
  z-index: 6 !important;
  min-height: 26px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #fff0e5 !important;
  color: #b94b08 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  box-shadow: 0 7px 16px rgba(185, 75, 8, .12) !important;
}
article.pcv2-card .pcv2-promo.is-empty { display: none !important; }

article.pcv2-card .pcv2-delivery {
  flex: 0 0 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
}

article.pcv2-card .pcv2-activity {
  flex: 0 0 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  color: #a25a06 !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
}
article.pcv2-card .pcv2-activity.is-empty { display: none !important; }

article.pcv2-card .pcv2-stock-row {
  flex: 0 0 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  gap: 7px !important;
}

article.pcv2-card .pcv2-stock,
article.pcv2-card .pcv2-shipping {
  min-height: 23px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

article.pcv2-card .pcv2-actions {
  flex: 0 0 69px !important;
  height: 69px !important;
  min-height: 69px !important;
  display: grid !important;
  grid-template-columns: .85fr 1.15fr !important;
  grid-template-rows: 34px 31px !important;
  gap: 5px 7px !important;
  margin-top: auto !important;
}

article.pcv2-card .pcv2-btn {
  height: 31px !important;
  min-height: 31px !important;
  border-radius: 11px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

article.pcv2-card .pcv2-buy {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--ps-market-green) !important;
  background: linear-gradient(135deg, #06a06f, var(--ps-market-green)) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(0, 143, 98, .22) !important;
}

article.pcv2-card .pcv2-buy:hover:not(.is-disabled) {
  transform: translateY(-1px) !important;
  background: linear-gradient(135deg, var(--ps-market-green), var(--ps-market-green-dark)) !important;
  box-shadow: 0 9px 19px rgba(0, 109, 76, .30) !important;
}

article.pcv2-card .pcv2-view {
  grid-column: 1 !important;
  grid-row: 2 !important;
  border-color: #cdd8e5 !important;
  background: #fff !important;
  color: #34445e !important;
}

article.pcv2-card .pcv2-cart {
  grid-column: 2 !important;
  grid-row: 2 !important;
  border-color: rgba(0,143,98,.24) !important;
  background: var(--ps-market-green-soft) !important;
  color: var(--ps-market-green-dark) !important;
}

article.pcv2-card .pcv2-view:hover,
article.pcv2-card .pcv2-cart:hover:not(.is-disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(15, 29, 54, .10) !important;
}

/* On smaller screens, keep the card compact and thumb-friendly. */
@media (max-width: 767px) {
  article.pcv2-card {
    height: 458px !important;
    min-height: 458px !important;
    max-height: 458px !important;
    border-radius: 17px !important;
  }
  article.pcv2-card > .pcv2-media {
    flex-basis: 170px !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    padding: 10px !important;
  }
  article.pcv2-card > .pcv2-body {
    height: 288px !important;
    min-height: 288px !important;
    max-height: 288px !important;
    padding: 10px !important;
  }
  article.pcv2-card .pcv2-content {
    flex-basis: 118px !important;
    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;
  }
  article.pcv2-card h3.pcv2-title {
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    font-size: 13px !important;
  }
  article.pcv2-card .pcv2-current-price { font-size: 17px !important; }
  article.pcv2-card .pcv2-commerce {
    flex-basis: 153px !important;
    height: 153px !important;
    min-height: 153px !important;
    max-height: 153px !important;
  }
  article.pcv2-card .pcv2-actions {
    grid-template-columns: .8fr 1.2fr !important;
  }
  article.pcv2-card .pcv2-wishlist,
  article.pcv2-card .pcv2-preview {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  article.pcv2-card,
  article.pcv2-card *,
  article.pcv2-card *::before,
  article.pcv2-card *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Sprint 23 — Fixed internal card geometry and final catalogue alignment. */
@media (min-width: 768px) {
  article.pcv2-card > .pcv2-body {
    display: grid !important;
    grid-template-rows: 132px 150px !important;
    row-gap: 0 !important;
  }

  article.pcv2-card .pcv2-content,
  article.pcv2-card .pcv2-commerce {
    width: 100% !important;
    min-width: 0 !important;
  }

  article.pcv2-card .pcv2-content {
    display: grid !important;
    grid-template-rows: 25px 44px 20px 33px !important;
    row-gap: 3px !important;
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  article.pcv2-card .pcv2-commerce {
    display: grid !important;
    grid-template-rows: 28px 18px 24px 69px !important;
    align-content: end !important;
    row-gap: 4px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    padding-top: 3px !important;
  }
}

article.pcv2-card .pcv2-meta {
  min-width: 0 !important;
  overflow: hidden !important;
}

article.pcv2-card .pcv2-category {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 68px) !important;
}

article.pcv2-card .pcv2-category > span,
article.pcv2-card .pcv2-brand {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

article.pcv2-card .pcv2-brand {
  flex: 0 0 auto !important;
  max-width: 76px !important;
}

article.pcv2-card h3.pcv2-title,
article.pcv2-card h3.pcv2-title a {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

article.pcv2-card .pcv2-spec {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

article.pcv2-card .pcv2-spec.is-empty,
article.pcv2-card .pcv2-activity.is-empty {
  display: flex !important;
  visibility: hidden !important;
}

article.pcv2-card .pcv2-price {
  align-self: end !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

article.pcv2-card .pcv2-original-price {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

article.pcv2-card .pcv2-delivery,
article.pcv2-card .pcv2-stock-row,
article.pcv2-card .pcv2-activity {
  margin: 0 !important;
  align-self: center !important;
}

article.pcv2-card .pcv2-stock-row {
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

article.pcv2-card .pcv2-stock,
article.pcv2-card .pcv2-shipping {
  max-width: 58% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

article.pcv2-card .pcv2-actions {
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
}

article.pcv2-card .pcv2-btn {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

article.pcv2-card .pcv2-main-img,
article.pcv2-card .pcv2-hover-img {
  max-width: 94% !important;
  max-height: 94% !important;
  margin: auto !important;
}

/* Keep desktop utility launchers away from the last product-card actions. */
@media (min-width: 1200px) {
  .ps-support-launcher,
  .ps-floating-support,
  .floating-support-button,
  .support-fab {
    right: 18px !important;
    bottom: 22px !important;
  }
}

@media (max-width: 767px) {
  article.pcv2-card > .pcv2-body {
    display: grid !important;
    grid-template-rows: 121px 157px !important;
  }

  article.pcv2-card .pcv2-content {
    display: grid !important;
    grid-template-rows: 25px 39px 18px 31px !important;
    row-gap: 2px !important;
    height: 121px !important;
    min-height: 121px !important;
    max-height: 121px !important;
  }

  article.pcv2-card .pcv2-commerce {
    display: grid !important;
    grid-template-rows: 28px 18px 24px 69px !important;
    row-gap: 4px !important;
    align-content: end !important;
    height: 157px !important;
    min-height: 157px !important;
    max-height: 157px !important;
  }

  article.pcv2-card .pcv2-category {
    max-width: calc(100% - 56px) !important;
  }

  article.pcv2-card .pcv2-brand {
    max-width: 62px !important;
  }
}