/* Hero banner */
.products-hero .hero-inner,
.product-filter-hero .hero-inner {
  height: 360px;
  padding: 0 24px;
}

button.pf-banner__nav.pf-banner__nav--prev svg, button.pf-banner__nav.pf-banner__nav--next svg {
    width: 31.135px;
    height: 20px;
}

.products-hero h1,
.product-filter-hero h1 {
  font-family: "Vanilla Bold";
  font-size: 72px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #e5dece;
  text-transform: uppercase;
}

/* Select your range section */
.product-range {
  width: 100%;
  background: #fff;
  padding: 80px 0 206px;
}

.product-range-inner {
  padding: 0 24px;
}

.product-range-title {
margin: 0 0 56px;
    text-transform: uppercase;
    color: #282826;
    text-align: center;
    font-family: "Vanilla Bold";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 24px;
  max-width: 1138px;
  margin: 0 auto;
}

.product-card {
background: #fff;
    padding: 32px 24px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    border: 3px solid #F2EFEC;
    height: 100%;
}

.product-card:hover,
.product-card:focus-within {
  background: #F2EFEC;
  border-color: transparent;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

a.whtsnewLink {
    appearance: none;
    background: #fff;
    border: none;
    padding: 14px 20px;
    margin-left: -5px;
    color: #020202;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-card-actions {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.product-card:hover .product-card-actions,
.product-card:focus-within .product-card-actions {
  display: flex;
}

.product-card-cta {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: #282826;
    text-decoration: none;
    letter-spacing: 0.01em;
    color: #FFF;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 11px;
}

.product-card-cta:hover {
  background: #000;
  color: #f2efec;
}

.product-card-link {
    text-decoration: underline;
    color: #000;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 6px;
}

.product-card-link:hover {
  color: #000;
}

/* Detail panel (opens when "Find out more" is clicked) */
.product-detail {
  display: none;
  position: relative;
  background: #fff;
  padding: 36px 40px 40px;
}

.product-range-grid.is-detail-open {
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
  gap: 0;
}

.product-range-grid.is-detail-open .product-card:not(.is-active) {
  display: none;
}

.product-range-grid.is-detail-open .product-card.is-active {
  grid-column: 1;
}

.product-card.is-active {
  background: #F2EFEC;
  border-color: transparent;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.product-card.is-active .product-card-actions {
  display: flex;
}

.product-card.is-active .product-card-link {
  display: none;
}

.product-range-grid.is-detail-open .product-detail {
  display: block;
  grid-column: 2 / -1;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.product-detail-close {
position: absolute;
    top: 25px;
    right: 30px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: #F2EFEC;
    color: #282826;
    font-family: "Inter-SemiBold";
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    width: auto;
    height: auto;
    padding: 7px 15px 9px 13px;
}

.product-detail-close:hover {
  color: #000;
}

.product-detail-title {
  margin: 0 0 16px;
  font-family: "Inter-Bold";
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #282826;
  text-align: center;
  padding-right: 28px;
}

.product-detail-intro {
  margin: 0 auto 36px;
  max-width: 660px;
  font-size: 14px;
  line-height: 1.5;
  color: #282826;
  text-align: left;
  margin-left: 0px;
}

/*.product-detail-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-detail-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.product-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-detail-feature p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #282826;
}

.product-detail-checklist {
  display: none;
}*/
.product-detail-body {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 24px 56px;
}

.product-detail-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-detail-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  text-align: left;
}

.product-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.product-detail-icon svg {
  width: 28px;
  height: 28px;
}

.product-detail-feature p {
margin: 0;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-detail-feature p br {
  display: none;
}

.product-detail-checklist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 7px 0 0 0;
  padding: 0;
}

.product-detail-checklist li {
display: flex;
    align-items: center;
    gap: 14px;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
        margin-bottom: 6px;
}

.product-detail-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.product-card-title {
margin: 0;
    text-transform: uppercase;
    color: #000;
    font-family: "Vanilla Bold";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 55px;
}

.product-card-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card-list li {
  color: #282826;
    font-family: "Inter-Regular";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-detail-feature-text p {
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-detail-feature-text p strong {
    color: #000;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-detail-intro p {
    color: #000;
    text-align: left;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-detail-title {
    color: #000;
    font-family: "Vanilla Bold";
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 90%;
    margin: 0 auto 10px 0;
    text-align: left;
}

/* Tablet (768px – 1024px) */
@media (max-width: 1024px) {
  .products-hero h1 {
    font-size: 56px;
  }

  .products-hero .hero-inner {
    height: 300px;
  }

  .product-range {
    padding: 56px 0 72px;
  }

  .product-range-title {
    margin-bottom: 40px;
    font-size: 24px;
  }

  /* Single-column card stack */
  .product-range-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 20px;
    max-width: 720px;
  }

  /* Cards: white at rest, no hover bg/shadow swap on touch screens */
  .product-card {
    background: #fff;
    padding: 24px 47px;
    gap: 18px;
  }

  .product-card:hover,
  .product-card:focus-within {
    background: #fff;
    border-color: #d9d6d1;
    box-shadow: none;
  }

  /* Bullet list in two columns */
  .product-card-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 8px;
  }

  /* Actions always visible, side-by-side */
  .product-card-actions,
  .product-card:hover .product-card-actions,
  .product-card:focus-within .product-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 4px;
  }

  .product-card-cta,
  .product-card-link {
    flex: 1 1 0;
    width: auto;
    padding: 12px 28px;
    border: 1px solid #282826;
    font-family: "Inter-Bold";
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.01em;
  }

  /* "Find out more" becomes an outlined button on tablet */
  .product-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #282826;
    text-underline-offset: 0;
  }

  .product-card-link:hover {
    background: #f7f5f1;
    color: #282826;
  }

  /* Active card stays white on tablet (panel below is cream) */
  .product-card.is-active {
    background: #fff;
    box-shadow: none;
  }

  /* When alone in the row, the CTA shouldn't stretch full-width */
  .product-card.is-active .product-card-cta {
    flex: 0 0 auto;
    min-width: 220px;
    max-width: 280px;
  }

  /* Detail panel stacks under the active card */
  .product-range-grid.is-detail-open {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .product-range-grid.is-detail-open .product-card.is-active,
  .product-range-grid.is-detail-open .product-detail {
    grid-column: 1;
    background: #F2EFEC;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        border: none;
  }

  .product-detail {
    background: #F2EFEC;
    padding: 55px 55px 36px;
  }

.product-detail-intro p {
    text-align: left;
}

  .product-detail-title {
    text-align: left;
    max-width: 100%;
  }

  .product-range-grid.is-detail-open .product-detail {
    display: block;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: #fff;
}

  .product-detail-intro {
    text-align: left;
    margin: 0 0 28px;
    max-width: none;
  }

  /* Two-column body: icon features (left) + checklist (right) */
  /*.product-detail-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .product-detail-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .product-detail-feature {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    text-align: left;
  }

  .product-detail-feature p {
    font-size: 14px;
  }

  .product-detail-feature p br {
    display: none;
  }

  .product-detail-icon svg {
    width: 28px;
    height: 28px;
  }

  /* Checklist visible on tablet */
  .product-detail-checklist {
    display: flex;
    flex-direction: column;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .product-detail-checklist li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #282826;
  }

  .product-detail-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }*/
}

/* =========================================================
   Product Filter page
   ========================================================= */

/* Top bar: tabs + product guide link + residential insights */
.pf-topbar {
  background: #fff;
  padding: 24px 0 0px 0;
}

.pf-topbar-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0px;
  /* border-bottom: 1px solid #e7e3dc; */
}

.pf-tabs {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1 1 auto;
    justify-content: left;
    margin-left: 0;
    max-width: none;
    border-bottom: 1px solid #e7e3dc;
}

/* Tab dropdown (visible only on tablet) */
.pf-tab-select {
  display: none;
}

/* Slider arrows (visible only on tablet) */
.pf-info-arrows {
  display: none;
}

.pf-tab {
appearance: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    color: #282826;
    opacity: 0.5;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 0;
}

.pf-tab:hover {
  background: transparent;
  color: #282826;
}

.pf-tab.is-active {
border-bottom: 2px solid #282826;
    background: transparent;
    color: #000;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    opacity: 1;
}

/* Product guide sits in the tab row as an underlined link, not a tab */
a.pf-tab-guide {
  gap: 6px;
  /* text-decoration: underline; */
  text-underline-offset: 4px;
}

.pf-tab-icon {
  flex-shrink: 0;
}

.pf-insights-btn {
  flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #282826;
    letter-spacing: 0.06em;
    padding: 0 22px;
    height: 44px;
    box-sizing: border-box;
    text-decoration: none;
    color: #020202;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.pf-insights-btn:hover {
  background: #282826;
  color: #fff;
}

@media (max-width: 767px) {
  .pf-insights-btn {
    width: 80%;
    margin:  0 auto
  }
}

/* Results section */
.pf-results {
  background: #fff;
  padding: 56px 0 40px;
}

.pf-results-inner {
  padding: 0px 0px;
}

.pf-results-title {
margin: 0 0 28px;
    color: #282826;
    font-family: "Inter-SemiBold";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.6px;
}

.pf-filter-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.pf-filter-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.pf-clear-filters {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 4px;
  margin-left: 4px;
  color: #282826;
  font-family: "Inter-SemiBold";
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  line-height: 1;
  align-self: center;
}

.pf-clear-filters:hover,
.pf-clear-filters:focus-visible {
  text-decoration: none;
  color: #6b6a66;
  outline: none;
}

.pf-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Search expands inline in place of Sort + the search icon, not below them */
.pf-sort-group.is-search-open .pf-sort-trigger,
.pf-sort-group.is-search-open .pf-search-btn {
  display: none;
}

.pf-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23282826' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid #c9c4bc;
  color: #282826;
  font-family: "Inter-Medium";
  font-size: 14px;
  font-weight: 500;
  padding: 10px 38px 10px 16px;
  min-width: 150px;
  cursor: pointer;
}

/* Once a real option is picked (not the placeholder with value=""), fill beige */
.pf-select:not(:has(option[value=""]:checked)) {
  background-color: #e5dece;
  border-color: transparent;
}

/* Range select is now enhanced into the same custom dropdown as the other
   filters (see enhanceFilterSelect in product.js) — this just normalises
   leftover uppercase/tracking from its previous life as the dark top-bar
   dropdown, on the visually-hidden native <select> underneath. */
.pf-range-select {
  text-transform: none;
  letter-spacing: normal;
}

/* Range select always has a real value selected (no empty placeholder),
   so its toggle reads as filled/cream like Sort rather than the plain
   white default the other filters start in. */
.pf-select-wrap:has(.pf-range-select) .pf-select-toggle {
  background-color: #F2EFEC;
  border-color: transparent;
}

/* Custom dropdown — wraps the native <select> with a fully-styled menu */
.pf-select-wrap {
  position: relative;
  display: inline-block;
}

.pf-select-wrap > .pf-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  min-width: 0;
  pointer-events: none;
}

.pf-select-toggle {
    position: relative;
    appearance: none;
    background-color: #fff;
    border: 1px solid #c9c4bc;
    padding: 10px 13px 10px 13px;
    min-width: 150px;
    height: 46px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #F2EFEC;
}


.pf-select-wrap.is-selected .pf-select-toggle {
  background-color: #e5dece;
  border-color: transparent;
  border: 1px solid #000;
}

/* Open state — toggle grows a dark border and drops its bottom edge so it
   reads as one continuous bordered box with the menu below it. */
.pf-select-wrap.is-open .pf-select-toggle {
  background-color: #fff;
  border-color: #282826;
  border-bottom-color: transparent;
  position: relative;
  z-index: 31;
}

.pf-select-chevron {
    position: static;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: center;
    transition: transform 0.2s ease;
    pointer-events: none;
    margin: 5px 0 0 8px;
}

.pf-select-wrap.is-open .pf-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.pf-select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #282826;
  border-top: 0;
  width: 100%;
  min-width: 150px;
  box-sizing: border-box;
  z-index: 30;
}

.pf-select-option {
    padding: 14px 18px;
    font-family: "Inter-Regular";
    font-size: 16px;
    color: #050505;
    cursor: pointer;
    font-weight: 400;
    text-align: center;
}

.pf-select-option:first-child {
  border-top: 0;
}

/* Hover = light neutral highlight; is-current (already selected) = beige.
   Both bold, but kept visually distinct from one another. */
.pf-select-option:hover {
  background: #F2EFEC;
  font-family: "Inter-Bold";
  font-weight: 700;
}

.pf-select-option.is-current {
  background: #e5dece;
  font-family: "Inter-Bold";
  font-weight: 700;
}

.pf-select:focus {
  outline: 2px solid #282826;
  outline-offset: 1px;
}

.pf-sort {
  min-width: 140px;
}

/* Sort trigger — opens the "Sort by" sheet, replaces the old inline dropdown */
.pf-sort-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  box-sizing: border-box;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid transparent;
  color: #282826;
  font-family: "Inter-Medium";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  cursor: pointer;
}

.pf-sort-trigger:hover {
  background: #f2efec;
}

.pf-sort-trigger-icon {
  flex-shrink: 0;
}

/* Tablet/mobile show "Sort by" + the single chevron; desktop below swaps
   to "Sort" + the two-way arrow icon in a bordered box. */
.pf-sort-trigger-label--desktop,
.pf-sort-trigger-icon--desktop {
  display: none;
}

/* Desktop (>1200px, above the tablet block elsewhere in this file). */
@media (min-width: 1201px) {
  .pf-sort-trigger {
    background: #fff;
    border: 1px solid rgba(1, 1, 1, 0.50);
  }

  .pf-sort-trigger:hover {
    background: #f7f5f1;
  }

  .pf-sort-trigger-label--desktop {
    display: inline;
        color: #000;
        text-align: center;
        font-family: "Inter-Regular";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
  }

  .pf-sort-trigger-label--responsive {
    display: none;
  }

  .pf-sort-trigger-icon--desktop {
    display: block;
  }

  .pf-sort-trigger-icon--responsive {
    display: none;
  }
}

/* "Sort by" sheet — full-height drawer that slides in from the right, same at every breakpoint */
.pf-sort-sheet[hidden] {
  display: none;
}

.pf-sort-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
}

.pf-sort-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 40, 38, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pf-sort-sheet.is-open .pf-sort-sheet-backdrop {
  opacity: 1;
}

.pf-sort-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 354px;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.pf-sort-sheet.is-open .pf-sort-sheet-panel {
  transform: translateX(0);
}

@media (max-width: 480px) {
  .pf-sort-sheet-panel {
    max-width: 100%;
  }
}

.pf-sort-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
}

.pf-sort-sheet-header h2 {
    margin: 0;
    color: #000;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

span.pf-sort-option-label {
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pf-sort-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

.pf-sort-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-top: 1px solid #e7e3dc;
  cursor: pointer;
  font-family: "Inter-Regular";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  color: #282826;
}

.pf-sort-sheet-list li:first-child .pf-sort-option {
  border-top: 0;
}

.pf-sort-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pf-sort-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c9c4bc;
  box-sizing: border-box;
  position: relative;
}

.pf-sort-option input[type="radio"]:checked + .pf-sort-radio {
  border-color: #282826;
}

.pf-sort-option input[type="radio"]:checked + .pf-sort-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #282826;
}

.pf-sort-sheet-footer {
  padding: 20px 40px;
  border-top: 1px solid #e7e3dc;
}

.pf-sort-sheet-apply {
    appearance: none;
    width: 100%;
    background: #282826;
    border: 0;
    padding: 16px;
    letter-spacing: 0.02em;
    color: #FFF;
    text-align: center;
    font-family: "Inter-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pf-sort-sheet-apply:hover {
  background: #000;
}

body.pf-sort-sheet-open {
  overflow: hidden;
}

/* Placeholder only — shown at the 768-1200px tablet block below, where
   Product term/Max LTV/Fees/Features are hidden. Not wired to anything yet. */
.pf-filters-btn {
  display: none;
}

.pf-search-btn {
  appearance: none;
  background: #F2EFEC;
  border: 0;
  width: 53px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pf-search-btn:hover {
  background: #d9d0bc;
}

.pf-search-btn-icon--close {
  display: none;
}

.pf-search-btn[aria-expanded="true"] {
  background: #f2efec;
}

.pf-search-btn[aria-expanded="true"] .pf-search-btn-icon--open {
  display: none;
}

.pf-search-btn[aria-expanded="true"] .pf-search-btn-icon--close {
  display: inline-block;
}

/* Search now expands inline in the filter bar (next to the other pills)
   instead of dropping into a floating row below it. */
.pf-search-row[hidden] {
  display: none;
}

.pf-search-row {
  display: flex;
  align-items: center;
}

.pf-search-input-wrap {
  position: relative;
  width: 192px;
  max-width: 100%;
}

.pf-search-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.pf-search-input::-webkit-search-cancel-button {
  display: none;
}

.pf-search-input-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  display: inline-flex;
  cursor: pointer;
  color: #282826;
}

.pf-search-input-clear[hidden] {
  display: none;
}

.pf-search-input {
  width: 100%;
  height: 40px;
  border: 1px solid #c9c4bc;
  background: #f7f5f1;
  padding: 8px 32px 8px 34px;
  font-family: "Inter-Regular";
  font-size: 14px;
  color: #282826;
}

.pf-search-input::placeholder {
  color: #8a8881;
}

.pf-search-input:focus {
  outline: none;
  background: #fff;
  border-color: #282826;
}

/* Product rows */
.pf-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pf-empty {
  margin: 0;
  padding: 24px 22px;
  background: #F2EFEC;
  text-align: center;
  font-family: "Inter-Regular";
  font-size: 14px;
  color: #282826;
}

.pf-row {
  background: rgba(242, 239, 236, 0.50);
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 90px;
}

.pf-row-has-tags {
  flex-wrap: wrap;
}

.pf-criteria {
flex: 0 0 auto;
    background: #e5dece;
    border: 1px solid transparent;
    padding: 6px 20px;
    justify-content: space-between;
    gap: 14px;
    min-width: 110px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0 0 0 18px;
    color: #050505;
    text-align: right;
    font-family: "Inter-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pf-criteria:hover {
  background: #d9d0bc;
}

.pf-criteria-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pf-row.is-expanded .pf-criteria-chevron {
  transform: rotate(180deg);
}

.pf-cells {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, auto);
  align-items: center;
  gap: 45px;
  padding: 14px 24px;
}

.pf-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pf-cell-label {
color: #282826;
    font-family: "Inter-Regular";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pf-cell-value {
 display: block;
    color: #282826;
    font-family: "Inter-Bold";
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    margin: 7px 0 0 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.pf-tags {
flex: 1 0 100%;
    display: flex;
    gap: 10px;
    background: #fff;
    border: none !important;
}

.pf-tag {
flex: 1 1 0;
    min-width: 0;
    padding: 7px 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #F2EFEC;
    color: #000;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pf-tag + .pf-tag {
  border-left: 1px solid #e7e3dc;
}

/* Bridging-only regulation badge (e.g. "Regulated" on a bridging product
   row). Deliberately separate from .pf-tags/.pf-tag above, which is
   Residential's own feature-tag styling shared via the same row markup —
   giving this its own class keeps that fix from also changing
   Residential's look. Matches production's exact markup/classes:
   bg-dark border border-2 border-primary text-white py-1 px-5. */
.pf-tags--reg {
flex: 1 0 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    background: transparent;
    border: none !important;
    padding: 0 24px 16px;
    box-sizing: border-box;
}

.pf-tag--reg {
flex: 0 0 auto;
    padding: 4px 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #282826;
    border: 2px solid #282826;
    color: #fff;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-sizing: border-box;
}

/* Criteria expand/collapse panel */
.pf-row.is-expanded {
  flex-wrap: wrap;
  outline: 2px solid #282826;
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}

.pf-row.is-expanded .pf-criteria {
  background: #fff;
  border-color: transparent;
}

.pf-row.is-expanded .pf-criteria:hover {
  background: #fff;
}

/* When one row is expanded, dim the others to focus attention.
   pointer-events must stay enabled — the Criteria button on other rows
   needs to stay clickable so switching between rows works. */
.pf-list:has(.pf-row.is-expanded) .pf-row:not(.is-expanded) {
  /* opacity: 0.45; */
  transition: opacity 0.2s ease;
}

.pf-criteria-panel {
  display: none;
  flex: 1 0 100%;
  background: #f5f3ef;
  border-top: 1px solid #e7e3dc;
}

.pf-row.is-expanded .pf-criteria-panel {
  display: block;
}

.pf-cr-table {
  display: flex;
  flex-direction: column;
}

.pf-cr-item {
display: grid;
    grid-template-columns: 315px 1fr;
    gap: 0;
    padding: 0;
    align-items: stretch;
}

.pf-cr-heading {
    padding: 14px 24px;
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: #fff;
    border-bottom: 1px solid #e7e3dc;
}

.pf-cr-label {
border-bottom: 1px solid #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    color: #282826;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    background: #F2EFEC;
}

.pf-cr-value {
padding: 14px 18px;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e7e3dc;
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.pf-cr-item:last-of-type .pf-cr-label,
.pf-cr-item:last-of-type .pf-cr-value {
  border-bottom: 0;
}

.pf-cr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 24px;
  flex-wrap: wrap;
}

.pf-cr-note {
margin: 0;
    flex: 0 0 666px;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pf-cr-actions {
  display: flex;
  gap: 12px;
}

.pf-cr-btn {
appearance: none;
    padding: 12px 28px;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pf-cr-btn--secondary {
  background: #fff;
  border: 0px solid #c9c4bc;
  color: #000;
}

.pf-cr-btn--secondary:hover {
  background: #f2efec;
}

.pf-cr-btn--primary {
  background: #282826;
  border: 1px solid #282826;
  color: #fff;
}

.pf-cr-btn--primary:hover {
  background: #000;
  border-color: #000;
}

.contact-content.product {
    max-width: 100%;
}

.contact-content.product .contact-accordion-stack {
    padding: 0;
}

.contact-content.product .contact-accordion-panel {
    width: 100%;
}

/* Closed accordion questions read as muted/faded, but only once something
   in the stack is actually open — none of these items are flagged "isOpen"
   in the CMS, so on page load nothing matches :has(.is-open) and everything
   stays full contrast instead of the whole list looking dimmed by default.
   Scoped to this page only — these colours are shared with every other
   page's accordion via style.css. The visible text is the .contact-
   accordion-label span, not the button itself — style.css sets colour
   directly on that span, so overriding the button alone has no visible
   effect (a child's own explicit colour always wins over inheriting one
   from its parent, regardless of the parent rule's specificity). */
.contact-content.product .contact-accordion-stack:has(.contact-accordion-item.is-open) .contact-accordion-item:not(.is-open) .contact-accordion-btn {
    color: #a8a39a;
}

.contact-content.product .contact-accordion-stack:has(.contact-accordion-item.is-open) .contact-accordion-item:not(.is-open) .contact-accordion-label {
    color: #a8a39a;
}

/* The chevron's stroke is hardcoded to "black" in the markup (not
   currentColor), so it needs its own override to match. */
.contact-content.product .contact-accordion-stack:has(.contact-accordion-item.is-open) .contact-accordion-icon.is-closed path {
    stroke: #a8a39a;
}

@media (max-width: 640px) {
  .pf-cr-item {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pf-cr-label {
    border-bottom: 0;
    padding-bottom: 4px;
  }

  .pf-cr-value {
    padding-top: 4px;
  }

  .pf-cr-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-cr-actions {
    flex-direction: column;
  }

  .pf-cr-btn {
    width: 100%;
  }
}

/* Pagination */
.pf-pagination-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}

.pf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.pf-continue {
  display: none;
}

.pf-page,
.pf-page-arrow {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular";
  font-size: 14px;
  font-weight: 500;
  color: #282826;
  cursor: pointer;
}

.pf-page:hover,
.pf-page-arrow:hover {
  background: #f2efec;
}

.pf-page-arrow[disabled] {
  color: #c9c4bc;
  cursor: not-allowed;
  opacity: 0.1;
}

.pf-page-arrow[disabled]:hover {
  background: transparent;
}

.pf-page.is-active {
    background: #282826;
    width: 48px;
    height: 48px;
    color: #F2EFEC;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pf-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #6b6a66;
}

button.pf-page-arrow[aria-label="Previous page"] {
    background: url("/media/201beqyl/leftarrowpg.svg");
    background-repeat: no-repeat;
    color: transparent;
}

button.pf-page-arrow[aria-label="Next page"] {
    background: url(/media/4uxemzep/rightarrowpg.svg);
    background-repeat: no-repeat;
    color: transparent;
}
.pf-page {
    width: 48px;
    height: 48px;
    border: 0.5px solid #282826;
    color: #282826;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 17px 0 0;
}

span#pfMetaCount {
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.pf-meta {
    margin: 12px 0 0;
    text-align: left;
    font-size: 13px;
    color: #282826;
    display: flex;
    align-items: center;
    gap: 35px;
    justify-content: center;
    margin-top: 25px;
}

.pf-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #282826;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-decoration: underline;
}

/* Tab panels */
.pf-panel[hidden] {
  display: none;
}

/* Product Information panel */
.pf-info-title {
    margin: 0 0 28px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #282826;
    font-family: "Vanilla Bold";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
}

/* Static "FAQ's" label inserted above the accordion (see updateInfoPanel
   in product.js) — same treatment as .pf-info-title, just smaller and with
   its own top margin to separate it from the content above. */
.pf-faq-title {
    margin: 40px 0 28px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #282826;
    font-family: "Vanilla Bold";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
}

.pf-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.pf-info-card {
  background: #F2EFEC;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pf-info-card-title {
    margin: 0;
    color: #000;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pf-info-card p {
    margin: 0;
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.pf-info-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #282826;
}

.pf-info-list a {
  color: #282826;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-info-list a:hover {
  color: #000;
}

/* Loop-buffer card clones — hidden by default, shown only on tablet */
.pf-info-card-clone {
  display: none;
}

/* Accordions inside the Information panel */
.pf-accordion {
  background: #F2EFEC;
  margin-top: 12px;
}

.pf-accordion-toggle {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Inter-Regular";
  font-size: 16px;
  font-weight: 700;
  color: #282826;
  cursor: pointer;
  text-align: left;
}

.pf-accordion-toggle:hover {
  background: #ebe7df;
}

.pf-accordion-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pf-accordion.is-open .pf-accordion-chevron,
.pf-accordion-toggle[aria-expanded="true"] .pf-accordion-chevron {
  transform: rotate(180deg);
}

.pf-accordion-panel {
  padding: 0px 24px 0px;
}

/* Product Fees panel */
.pf-fees-title {
  margin: 0 0 24px;
  font-family: "Inter-Bold";
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #282826;
}

.pf-fees-accordion {
  margin-top: 12px;
}

.pf-fees-accordion .pf-accordion-toggle {
  padding: 20px 24px;
  font-size: 15px;
}

.pf-fees-accordion .pf-accordion-panel {
  padding: 0 24px 22px;
}

.pf-fees-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #e7e3dc;
}

.pf-fees-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.4fr;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #e7e3dc;
  font-size: 14px;
  color: #282826;
}

.pf-fees-row:last-child {
  border-bottom: 0;
}

.pf-fees-head {
  background: #f2efec;
  font-family: "Inter-Bold";
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Product Information cards: horizontal slider, 1 visible at a time
   (numVisible in product.js is matched to this breakpoint). */
@media (max-width: 767px) {
  .pf-info-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: hidden;
    gap: 20px;
  }

  .pf-info-card,
  .pf-info-card-clone {
    flex: 0 0 100%;
    min-width: 0;
  }

  .pf-info-card-clone {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #F2EFEC;
    padding: 28px 28px 32px;
  }

  /* Same arrow styling as the tablet slider (768-1024px block above) —
     solid black square, light icon — but centred instead of flex-end. */
  .pf-info-arrows {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 24px;
  }

  .pf-info-arrow {
    appearance: none;
    width: 44px;
    height: 44px;
    background: #282826 !important;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .pf-info-arrow:hover {
    background: #000;
    opacity: 0.85;
  }

  .pf-info-arrow svg {
    pointer-events: none;
  }
}

@media (max-width: 640px) {
  .pf-fees-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Key Criteria */
.pf-key-criteria {
  background: #fff;
  padding: 0 0 80px;
}

.pf-key-criteria > .container-1138 {
  padding: 0 0px;
}



.pf-key-criteria-toggle {
width: 100%;
    appearance: none;
    background: #F2EFEC;
    border: 0;
    padding: 25.5px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #282826;
    font-family: "Vanilla Bold";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
}

.pf-key-criteria-toggle:hover {
  background: #F2EFEC;
}

.pf-key-criteria-chevron {
  transition: transform 0.2s ease;
}

.pf-key-criteria-toggle[aria-expanded="true"] .pf-key-criteria-chevron {
  transform: rotate(180deg);
}

.pf-key-criteria-panel {
  background: #F2EFEC;
  padding: 8px 32px 40px;
}

div#pfKeyCriteriaPanel .footer-section {
    background: transparent;
}

.pf-kc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.pf-kc-section + .pf-kc-section {
  margin-top: 36px;
}

.pf-kc-title {
  margin: 0 0 18px;
  font-family: "Inter-Bold";
  font-size: 22px;
  font-weight: 700;
  color: #282826;
}

.pf-kc-item {
  margin: 0 0 14px;
}

.pf-kc-label {
  font-family: "Inter-Bold";
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #282826;
}

.pf-kc-value {
  font-family: "Inter-Regular";
  font-size: 14px;
  line-height: 1.45;
  color: #282826;
}

.pf-kc-value strong {
  font-family: "Inter-Bold";
  font-weight: 700;
}

.pf-kc-note {
  margin: 14px 0;
  font-family: "Inter-Regular";
  font-size: 14px;
  line-height: 1.5;
  color: #282826;
}

.pf-kc-note strong {
  font-family: "Inter-Bold";
  font-weight: 700;
}

.pf-kc-list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-family: "Inter-Regular";
  font-size: 14px;
  line-height: 1.7;
  color: #282826;
}

.pf-kc-link {
  display: inline-block;
  margin-top: 2px;
  font-family: "Inter-Regular";
  font-size: 14px;
  color: #282826;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-kc-link:hover {
  color: #000;
}

.rte h3 {
    color: #282826;
    font-family: "Inter-SemiBold";
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.6px; /* 120% */
}

.rte p strong {
    color: #282826;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
}

.rte p {
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

@media (max-width: 767px) {
  .pf-kc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pf-key-criteria-toggle {
    padding: 22px 20px;
    font-size: 22px;
  }

  .pf-key-criteria-panel {
    padding: 4px 20px 28px;
    background: #F2EFEC;
  }

  .pf-key-criteria-toggle:hover {
    background: #F2EFEC;
}
}

/* Tablet / narrower screens */
@media (max-width: 1024px) {
  .pf-topbar-inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  .pf-tabs {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pf-cells {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 14px;
  }
}

/* Mobile: tabs scroll horizontally in one line rather than wrapping
   (overrides the <=1024px rule above that wraps them). */
@media (max-width: 767px) {
  .pf-tabs {
    order: 3;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .pf-tab,
  a.pf-tab-guide {
    flex-shrink: 0;
  }

  /* Trailing padding-right on a scrollable flex container gets clipped at
     the scroll end in Chromium/WebKit, so "Product guide" (the last item)
     can't scroll fully into view. Margin on the last item itself works
     around it. */
  a.pf-tab-guide {
    margin-right: 20px;
  }
}

/* Mobile: filter bar matches the tablet treatment — only the range
   dropdown stays visible (bigger, bold, bordered, centred), and Sort by /
   filters / search line up left-to-right. Kept as its own block rather
   than widening the 768-1200px block below, so it doesn't disturb the
   tabs overflow-scroll rule above. */
@media (max-width: 767px) {
  .pf-filter-group > .pf-select-wrap:not(:has(.pf-range-select)) {
    display: none;
  }

  .pf-clear-filters {
    display: none;
  }

  .pf-filter-group,
  .pf-select-wrap:has(.pf-range-select) {
    width: 100%;
  }

  .pf-select-wrap:has(.pf-range-select) .pf-select-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 16px 20px;
    border: 2px solid #282826;
    font-family: "Inter-Bold";
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }

  .pf-select-wrap:has(.pf-range-select) .pf-select-chevron {
    position: static;
    transform: none;
  }

  .pf-select-wrap:has(.pf-range-select).is-open .pf-select-chevron {
    transform: rotate(180deg);
  }

  .pf-sort-group {
    width: 100%;
    /* justify-content: space-between; */
  }

  button.pf-search-btn {
    border: 1px solid rgba(0, 0, 0, 0.00);
    background: #F2EFEC;
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  }

  .pf-filters-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 46px;
    appearance: none;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.00);
    background: #F2EFEC;
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  }

  .pf-results {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
  }
  h2#pfPtTitle {
    font-size: 24px;
}
}

@media (max-width: 640px) {
  .pf-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-row {
    flex-direction: column;
  }

  .pf-criteria {
    width: 100%;
  }

  .pf-cells {
    grid-template-columns: repeat(2, 1fr);
  }

  .pf-tag {
    padding: 10px 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .pf-tag--reg {
    padding: 4px 20px;
    font-size: 14px;
  }
}

/* Mobile: Criteria becomes a centred, full-width bold header with no
   arrow; each product detail renders as its own row (label left, value
   right) in a single column, rather than the tablet's multi-column grid. */
@media (max-width: 767px) {
  .pf-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pf-criteria {
        width: stretch;
        height: auto;
        margin: 20px 20px 0 20px;
        padding: 20px;
        justify-content: center;
        font-family: "Inter-Regular";
        font-weight: 400;
        box-sizing: border-box;
        color: #282826;
        font-size: 20px;
  }

  .pf-criteria-chevron {
    display: none;
  }

  .pf-cells {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 20px;
  }

  .pf-cell {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .pf-cell-value {
    margin: 0px 0 0 0;
  }

  /* Criteria panel (ERCs / Outer limits / Defaults / CCJs / ...): plain
     label-left, bold-value-right rows instead of the desktop's bordered,
     beige-labelled two-column table. */
  .pf-cr-table {
    padding: 24px 20px;
    gap: 18px;
  }

  .pf-cr-item {
    display: flex;
    grid-template-columns: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .pf-cr-heading {
        background: transparent;
        border-bottom: 0;
        padding: 0;
        color: #282826;
        font-family: 'Inter-Regular';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
  }

  .pf-cr-label {
        background: transparent;
        border-bottom: 0;
        padding: 0;
        flex: 0 1 50%;
        min-width: 0;
        font-family: "Inter-Regular";
        font-weight: 400;
        color: #282826;
        font-size: 12px;
        font-style: normal;
        line-height: normal;
  }

  .pf-cr-value {
background: transparent;
        border-bottom: 0;
        padding: 0;
        flex: 1 1 50%;
        min-width: 0;
        justify-content: flex-end;
        text-align: right;
        font-family: "Inter-Bold";
        font-weight: 700;
        color: #282826;
        font-size: 12px;
        font-style: normal;
        line-height: normal;
  }

  /* Back/expanded state shows only the Back header + criteria detail list —
     the summary cells and the footer disclaimer/action buttons stay hidden. */
  .pf-row.is-expanded .pf-cells,
  .pf-row.is-expanded .pf-cr-footer {
    display: none;
  }

  .pf-row.is-expanded {
    flex-wrap: wrap;
    /* outline: 2px solid #282826; */
    outline-offset: -1px;
    position: relative;
    z-index: 1;
  }

  /* Numbered pagination gives way to a cumulative "Load more" control
     (see product.js) — order matches the target: count first, then the
     link, so pf-load-more is placed after .pf-meta in the markup. */
  .pf-pagination-row {
    display: none;
  }

  .pf-load-more:not([hidden]) {
    display: block;
    margin: 24px auto 0;
    background: transparent;
    border: 0;
    padding: 0;
    color: #282826;
    font-family: "Inter-SemiBold";
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
  }

  .pf-meta {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: #282826;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
  }

  /* Download search results stays for desktop/tablet — mobile only. */
  .pf-download {
    display: none;
  }
}

/* Tablet-specific top bar layout (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

p.pf-cr-note {
    text-align: center;
}

.pf-cr-footer {
    justify-content: center;
}

.pf-cr-actions {
    gap: 30px;
}

  /* Product finder/fees cells: 4 columns, two rows, with a white divider */
  .pf-cells {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 24px;
    position: relative;
    gap: 32px;
  }

  .pf-cells::before {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    height: 3px;
    background: #fff;
    transform: translateY(-50%);
    pointer-events: none;
    display: none;
  }

  /* Criteria sits inline to the left of the cells, pinned to the top of the
     row rather than stretched or centred (matches the tablet design). */
  .pf-row {
    flex-direction: row;
    align-items: flex-start;
  }

  .pf-criteria {
    width: auto;
    height: auto;
    margin: 20px 0 0 20px;
    box-sizing: border-box;
  }

  /* No arrow on Criteria/Close at this width, per Figma. */
  .pf-criteria-chevron {
    display: none;
  }

  .pf-row.is-expanded .pf-criteria {
    background: #fff;
  }

  /* Continue button isn't part of the tablet design — plain pagination only */
  .pf-continue {
    display: none;
  }

  /* Product Information cards: horizontal slider, 2 visible at a time */
  .pf-info-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: hidden;
    gap: 20px;
  }

  .pf-info-card,
  .pf-info-card-clone {
    flex: 0 0 calc(50% - 10px);
    min-width: 0;
  }

  .pf-info-card-clone {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #F2EFEC;
    padding: 28px 28px 32px;
  }

  .pf-info-arrows {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 8px 0 24px;
  }

  .pf-info-arrow {
    appearance: none;
    width: 44px;
    height: 44px;
    background: #000;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .pf-info-arrow:hover {
    background: #000;
    opacity: 0.85;
  }

  .pf-info-arrow svg {
    pointer-events: none;
  }

  .pf-results-inner {
    padding: 0px 35px;
  }

}

/* Top bar + filter bar: wider tablet range (768–1200px) than the rest of
   the tablet-specific rules above, per design. Same markup throughout —
   only the range dropdown stays visible next to Sort + search; Product
   term/Max LTV/Fees/Features and "Clear filters" collapse. They're still
   functional (not removed), just hidden here; if this width needs them
   too, they'll need their own affordance (e.g. a "More filters" toggle)
   rather than reusing this rule as-is. */
@media (min-width: 768px) and (max-width: 1200px) {
  .pf-topbar-inner {
    flex-wrap: nowrap;
    gap: 12px;
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Shrunk just enough that tabs + insights button fit on one line down
     to 768px. Overrides the <=1024px rule that puts .pf-tabs on its own
     full-width row (order: 3) — without resetting order/width here, tabs
     and the button still split onto two lines for the 768-1024 overlap. */
  .pf-tabs {
    order: 0;
    width: auto;
    flex-wrap: nowrap;
    gap: 16px;
  }

  .pf-tab {
    font-size: 14px;
  }

  .pf-insights-btn {
    padding: 0 14px;
    font-size: 11px;
    height: 40px;
  }

  .pf-filter-group > .pf-select-wrap:not(:has(.pf-range-select)) {
    display: none;
  }

  .pf-clear-filters {
    display: none;
  }

  button.pf-search-btn {
    border: 1px solid rgba(0, 0, 0, 0.00);
    background: #F2EFEC;
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  }

  .pf-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 46px;
    appearance: none;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.00);
    background: #F2EFEC;
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.08);
  }

  .pf-key-criteria > .container-1138 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

a.whtsnewLink {
    display: none;
}

.heroPrdtPg h1.banner-title {
    max-width: 100%;
}

  @media (min-width: 1025px) and (max-width: 1299px) {
.container-1138.pf-results-inner {
    padding: 0 40px;
}

.pf-topbar-inner {
    padding: 0px 43px;
}

}


.pf-cr-value {
    display: block;
}

.pf-cr-value ul li p {
    margin-bottom: 5px;
}

ul.product-detail-checklist {
    list-style-type: disc;
}

ul.product-detail-checklist li {
    display: list-item;
}
/* ============================================================
   PRODUCT RANGE BANNER (slider)
   Markup: Views/productfinder.cshtml  .pf-banner
   Behaviour: wwwroot/scripts/product.js

   One markup, three layouts:
     desktop  >=1200px  arrows pinned to the outer edges
     tablet   768-1199   arrows pulled in beside the copy
     mobile   <=767      arrows drop below "All products" as a centred pair
   ============================================================ */
.pf-banner {
  position: relative;
  width: 100%;
  min-height: 500px;
  background: #E5DECE;
  overflow: hidden;
  box-sizing: border-box;
}

/* Decorative product imagery. The cushions float on the background and are
   cropped by the banner edge (hence the negative offsets + overflow:hidden on
   .pf-banner) rather than filling a neat column. */
.pf-banner__media {
  position: absolute;
  bottom: 0;
  width: 340px;
  height: 88%;
  pointer-events: none;
}

.pf-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pf-banner__media--left {
  left: -78px;
}

/* Same asset mirrored, so the two sides read as a pair. */
.pf-banner__media--right {
  right: -78px;
}

.pf-banner__media--left img {
  transform: rotate(-4deg);
}

.pf-banner__media--right img {
  transform: scaleX(-1) rotate(-4deg);
}

.pf-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 70px 24px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- dots ------------------------------------------------ */
.pf-banner__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
}

.pf-banner__dot {
  width: 26px;
  height: 6px;
  padding: 0;
  border: 0;
  background: #f2effc;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.pf-banner__dot.is-active {
  background: #282826;
}

/* --- slide copy ------------------------------------------ */
.pf-banner__slide[hidden] {
  display: none;
}

.pf-banner__slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pf-banner__slides p {
    color: #282826;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.pf-banner__eyebrow {
margin: 0 0 8px;
    color: #282826;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.pf-banner__title {
margin: 0 0 0px;
    text-transform: uppercase;
    color: #000;
    text-align: center;
    font-family: "Vanilla Bold";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 115%;
}

.pf-banner__text {
  max-width: 270px;
  margin: 0 0 28px;
  font-family: "Inter-Regular", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #282826;
}

.pf-banner__cta {
display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 26px;
    margin-bottom: 18px;
    background: #282826;
    text-decoration: none;
    white-space: nowrap;
    color: #FFF;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pf-banner__cta:hover {
  background: #1a1a19;
  color: #fff;
}

.pf-banner__all {
    text-decoration: underline;
    color: #090909;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

/* --- arrows ---------------------------------------------- */
.pf-banner__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.pf-banner__nav--prev {
  left: 8px;
}

.pf-banner__nav--next {
  right: 8px;
}

/* --- tablet: 768-1199px ---------------------------------- */
@media (max-width: 1199px) {
  .pf-banner {
    min-height: 440px;
  }

  .pf-banner__media {
    width: 250px;
  }

  .pf-banner__media img {
    position: absolute;
    bottom: -61px;
  }

  .pf-banner__media--left {
    left: -66px;
  }

  .pf-banner__media--right {
    right: -66px;
  }

  .pf-banner__inner {
    padding: 32px 24px 40px;
  }

  .pf-banner__title {
    font-size: 38px;
  }

  /* Arrows tuck in beside the copy rather than sitting on the far edges. */
  .pf-banner__nav--prev {
    left: 150px;
  }

  .pf-banner__nav--next {
    right: 150px;
  }
}

/* --- tablet: 768-1200px (arrows repositioned) -------------- */
@media (min-width: 768px) and (max-width: 1200px) {
  .pf-banner__nav--prev {
    left: 20px;
    top: 119px;
  }

  .pf-banner__nav--next {
    right: 20px;
    top: 119px;
  }
}

/* --- mobile: <=767px -------------------------------------
   Arrows leave the edges and become a centred pair underneath the
   content, so the copy gets the full width. The side imagery drops to a
   single band below (see .pf-banner__media--left). */
@media (max-width: 767px) {
  /* The image element is the first child in source order (it has to be, so it
     can sit behind the copy on larger screens). Flex ordering moves it below
     the copy and arrows here without duplicating the markup. */
  .pf-banner {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .pf-banner__inner {
    order: 1;
    padding: 28px 20px 0;
  }

  .pf-banner__title {
    font-size: 32px;
  }

  .pf-criteria-summary__footer p {
    font-size: 14px !important;
}

  .pf-banner__text {
    max-width: 100%;
  }

  .pf-banner__nav {
    position: static;
    transform: none;
    width: 46px;
    height: 40px;
    background: #f2efec;
  }

  /* Sit them side by side in a row of their own, after the slides. */
  .pf-banner__nav--prev {
    order: 3;
    margin: 28px 6px 0 0;
    left: auto;
  }

  .pf-banner__nav--next {
    order: 4;
    margin: 28px 0 0 6px;
    right: auto;
  }

  .pf-banner__inner {
    flex-flow: row wrap;
    justify-content: center;
  }

  .pf-banner__dots {
    order: 1;
    width: 100%;
    justify-content: center;
  }

  .pf-banner__slides {
    order: 2;
    width: 100%;
  }

  /* One image band across the bottom instead of two cropped sides. */
  .pf-banner__media--right {
    display: none;
  }

  /* A single cushion cropped by the bottom of the banner, as per the design.
     The window is shorter than the image so the lower half is cut off. */
  .pf-banner__media--left {
    order: 2;
    position: static;
    width: 300px;
    height: 185px;
    margin: 28px auto 0;
    transform: none;
    overflow: hidden;
  }

  .pf-banner__media--left img {
    width: 300px;
    height: 290px;
    transform: none;
  }
}

/* ============================================================
   PRODUCT INFORMATION BANNER
   Markup: Views/productFinder.cshtml  .pf-info-banner
   Behaviour: wwwroot/scripts/product.js (activateTab)

   Shown in place of .pf-banner (the range carousel) only while the
   Product Information tab is active.
   ============================================================ */
.pf-info-banner[hidden] {
  display: none;
}

.pf-info-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 476px;
  background: #E5DECE;
  padding: 40px 24px;
  box-sizing: border-box;
}

.pf-info-banner__img {
  max-width: 320px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.pf-info-banner__title {
    margin: 0;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: "Vanilla Bold";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    top: -27px;
}

@media (max-width: 767px) {
  .pf-info-banner {
    min-height: 180px;
    padding: 28px 20px;
    gap: 16px;
  }

  .pf-info-banner__img {
    max-width: 180px;
  }

  .pf-info-banner__title {
    font-size: 26px;
  }
}

/* ============================================================
   BRIDGING PRODUCT FINDER - ADDITIONS
   (Views/bridgingProductFinder.cshtml)

   Bridging-only classes (tier selector, criteria summary, static result
   rows, Key Criteria colour overrides) with no equivalent above, which is
   shared with Residential. Scoped by class name only - none of this
   touches Residential's own selectors, so Residential is unaffected.
   ============================================================ */
.pf-tier-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.pf-tier-label {color: #282826;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;}
.pf-tier-group { display: flex; gap: 8px; }
.pf-tier-btn {box-sizing: border-box;
    min-width: 40px;
    height: 36px;
    padding: 0 14px;
    color: #282826;
    font-family: "Inter-Bold";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    border: 1px solid rgba(0, 0, 0, 0.00);
    background: #F2EFEC;
    box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.08);}
.pf-tier-btn.is-active { background: #e5dece; border-color: transparent; }

.pf-criteria-summary { background: #F2EFEC; padding: 20px 24px; margin-bottom: 24px; }
.pf-criteria-summary__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.pf-criteria-summary__item { min-width: 110px; }
.pf-criteria-summary__item--ltv { flex: 1 1 360px; }
.pf-criteria-summary__label { display: block;
    margin-bottom: 4px;
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; }
.pf-criteria-summary__value { display: block;
    color: #282826;
    font-family: "Inter-Bold";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal; }
.pf-criteria-summary__ltv-values { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.pf-criteria-summary__ltv-values .pf-criteria-summary__value { margin: 0; }
.pf-criteria-summary__value--note { flex-basis: 100%; }
.pf-criteria-summary__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5dece; }
.pf-criteria-summary__footer p { margin: 0;
    max-width: 640px;
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; }
.pf-criteria-summary__more { 
    flex-shrink: 0;
    background: #282826;
    border: none;
    padding: 10px 18px;
    white-space: nowrap;
    color: #FFF;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
 }

/* Tablet: visible border round the box, and each Max LTV/OMV line stacked
   on its own row instead of flowing inline. */
.pf-pagination-row.pf-tablet-pagination, .pf-static-meta.pf-tablet-pagination { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
    .pf-criteria-summary { border: 1px solid #000; padding: 0; }
    .pf-criteria-summary__grid { padding: 20px; background: #f8f6f5; }
    .pf-criteria-summary__ltv-values { flex-direction: column; gap: 4px; }
    .pf-criteria-summary__value--note { flex-basis: auto; }
    .pf-criteria-summary__footer { flex-wrap: nowrap; margin: 0; padding: 20px 20px 20px 20px; border: none; background: #F2EFEC; }
    .pf-criteria-summary__footer p { flex: 1 1 auto; min-width: 0; }

    .pf-row--static { flex-direction: column; align-items: stretch; gap: 0; padding: 16px 0px 0px 0px !important; }
    .pf-row--static .pf-cells { padding: 16px 20px; }
    .pf-row__cta { width: 100%; text-align: center; padding: 14px 20px; }

    .pf-pagination-row.pf-tablet-pagination, .pf-static-meta.pf-tablet-pagination { display: flex; justify-content: center; }
    .pf-static-meta:not(.pf-tablet-pagination) { display: none; }
}

.pf-list--static { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pf-row--static { display: flex; align-items: center; gap: 16px; border: 1px solid transparent; padding: 16px 20px; }
.pf-row--static .pf-cells { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 0.8fr 0.7fr 0.9fr; gap: 16px; flex: 1; min-width: 0; }
.pf-row--static .pf-cell-label { display: block; font-family: "Inter-Regular", "Inter", sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: #6b6a66; margin-bottom: 2px; }
.pf-row--static .pf-cell-value { display: block; font-family: "Inter-Bold", "Inter", sans-serif; font-weight: 700; color: #282826; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row__cta { flex-shrink: 0;
    background: #e5dece;
    border: none;
    padding: 10px 18px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s ease;
    color: #000;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; }

/* Mobile: "Start Calculation" becomes a full-width header bar on top of the
   card, with the product details below as plain label-left/value-right
   rows. Placed after the base .pf-row--static rules above so it wins at
   equal specificity. */
@media (max-width: 767px) {
    .pf-row--static { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .pf-row--static .pf-row__cta { 
        order: -1;
        width: 90%;
        text-align: center;
        padding: 18px 20px;
        font-size: 20px;
        margin: 20px auto 0px auto;
        color: #282826;
     }
    .pf-row--static .pf-cells { display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 24px 20px;
        width: 90%;
        margin: 0 auto; }
    .pf-row--static .pf-cell { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; }
    .pf-row--static .pf-cell-label { flex: 0 0 130px; margin-bottom: 0; color: #282826;
        font-size: 15px;
        font-weight: 400;}
    .pf-row--static .pf-cell-value { flex: 1 1 auto; text-align: left; white-space: normal; overflow: visible; text-overflow: unset; }
    #pfBridgingMobileMeta { justify-content: center; }
    /* Scoped to .pf-key-criteria--bridging (see marker class note further
       down) - Residential's own Key Criteria keeps product.css's existing
       unconditional 0px padding at this width unchanged. */
    .pf-key-criteria--bridging > .container-1138 { padding: 0 30px; }
}

.pf-list--static:has(.pf-row__cta:hover) .pf-row__cta:not(:hover) { opacity: 0.4; }

.pf-static-meta { display: flex; gap: 16px; align-items: center; font-family: "Inter-Bold", "Inter", sans-serif; font-weight: 700; font-size: 14px; color: #282826; margin: 8px 0 32px; }
.pf-static-meta span strong {
    color: #282826;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px; /* 106.667% */
}

.pf-static-meta span {
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.pf-static-meta a {     
  text-decoration: underline;
    color: #282826;
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-decoration-line: underline; }

/* No sub-tab row on Residential's own Information tab - this is a
   deliberate Bridging-specific addition, not a Residential-parity thing. */
.pf-info-subtabs { display: flex; background: #F2EFEC; margin-bottom: 32px; }
.pf-info-subtab { 
  flex: 1;
    appearance: none;
    background: #F2EFEC;
    border: none;
    padding: 16px 20px;
    color: #050505;
    text-align: right;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0.4;
 }
.pf-info-subtab.is-active { 
    background: #e5dece;
    text-align: center;
    color: #090909;
    font-family: "Inter-Bold";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    opacity: 1; 
  }

/* Bridging-only Key Criteria colour overrides - .pf-key-criteria/.pf-kc-*
   structural styles above are reused unchanged (and stay untouched for
   Residential); these two only apply inside .pf-key-criteria--bridging,
   a marker class the Bridging view adds to its own <section> so these
   colour tweaks can't leak onto Residential's real Key Criteria, which
   uses the same base classes. */
.pf-key-criteria--bridging .pf-key-criteria-toggle:hover { background: #F2EFEC; }
.pf-key-criteria--bridging .pf-key-criteria-panel { background: #F2EFEC; padding: 8px 32px 40px; }

/* Product Information tablet layout - the 5-button .pf-info-subtabs row
   collapses into a single dropdown (.pf-info-type-select, enhanced into a
   .pf-select-wrap by the same enhanceFilterSelect already used for the
   Max LTV/Rate/etc. filters) at tablet width, matching the supplied
   reference; title and dropdown sit on one row (title left, dropdown
   right). .pf-info-grid/.pf-info-card/.pf-info-arrows/.pf-info-arrow are
   real, already-styled classes shared with Residential's own
   Information-tab carousel (see product.css's existing tablet/mobile
   rules for those) - no changes needed there, this page's cards get the
   same 2-up-with-arrows treatment automatically. */
.pf-select-wrap:has(.pf-info-type-select) { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
    .pf-info-subtabs { display: none; }
    .pf-info-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
    .pf-info-header-row .pf-info-title { margin-bottom: 0; font-size: 28px; line-height: 34px; }
    .pf-select-wrap:has(.pf-info-type-select) { display: inline-flex; flex-shrink: 0; }
}

/* Same 5-button-row-to-dropdown swap as tablet above, for mobile - the
   button row doesn't fit here either. Title stacks above the dropdown
   (too narrow at this width for both side by side). Placed after the
   base .pf-select-wrap:has(.pf-info-type-select){display:none} rule above
   so it wins at equal specificity - a copy placed earlier in source lost
   to that rule regardless of viewport width. */
@media (max-width: 767px) {
    .pf-info-subtabs { display: none; }
    .pf-info-header-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
    .pf-info-header-row .pf-info-title { margin-bottom: 0; line-height: 28px; font-size: 24px; font-weight: 600; font-family: "Inter-SemiBold";}
    .pf-select-wrap:has(.pf-info-type-select) { display: inline-flex;width: 100%; }
    h2.pf-faq-title {
    font-size: 24px;
    font-weight: 600;
    font-family: "Inter-SemiBold";
}
}

/* ============================================================
   PRODUCT TRANSFER PRODUCT FINDER - ADDITIONS
   (Views/productTransferProductFinder.cshtml)

   Product Transfer-only classes (register-to-access banner, five-column
   result rows using Rate/Reversion Rate/Product Fee/ERCs instead of
   Bridging's own field set) with no equivalent above, which is shared
   with Residential/Bridging. Scoped by class name only - none of this
   touches their selectors. The Product Information tab reuses Bridging's
   .pf-info-header-row/.pf-info-type-select/.pf-info-arrows tablet+mobile
   rules as-is (see those above) - no changes needed there.
   ============================================================ */
.pf-register-banner { background: #F2EFEC; padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 0px; }
.pf-register-banner__text { max-width: 100%; }
.pf-register-banner__title { margin: 0 0 6px; font-family: "Inter-Bold", "Inter", sans-serif; font-weight: 700; font-size: 18px; color: #282826; }
.pf-register-banner__text p {
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
   }
.pf-register-banner__cta { flex-shrink: 0;
    background: #282826;
    border: none;
    padding: 14px 24px;
    text-decoration: none;
    white-space: nowrap;
    color: #FFF;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal; }

/* Result rows - static grid like Bridging's own, just five columns
   (Product Type/Rate/Reversion Rate/Product Fee/ERCs) instead of six,
   and no per-row CTA button (not shown in the supplied reference). */
.pf-list--pt { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pf-row--pt { display: flex; align-items: center; padding: 16px 20px; }
.pf-row--pt .pf-cells { display: grid; grid-template-columns:0.19fr 0.13fr 0.19fr .18fr 0.27fr 0.2fr 0.2fr; gap: 16px; flex: 1; min-width: 0; }
.pf-row--pt .pf-cell-label { 
  display: block;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 2px;
    color: #282826;
    font-family: "Inter-Regular";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
 }
.pf-row--pt .pf-cell-value { display: block; font-family: "Inter-Bold", "Inter", sans-serif; font-weight: 700; color: #282826; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
    .pf-row--pt { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
    .pf-row--pt .pf-cells { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding: 24px 20px; width: 100%; }
    .pf-row--pt .pf-cell { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; }
    .pf-row--pt .pf-cell-label { flex: 0 0 130px; margin-bottom: 0; }
    .pf-row--pt .pf-cell-value { flex: 1 1 auto; text-align: left; white-space: normal; overflow: visible; text-overflow: unset; }

    .pf-register-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px;background: #e5dece }
    .pf-register-banner__cta { width: 100%; text-align: center; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .pf-row--pt .pf-cells { padding: 16px 20px; }
    .pf-info-header-row button.pf-select-toggle {
    display: none;
}
}

/* "Renters' Rights Act" insight callout - single-row accordion, new
   component (no equivalent elsewhere on the site). Same open/close
   interaction as .pf-key-criteria-toggle, lighter styling (one line, no
   uppercase treatment) to match the supplied reference. */
.pf-info-highlight-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #F2EFEC; border: none; padding: 20px 24px; margin-top: 32px; text-align: left; font-family: "Inter-Regular", "Inter", sans-serif; font-size: 15px; color: #282826; cursor: pointer; }
.pf-info-highlight-toggle strong { font-family: "Inter-Bold", "Inter", sans-serif; font-weight: 700; }
.pf-info-highlight-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.pf-info-highlight-toggle[aria-expanded="true"] .pf-info-highlight-chevron { transform: rotate(180deg); }
.pf-info-highlight-panel { background: #F2EFEC; padding: 0 24px 20px; }
.pf-info-highlight-panel p { margin: 0; font-family: "Inter-Regular", "Inter", sans-serif; font-size: 14px; color: #6b6a66; }
div#pfInfoContentContainer > section > .container-1280 > .contact-content, div#pfPtInfoContentContainer > section > .container-1280 > .contact-content {max-width: 100%;}

.pf-select-wrap.is-selected .pf-select-toggle .pf-select-label {
    color: #050505;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: inline-block;
    max-width: 119px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

img.mbImgs {
    display: none;
}

img.dtImgs {
    display: block;
}

button[aria-label="Product range"] > svg {
    position: relative !important;
    top: -4px;
}

.pf-select-wrap.is-selected .pf-select-toggle .pf-select-chevron {
    margin: -3px 0 0 10px;
}

.pf-filter-group .pf-select-wrap.is-selected:nth-child(1) .pf-select-toggle .pf-select-chevron {
    margin: 7px 0 0 10px;
}

p.pf-empty {
    color: #000;

/* Body copy 1/Inter Regular/16px */
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

p.pf-empty span {
    font-family: "Inter-SemiBold";
    font-weight: 600;
}

@media only screen and (max-width: 320px) {
.pf-select-wrap.is-selected .pf-select-toggle .pf-select-label {
    max-width: 209px !important;
}
}

.pf-results-inner .contact-content {
    max-width: 100%;
}

.pf-results-inner .contact-content .contact-accordion-stack {
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (max-width: 767px) {
    img.mbImgs {
    display: block;
}

img.dtImgs {
    display: none;
}

.pf-banner__slides p {
    font-size: 16px !important;
}    

.pf-banner__slides p {
    font-size: 16px !important;
}

h2#pfBridgingTitle {
    font-size: 24px;
}

.pf-select-wrap.is-selected .pf-select-toggle .pf-select-label {
    max-width: 100%;
}

button.pf-criteria-summary__more {
    color: #FFF;
    text-align: center;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0 auto;
    width: auto;
    height: 44px;
}

button#pfSortTrigger svg {
    display: none;
}

button#pfSortTrigger svg.pf-sort-trigger-icon {
    display: block;
}

.pf-key-criteria-toggle {
    color: #1D1D1D;
    font-family: "Inter-SemiBold";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    height: 48px;
}

.pf-key-criteria-panel .footer-section {
        padding: 10px 0px 0px;
    }

.pf-key-criteria--bridging .pf-key-criteria-panel {
    padding: 8px 0px 27px !important;
}

.pf-register-banner__title {
    font-size: 20px;
    color: #282826;
}

h2.pf-results-title {
    font-size: 24px;
}

.pf-cell {
    width: 100%;
}

span.pf-cell-label {
    width: 48%;
}

span.pf-cell-value {
    width: 48%;
    text-align: right;
}

.pf-cr-value {
    text-align: left;
}

.pf-cr-value ul {
    padding: 0;
}

section.pf-key-criteria {
    padding: 0 30px 80px;
}

svg.pf-key-criteria-chevron {
    width: 17.54px;
    height: 11.439px;
}

.pf-key-criteria-panel .rte-content {
    padding: 0px !important;
}

h2#pfInfoTitle {
    color: #282826;
    font-family: "Inter-SemiBold";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.6px; /* 140% */
}

.contact-accordion-stack {
    padding: 0;
}

span.contact-accordion-label.is-closed {
    padding-right: 20px;
}

.pf-row.is-expanded {
    flex-wrap: nowrap !important;
}

.pf-row.is-expanded .pf-criteria {
    width: auto !important;
}
.pf-criteria {
    width: auto;
}

.pf-info-header-row button.pf-select-toggle {
    display: none;
}
}