/* UnderScope Home Polish — scope: body.home + body.page-id-5372
   - CATGRID: equal tiles + clean typography (desktop/tablet/mobile)
   - CTA: premium "baked" overlay (min-height + glass card + button polish)
*/

body.home,
body.page-id-5372 {
  overflow-x: hidden !important;
}

body.home .wp-site-blocks,
body.page-id-5372 .wp-site-blocks {
  overflow-x: hidden !important;
}

body.home .alignfull,
body.page-id-5372 .alignfull,
body.home .gspb_row.alignfull,
body.page-id-5372 .gspb_row.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.home img,
body.page-id-5372 img,
body.home svg,
body.page-id-5372 svg {
  max-width: 100% !important;
}
body.home svg,
body.page-id-5372 svg {
  height: auto !important;
}

/* =========================
   Code Finder — hero helper text + error (homepage only)
   Avoid CLS: reserve space for helper + error
   ========================= */
body.home #gspb_row-id-gsbp-eeb07927-9a13 .custom_search_box,
body.page-id-5372 #gspb_row-id-gsbp-eeb07927-9a13 .custom_search_box {
  min-height: 72px !important;
}

body.home .us-code-finder-helper,
body.page-id-5372 .us-code-finder-helper {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(38, 37, 120, 0.7) !important;
}

body.home .us-code-finder-helper strong,
body.page-id-5372 .us-code-finder-helper strong {
  font-weight: 600 !important;
}

body.home .us-code-finder-error,
body.page-id-5372 .us-code-finder-error {
  margin: 6px 0 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: 12px !important;
  color: #b91c1c !important;
  display: none !important;
}

body.home .us-code-finder-error.is-visible,
body.page-id-5372 .us-code-finder-error.is-visible {
  display: block !important;
}

/* =========================
   1) CATEGORY GRID (us-catgrid)
   ========================= */
body.home .us-catgrid .gspb_row__content,
body.page-id-5372 .us-catgrid .gspb_row__content {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: visible !important;
}

/* Tablet */
@media (max-width: 1024px) {
  body.home .us-catgrid .gspb_row__content,
  body.page-id-5372 .us-catgrid .gspb_row__content {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* Mobile: keep 2 columns */
@media (max-width: 767.98px) {
  body.home .us-catgrid .gspb_row__content,
  body.page-id-5372 .us-catgrid .gspb_row__content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* Tile base */
body.home .us-catgrid .wp-block-greenshift-blocks-row-column,
body.page-id-5372 .us-catgrid .wp-block-greenshift-blocks-row-column {
  /* override GS column sizing so grid can control layout */
  width: auto !important;
  max-width: none !important;
  flex: initial !important;

  height: 100% !important;
  min-height: 170px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;

  padding: 14px 12px !important;
  border-radius: 14px !important;

  background: #ffffff !important;
  border: 1px solid rgba(41, 107, 239, 0.18) !important;
  box-shadow: 0 10px 24px rgba(2, 53, 113, 0.08) !important;

  overflow: hidden !important;
}

/* Equal height tuning per breakpoint */
@media (min-width: 1200px) {
  body.home .us-catgrid .wp-block-greenshift-blocks-row-column,
  body.page-id-5372 .us-catgrid .wp-block-greenshift-blocks-row-column {
    min-height: 190px !important;
  }
}
@media (max-width: 767.98px) {
  body.home .us-catgrid .wp-block-greenshift-blocks-row-column,
  body.page-id-5372 .us-catgrid .wp-block-greenshift-blocks-row-column {
    min-height: 160px !important;
    padding: 12px 10px !important;
  }
}

/* Icon area */
body.home .us-catgrid .wp-block-image,
body.page-id-5372 .us-catgrid .wp-block-image,
body.home .us-catgrid .gspb_image,
body.page-id-5372 .us-catgrid .gspb_image {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 10px 0 !important;
  min-height: 92px !important;
}

body.home .us-catgrid .wp-block-image img,
body.page-id-5372 .us-catgrid .wp-block-image img,
body.home .us-catgrid .gspb_image img,
body.page-id-5372 .us-catgrid .gspb_image img {
  max-height: 92px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Title: clamp + no ugly breaks */
body.home .us-catgrid .gspb_heading,
body.page-id-5372 .us-catgrid .gspb_heading {
  margin-top: auto !important;

  font-weight: 800 !important;
  color: #023571 !important;

  font-size: clamp(13.5px, 1.1vw, 16px) !important;
  line-height: 1.18 !important;

  /* Avoid mid-word breaks */
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
  text-wrap: balance;
}

/* Clamp to 2 lines for equal tiles */
body.home .us-catgrid .gspb_heading,
body.page-id-5372 .us-catgrid .gspb_heading {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: 2.5em !important;
}

/* Subtle hover polish */
@media (hover: hover) {
  body.home .us-catgrid .wp-block-greenshift-blocks-row-column:hover,
  body.page-id-5372 .us-catgrid .wp-block-greenshift-blocks-row-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(2, 53, 113, 0.12) !important;
    border-color: rgba(41, 107, 239, 0.28) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
}

/* =========================
   2) CTA (us-cta) — premium baked overlay
   ========================= */
body.home .us-cta,
body.page-id-5372 .us-cta {
  position: relative !important;
  overflow: hidden !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 70% 35% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  min-height: 380px !important;
  padding: 56px 18px !important;
}

/* Tablet */
@media (max-width: 1024px) {
  body.home .us-cta,
  body.page-id-5372 .us-cta {
    min-height: 340px !important;
    padding: 44px 16px !important;
    background-position: 65% 30% !important;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  body.home .us-cta,
  body.page-id-5372 .us-cta {
    min-height: 300px !important;
    padding: 34px 14px !important;
    background-position: 60% 25% !important;
  }
}

/* Overlay gradient for readability */
body.home .us-cta::before,
body.page-id-5372 .us-cta::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(0, 12, 45, 0.60) 0%,
    rgba(0, 12, 45, 0.35) 45%,
    rgba(0, 12, 45, 0.60) 100%
  ) !important;
  pointer-events: none !important;
}

/* Make content sit above overlay */
body.home .us-cta > .gspb_row__content,
body.page-id-5372 .us-cta > .gspb_row__content {
  position: relative !important;
  z-index: 2 !important;
  width: min(980px, 100%) !important;
}

/* Glass card wrapper */
body.home .us-cta #gspb_col-id-gsbp-07de1468-8e9d,
body.page-id-5372 .us-cta #gspb_col-id-gsbp-07de1468-8e9d {
  max-width: 760px !important;
  margin: 0 auto !important;

  padding: 22px 18px !important;
  border-radius: 18px !important;

  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22) !important;
}

/* CTA heading */
body.home .us-cta #gspb_heading-id-gsbp-f1dc4f2a-3b76,
body.page-id-5372 .us-cta #gspb_heading-id-gsbp-f1dc4f2a-3b76 {
  font-size: clamp(22px, 2.2vw, 34px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
}

/* CTA subtext */
body.home .us-cta #gspb_heading-id-gsbp-233b31d3-c866,
body.page-id-5372 .us-cta #gspb_heading-id-gsbp-233b31d3-c866 {
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: 52ch !important;
  margin: 0 auto 16px auto !important;
  opacity: 0.96 !important;
}

/* CTA button polish + force icon to white */
body.home .us-cta #gspb_button-id-gsbp-40b195a5-d037 .gspb-buttonbox,
body.page-id-5372 .us-cta #gspb_button-id-gsbp-40b195a5-d037 .gspb-buttonbox {
  background: #296bef !important;
  border: 2px solid #296bef !important;
  color: #ffffff !important;

  border-radius: 999px !important;
  padding: 16px 28px !important;

  font-weight: 800 !important;
  letter-spacing: 0.2px !important;

  box-shadow: 0 16px 34px rgba(41, 107, 239, 0.28) !important;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease !important;
}

body.home .us-cta #gspb_button-id-gsbp-40b195a5-d037 .gspb-buttonbox:hover,
body.page-id-5372 .us-cta #gspb_button-id-gsbp-40b195a5-d037 .gspb-buttonbox:hover {
  filter: brightness(0.96) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 44px rgba(41, 107, 239, 0.34) !important;
}

/* Fix CTA icon color (your SVG paths were default gray) */
body.home .us-cta #gspb_button-id-gsbp-40b195a5-d037 .gspb-buttonbox-icon svg path,
body.page-id-5372 .us-cta #gspb_button-id-gsbp-40b195a5-d037 .gspb-buttonbox-icon svg path {
  fill: #ffffff !important;
}

/* Hero subheading responsive bug fix (was 2px on tablet) */
@media (min-width: 768px) and (max-width: 1024px) {
  body.home #gspb_heading-id-gsbp-9769d3c4-f4e2,
  body.page-id-5372 #gspb_heading-id-gsbp-9769d3c4-f4e2 {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
}

/* =========================
   Top Picks (queryId 116) — PATCH: mobile image overlap, card layout, typography
   Scope: #gspb_container-id-gsbp-23661213-fd1f + .is-style-brdnpaddradius
   ========================= */
/* Spacing between section heading and card list — prevents collision */
body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-query.is-style-brdnpaddradius,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-query.is-style-brdnpaddradius {
  padding-top: 16px !important;
  margin-top: 8px !important;
}

body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-template,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-template {
  align-items: stretch !important;
}

/* Card: flex column — allow overflow so WHY section shows full text */
body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-template > li,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-template > li,
body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-template > li.wp-block-post,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-template > li.wp-block-post {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  padding: 14px !important;
  border-radius: 14px !important;
  min-height: 0 !important;
}

/* Override negative margins from is-style-brdnpaddradius — image must not overflow upward */
body.home #gspb_container-id-gsbp-23661213-fd1f .is-style-brdnpaddradius figure.wp-block-post-featured-image,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .is-style-brdnpaddradius figure.wp-block-post-featured-image,
body.home #gspb_container-id-gsbp-23661213-fd1f figure.wp-block-post-featured-image,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f figure.wp-block-post-featured-image {
  margin: 0 0 10px 0 !important;
}

/* Featured image: controlled height, no overflow — contain for product shots */
body.home #gspb_container-id-gsbp-23661213-fd1f figure.wp-block-post-featured-image img,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f figure.wp-block-post-featured-image img {
  width: 100% !important;
  height: 160px !important;
  max-height: 160px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 12px !important;
  background: #fff !important;
}

@media (min-width: 768px) {
  body.home #gspb_container-id-gsbp-23661213-fd1f figure.wp-block-post-featured-image img,
  body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f figure.wp-block-post-featured-image img {
    height: 150px !important;
    max-height: 150px !important;
  }
}

body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title::before,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title::before,
body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title::after,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title::after {
  content: none !important;
}

body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title {
  margin: 8px 0 0 0 !important;
  line-height: 1.3 !important;
}

body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title a,
body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title a {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  body.home #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title a,
  body.page-id-5372 #gspb_container-id-gsbp-23661213-fd1f .wp-block-post-title a {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
}

/* Why this pick ranked — styles in underscope-top-picks-why.css (sitewide) */

/* =========================
   "How UnderScope Picks the Best Options" — PATCH: image visible on mobile
   Row: #gspb_row-id-gsbp-d033e963-fb49 (GS reveal overlay was hiding image)
   ========================= */
@media (max-width: 767.98px) {
  body.home #gspb_row-id-gsbp-d033e963-fb49 .gspb_row__content,
  body.page-id-5372 #gspb_row-id-gsbp-d033e963-fb49 .gspb_row__content {
    display: flex !important;
    flex-direction: column !important;
  }

  body.home #gspb_row-id-gsbp-d033e963-fb49 #gspb_col-id-gsbp-8d1bb418-e92f,
  body.page-id-5372 #gspb_row-id-gsbp-d033e963-fb49 #gspb_col-id-gsbp-8d1bb418-e92f {
    order: -1 !important;
    margin-bottom: 20px !important;
  }

  /* Force reveal wrappers visible — GSAP/reveal was leaving opacity 0 */
  body.home #gspb_row-id-gsbp-d033e963-fb49 .gs-reveal-wrap,
  body.page-id-5372 #gspb_row-id-gsbp-d033e963-fb49 .gs-reveal-wrap,
  body.home #gspb_row-id-gsbp-d033e963-fb49 .gs-reveal-cont,
  body.page-id-5372 #gspb_row-id-gsbp-d033e963-fb49 .gs-reveal-cont {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hide reveal overlay block — it was covering the image */
  body.home #gspb_row-id-gsbp-d033e963-fb49 .gs-reveal-block,
  body.page-id-5372 #gspb_row-id-gsbp-d033e963-fb49 .gs-reveal-block {
    display: none !important;
  }

  body.home #gspb_row-id-gsbp-d033e963-fb49 #gspb_col-id-gsbp-8d1bb418-e92f img,
  body.page-id-5372 #gspb_row-id-gsbp-d033e963-fb49 #gspb_col-id-gsbp-8d1bb418-e92f img {
    max-width: 100% !important;
    height: auto !important;
  }
}