html:not(.dark) body.products-page {
  --home-tint: color-mix(in oklab, var(--surface) 34%, transparent);
  --home-card-border: color-mix(in oklab, var(--primary) 10%, var(--border));
  --home-card-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 20px 44px -20px rgba(23, 78, 166, .20);
  --home-card-shadow-hover: 0 2px 4px rgba(2, 6, 23, .05), 0 30px 58px -20px rgba(23, 78, 166, .30);
  --home-card-radius: 1.25rem;
}

/* ---------- 1. Page tint on the content sections ---------- */
html:not(.dark) body.products-page main > section:not(.hero-section) {
  background: var(--home-tint);
}
html:not(.dark) body.products-page main > section:first-of-type {
  background: transparent; /* header/hero strip stays clean */
}

/* ---------- 2. Service cards: white, same border/radius/shadow/hover ---------- */
html:not(.dark) body.products-page main .product-service-card {
  background: var(--card) !important;
  border: 1px solid var(--home-card-border) !important;
  border-radius: var(--home-card-radius) !important;
  box-shadow: var(--home-card-shadow);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
html:not(.dark) body.products-page main .product-service-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border)) !important;
  box-shadow: var(--home-card-shadow-hover);
}
/* Empty image wells stay white so every container reads uniform */
html:not(.dark) body.products-page main .product-service-card-image {
  background: var(--card);
}

html:not(.dark) body.products-page main a[class*="rounded-full"][class*="border"][class*="px-5"] {
  background: var(--card);
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border)) !important;
  color: var(--foreground) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px -2px rgba(23, 78, 166, .12);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease,
              border-color .22s ease, background-color .22s ease, color .22s ease;
}
html:not(.dark) body.products-page main a[class*="rounded-full"][class*="border"][class*="px-5"]:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--primary) 55%, var(--border)) !important;
  color: var(--primary) !important;
  background: color-mix(in oklab, var(--primary) 6%, var(--card));
  box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--primary) 40%, transparent);
}

/* ---------- 4. Browse-by-service select: card-styled, half width ---------- */
html:not(.dark) body.products-page main select {
  width: 100%;
  max-width: 12rem; /* ~half of the previous max-w-md container */
  border-radius: .8rem;
  border-color: var(--home-card-border);
  background: var(--card);
  box-shadow: var(--home-card-shadow);
  transition: border-color .22s ease, box-shadow .22s ease;
}
html:not(.dark) body.products-page main select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 14%, transparent);
}

/* ---------- 5. CTA card ("Not sure what you need?"): same white card ---------- */
html:not(.dark) body.products-page main div[class*="max-w-2xl"][class*="rounded-2xl"][class*="bg-surface"] {
  background: var(--card) !important;
  border: 1px solid var(--home-card-border) !important;
  border-radius: var(--home-card-radius) !important;
  box-shadow: var(--home-card-shadow);
}

html:not(.dark) body.products-page main .product-card {
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
}

html:not(.dark) body.products-page main .renewable-catalog-grid .product-card {
  background: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--home-card-border) !important;
  box-shadow: var(--home-card-shadow);
}
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card:hover {
  background: var(--card) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border)) !important;
  box-shadow: var(--home-card-shadow-hover);
}
/* Dark text everywhere inside the white rows... */
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card h3,
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card p,
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card li {
  color: var(--foreground) !important;
}
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card .text-muted-foreground,
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card .text-muted {
  color: var(--muted-foreground) !important;
}
/* Price: gold is unreadable on white — use brand blue */
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card .text-gold {
  color: var(--primary) !important;
}
/* ...except white text stays on primary-blue chips/buttons */
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card [class*="bg-primary"] {
  color: var(--primary-foreground) !important;
}

html:not(.dark) body.products-page main .renewable-catalog-grid .product-card > div:last-child {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
html:not(.dark) body.products-page main .renewable-catalog-grid .product-card > div:last-child > div:last-child {
  margin-top: auto !important;
  padding-top: .8rem !important;
}

/* Complete Collection thumbnails: run the artwork to the card edges. */
body.products-page main .renewable-catalog-grid .product-card > div:first-child {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: 1.2rem 0 0 1.2rem !important;
  overflow: hidden !important;
}
body.products-page main .renewable-catalog-grid .product-card .product-card-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}
body.products-page main .renewable-catalog-grid .product-card > div:last-child {
  padding-left: 1rem !important;
}

body.products-page main .renewable-featured-rail .product-card > div:last-child > div {
  margin-top: .5rem !important;
  padding-top: .55rem !important;
  gap: .5rem !important;
}
body.products-page main .renewable-featured-rail .product-card .cart7b-row {
  gap: .35rem !important;
}
html:not(.dark) body.products-page main .renewable-featured-rail .product-card > div:last-child > div > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .45rem !important;
  width: 100% !important;
}
html:not(.dark) body.products-page main .renewable-featured-rail .product-card > div:last-child > div > div:last-child > a,
html:not(.dark) body.products-page main .renewable-featured-rail .product-card > div:last-child > div > div:last-child > button {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-inline: .45rem !important;
  font-size: .8rem !important;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.products-page main .renewable-featured-rail .product-card a[class*="rounded-full"],
body.products-page main .renewable-featured-rail .product-card button[class*="rounded-full"],
body.products-page main .renewable-featured-rail .product-card .cart7b-add {
  min-height: 2.35rem !important;
  padding-top: .4rem !important;
  padding-bottom: .4rem !important;
}