/* STORE APP Patch 522
   Responsive product card rows + homepage featured category cards.
   Loaded after older product-grid patches so it wins over Patch 448/449/454/455/456.
*/

body.site-masterpalm #site-main .mpb2b-featured-category-cards {
  background: #0b1017;
  padding: 34px 0 42px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.site-masterpalm #site-main .mpb2b-featured-category-cards .mpb2b-section-title h2,
body.site-masterpalm #site-main .mpb2b-featured-category-cards .mpb2b-section-title p {
  color: #fff;
}

body.site-masterpalm #site-main .mpb2b-featured-category-cards .mpb2b-section-title a {
  color: #fff !important;
}

body.site-masterpalm #site-main .mpb2b-featured-category-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.site-masterpalm #site-main .mpb2b-featured-category-card {
  position: relative;
  display: grid !important;
  grid-template-rows: minmax(190px, 1fr) auto;
  min-height: 330px;
  overflow: hidden;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(135deg, #111827, #1f2937);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(0,0,0,.28);
}

body.site-masterpalm #site-main .mpb2b-featured-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

body.site-masterpalm #site-main .mpb2b-featured-category-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  background: #fff var(--mp-category-card-img) center center / contain no-repeat;
}

body.site-masterpalm #site-main .mpb2b-featured-category-card.is-image-missing .mpb2b-featured-category-media {
  background: radial-gradient(circle at 20% 20%, rgba(184,0,31,.35), transparent 34%), #151b24;
}

body.site-masterpalm #site-main .mpb2b-featured-category-media span {
  color: #cbd5e1;
  font-weight: 1000;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
}

body.site-masterpalm #site-main .mpb2b-featured-category-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(11,16,23,.76), rgba(11,16,23,.96));
}

body.site-masterpalm #site-main .mpb2b-featured-category-body strong {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 1000;
  text-transform: uppercase;
}

body.site-masterpalm #site-main .mpb2b-featured-category-body small {
  color: rgba(255,255,255,.78);
  font-size: .84rem;
  line-height: 1.35;
  font-weight: 700;
}

body.site-masterpalm #site-main .mpb2b-featured-category-body em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin-top: 4px;
  color: #fff;
  background: #b8001f;
  border-radius: 999px;
  padding: 7px 12px;
  font-style: normal;
  font-size: .78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

body.site-masterpalm #site-main .mpb2b-featured-category-card:hover {
  border-color: rgba(184,0,31,.78);
  transform: translateY(-2px);
}

/* Product-list responsive behavior: one product card per row in responsive view.
   This covers homepage product grids, /products search/catalog, category detail grids,
   and older product-list selectors. Desktop keeps the existing 3-card design. */
@media (max-width: 1200px) {
  body.site-masterpalm #site-main .mpb2b-home-products .mpb2b-product-grid,
  body.masterpalm-theme #site-main .mpb2b-home-products .mpb2b-product-grid,
  body.masterpalm-store-dark #site-main .mpb2b-home-products .mpb2b-product-grid,
  body.mp-b2b-store #site-main .mpb2b-home-products .mpb2b-product-grid,
  body.site-masterpalm #site-main .mpb2b-product-grid.mpb2b-product-grid-catalog,
  body.masterpalm-theme #site-main .mpb2b-product-grid.mpb2b-product-grid-catalog,
  body.masterpalm-store-dark #site-main .mpb2b-product-grid.mpb2b-product-grid-catalog,
  body.site-masterpalm #site-main .mp-product-catalog-main .mp-category-products-grid,
  body.site-masterpalm #site-main .mp-product-catalog-grid,
  body.site-masterpalm #site-main .mp-category-layout .mp-category-products-grid,
  body.masterpalm-theme #site-main .mp-product-catalog-main .mp-category-products-grid,
  body.masterpalm-theme #site-main .mp-product-catalog-grid,
  body.masterpalm-theme #site-main .mp-category-layout .mp-category-products-grid,
  body.masterpalm-store-dark #site-main .mp-product-catalog-main .mp-category-products-grid,
  body.masterpalm-store-dark #site-main .mp-product-catalog-grid,
  body.masterpalm-store-dark #site-main .mp-category-layout .mp-category-products-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.site-masterpalm #site-main .mpb2b-product-grid > .mpb2b-product-card,
  body.masterpalm-theme #site-main .mpb2b-product-grid > .mpb2b-product-card,
  body.masterpalm-store-dark #site-main .mpb2b-product-grid > .mpb2b-product-card,
  body.site-masterpalm #site-main .mp-category-products-grid > .mp-product-list-card,
  body.site-masterpalm #site-main .mp-product-catalog-grid > .mp-product-list-card,
  body.masterpalm-theme #site-main .mp-category-products-grid > .mp-product-list-card,
  body.masterpalm-theme #site-main .mp-product-catalog-grid > .mp-product-list-card,
  body.masterpalm-store-dark #site-main .mp-category-products-grid > .mp-product-list-card,
  body.masterpalm-store-dark #site-main .mp-product-catalog-grid > .mp-product-list-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  body.site-masterpalm #site-main .mpb2b-featured-category-grid {
    grid-template-columns: 1fr !important;
  }
  body.site-masterpalm #site-main .mpb2b-featured-category-card {
    min-height: 0;
  }
  body.site-masterpalm #site-main .mpb2b-featured-category-media {
    min-height: 190px;
  }
}