/* =====================================================================
   7thbreed — Products page uniform system (light mode)
   Scope: body.products-page (set by route-scoper-v1.js).
   Applies the same card system as home/contact to the service cards,
   filter pills, select and CTA. The featured packages grid is NOT
   touched (explicit opt-out below).
   ===================================================================== */

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);
}

/* ---------- 3. Filter pills: readable at rest, obvious on hover ----------
   White pills on the tint looked faded; text is now full-strength with a
   visible border and a soft shadow so every tab reads clearly. */
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);
}

/* ---------- 6. Featured packages & catalog rows: keep their designed accent style ----------
   The renewable view styles ALL product cards as blue-gradient accent cards
   with white text. Do NOT flatten to white (that caused white-on-white).
   Only the mismatched bg-surface border is corrected. */
html:not(.dark) body.products-page main .product-card {
  border-color: color-mix(in oklab, var(--primary) 22%, var(--border));
}

/* ---------- 7. Complete-package catalog rows: white cards, readable text ----------
   The base renewable style paints ALL product cards blue-gradient with
   white text. Catalog rows become white instead — every text color must
   be re-set explicitly (no white-on-white). */
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;
}

/* ---------- 9. Catalog rows: anchor price + buttons to the card bottom ----------
   The actions block (starting-from price, Get Quote, Purchase) floats mid-card
   with dead space below. Pin it to the bottom edge of the card. */
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;
}

/* ---------- 10. Featured cards: keep both primary actions inside the card ----------
   The cart enhancement already occupies its own full-width row. Keep Get Quote and
   Purchase side by side so the fixed-height featured card does not clip Purchase. */
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;
}