/* Scoped Yellow Professional retail catalogue */
/* SSR marks all cards beyond the first 12 hidden. This prevents premature
 * downloads while retaining searchable HTML and filter-driven reveal. */
.products-page #retail-product-grid .retail-product[hidden] { display: none !important; }

.products-page .retail-product { border: 1px solid #e9dfea; border-radius: 10px; background: #fff; box-shadow: 0 8px 26px rgba(70,43,82,.055); transition: transform .18s ease, box-shadow .18s ease; }
.products-page .retail-product:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(70,43,82,.105); }
.products-page .retail-product .product-visual { height: 250px; background: linear-gradient(145deg,#fff,#fcf9fc); }
.products-page .retail-product .product-shot { width: 100%; height: 100%; object-fit: contain; padding: 22px 26px; box-sizing: border-box; }
.products-page .retail-product .product-details { padding: 23px 22px 24px; gap: 9px; }
.products-page .retail-product h3 { font-size: 1.13rem; min-height: 0; }
.products-page .retail-product .retail-price { display: flex; align-items: baseline; gap: 9px; }
.products-page .retail-price-label { font-size: .7rem; letter-spacing: .1em; font-weight: 700; color: #7e6983; }
.products-page .retail-price-amount { font-variant-numeric: tabular-nums; }
.products-page .retail-description { margin: 0; color: #655a68; font-size: .88rem; line-height: 1.65; flex: 1; }
.products-page .retail-enquiry-link { margin-top: 12px; padding-top: 14px; width: 100%; border-top: 1px solid #f0e8ef; font-weight: 700; font-size: .88rem; }
.products-page .retail-product .product-image-pending { background: linear-gradient(145deg,#fff,#f8eff9); text-align: center; padding: 20px; }
.products-page .retail-note { border-left: 3px solid #b899c0; padding-left: 15px; line-height: 1.6; }
@media (max-width: 680px) { .products-page .retail-product .product-visual { height: 220px; } .products-page .retail-product .product-shot { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .products-page .retail-product { transition: none; } .products-page .retail-product:hover { transform: none; } }

/* The official Yellow 2026 logo and black/white palette are preserved intact.
   Acidic yellow is used only as an approved background colour, never tinted text. */
.products-page .yellow-brand-feature {
  display: flex; align-items: center; gap: 30px;
  margin: 18px 0 26px; padding: 25px 30px;
  border: 1px solid #e8e5e9; border-radius: 12px; background: #fff;
  box-shadow: 0 7px 25px rgba(47,35,49,.045);
}
.products-page .yellow-brand-lockup { flex: 0 0 250px; align-self: center; }
.products-page .yellow-brand-lockup img {
  display: block; height: auto; width: 100%; aspect-ratio: 1469/774; object-fit: contain;
}
.products-page .yellow-brand-copy { color: #000; }
.products-page .yellow-brand-eyebrow {
  display: inline-block; margin: 0 0 8px; padding: 5px 9px;
  background: #f3e600; color: #000; font-weight: 800; letter-spacing: .075em;
  text-transform: uppercase; font-size: .67rem;
}
.products-page .yellow-brand-copy h3 {
  margin: 0 0 8px; color: #000; font-size: clamp(1.16rem,2.4vw,1.52rem);
  letter-spacing: -.015em; line-height: 1.3;
}
.products-page .yellow-brand-copy > p:last-child {
  color: #282828; margin: 0; line-height: 1.65; font-size: .88rem;
}
.products-page .retail-brush-product .product-shot { padding: 15px; }
.products-page .retail-brush-product .product-visual { background: #fff; }
@media (max-width: 700px) {
  .products-page .yellow-brand-feature {
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 22px 20px;
  }
  .products-page .yellow-brand-lockup { flex: none; width: min(100%,250px); }
}