/* Top navigation bar (#NavIc, Views/master.cshtml) */
#NavIc {
  position: sticky;
  top: 0;
  z-index: 1010;
}

.navic-header {
  width: 100%;
  background: #fff;
  transition: background-color 0.15s ease;
}

/* Customers open (or .is-current when landing on /customers directly, set
   by nav.js): tint the whole bar, not just the trigger; hide Intermediaries'
   own chevron (Customers' chevron already shows/hides via its own
   [aria-expanded]/.is-current below); and hide Log in/Register, which are
   an Intermediaries-only desktop feature. */
.navic-header:has(.navic-customers[aria-expanded="true"]),
.navic-header:has(.navic-customers.is-current) {
  background: #fff;
}

.navic-header:has(.navic-customers[aria-expanded="true"]) .navic-intermediaries .navic-caret,
.navic-header:has(.navic-customers.is-current) .navic-intermediaries .navic-caret {
  display: none;
}

.navic-header:has(.navic-customers[aria-expanded="true"]) .navic-intermediaries,
.navic-header:has(.navic-customers.is-current) .navic-intermediaries {
  opacity: 0.4;
}

.navic-header:has(.navic-customers[aria-expanded="true"]) .navic-actions .navic-btn--login,
.navic-header:has(.navic-customers[aria-expanded="true"]) .navic-actions .navic-btn--register,
.navic-header:has(.navic-customers.is-current) .navic-actions .navic-btn--login,
.navic-header:has(.navic-customers.is-current) .navic-actions .navic-btn--register {
  display: none;
}

.navic-header:has(.navic-customers[aria-expanded="true"]) .navic-search-btn,
.navic-header:has(.navic-customers.is-current) .navic-search-btn {
  background: #fff;
}

.navic-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 80px;
  padding: 0 32px;
  box-sizing: border-box;
}

.navic-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.navic-intermediaries {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #efece7;
    color: #080808;
    text-decoration: none;
    font-family: "Inter-SemiBold";
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 20px;
    margin-left: 20px;
    line-height: normal;
}

.navic-caret {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  margin-top: 2px;
}

.navic-intermediaries[aria-expanded="true"] .navic-caret {
  transform: rotate(180deg);
}

.navic-customers-wrap {
  flex-shrink: 0;
  margin-left: -25px;
}

.navic-customers {
  display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 21px;
    border: 1.5px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    color: #080808;
    text-align: center;
    font-family: "Inter-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
}

.navic-customers[aria-expanded="true"],
.navic-customers.is-current {
  opacity: 1;
  background: #fff;
  /* border-color: #282826; */
}

.navic-customers[aria-expanded="true"] {
  /* margin-left: 20px; */
}

.navic-customers .navic-caret {
  display: none;
}

.navic-customers[aria-expanded="true"] .navic-caret,
.navic-customers.is-current .navic-caret {
  display: inline-block;
}

/* Only rotate while the dropdown is actually open (matches Intermediaries'
   own chevron behaviour) -- .is-current alone (landed on /customers, menu
   still closed) keeps it pointing down. */
.navic-customers[aria-expanded="true"] .navic-caret {
  transform: rotate(180deg);
}

.header-dropdown-menu.navic-customers-menu {
  display: flex;
  align-items: stretch;
  width: 322px;
  height: 446px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Once "Existing customer support" reveals its flyout columns there's more
   than 322px of content -- let the panel grow to fit rather than clip it. */
.header-dropdown-menu.navic-customers-menu:has(.navic-customers-flyout:not([hidden])) {
  width: auto;
}

.navic-customers-col--links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 322px;
  flex-shrink: 0;
  padding: 37px 50px 27px 50px;
  box-sizing: border-box;
}

.navic-customers-item {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, font-weight 0.15s ease;
    color: #000;
    text-align: right;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.navic-customers-item.is-active,
.navic-customers-item:hover {
  font-weight: 700;
}

/* Dim every other item while one is hovered (live feedback before anything's
   clicked) or while one is the active/expanded category (persists after the
   click, once the mouse has moved off it, as long as its flyout is still
   showing) -- unlike the Intermediaries mega menu's hover-only dimming, this
   one is meant to survive a click, per the reference design. */
.navic-customers-col--links:has(.navic-customers-item:hover) .navic-customers-item:not(:hover),
.navic-customers-col--links:has(.navic-customers-item.is-active) .navic-customers-item:not(.is-active):not(:hover) {
  color: #6b6b68;
  font-weight: 500;
}

.navic-customers-item svg {
  flex-shrink: 0;
  fill: currentColor;
}

.navic-customers-flyout {
  display: flex;
  align-items: flex-start;
  /* border-left: 1px solid rgba(40, 40, 38, 0.1); */
}

.navic-customers-flyout[hidden] {
  display: none;
}

.navic-customers-flyout-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 35px 35px;
  box-sizing: border-box;
}

.navic-customers-flyout .navic-customers-flyout-col:nth-child(2) {
  padding-right: 50px;
}

.navic-customers-flyout-item {
  padding: 10px 0;
  color: #282826;
  text-decoration: none;
  font-family: "Inter-Regular";
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none !important;
}

.navic-customers-flyout-item:hover {
  font-weight: 700;
}

.navic-customers-flyout-col:has(.navic-customers-flyout-item:hover) .navic-customers-flyout-item:not(:hover) {
  color: #6b6b68;
}

/* "Need a Mortgage?" popup, matching the offcanvas panel on
   precisemortgages.co.uk/customers -- a dark, right-anchored panel over a
   dimmed backdrop, opened from the Customers dropdown's "Need a Mortgage?"
   link (see nav.js). */
.navic-mortgage-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.navic-mortgage-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.navic-mortgage-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 900px;
  max-width: 92vw;
  background: #282826;
  z-index: 1201;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.navic-mortgage-panel.is-open {
  transform: translateX(0);
}

.navic-mortgage-header {
  display: flex;
  justify-content: flex-end;
  padding: 32px 32px 0 32px;
  box-sizing: border-box;
}

.navic-mortgage-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #f2efec;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.navic-mortgage-body {
  padding: 24px 64px 64px 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.navic-mortgage-title {
  margin: 0;
  color: #f2efec;
  font-family: "Vanilla Bold";
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
}

.navic-mortgage-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
  border-bottom: 2px solid #f2efec;
}

.navic-mortgage-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.navic-mortgage-subtitle {
  color: #f2efec;
  font-family: "Inter-SemiBold";
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
}

.navic-mortgage-text {
  margin: 0;
  color: #f2efec;
  font-family: "Inter-Regular";
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  max-width: 60ch;
}

.navic-mortgage-btn {
  display: inline-block;
  align-self: flex-start;
  background: #f2efec;
  color: #282826;
  border-radius: 0;
  padding: 13px 40px;
  font-family: "Inter-Bold";
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}

.navic-mortgage-btn:hover {
  background: #fff;
}

@media (max-width: 700px) {
  .navic-mortgage-panel {
    width: 100%;
    max-width: 100%;
  }

  .navic-mortgage-body {
    padding: 24px 24px 48px 24px;
  }
}

.navic-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.navic-search {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  background: transparent;
  transition: border-color 0.4s ease, background-color 0.4s ease;
  margin-right: 13px;
}

.navic-search-suggestions {
    position: absolute;
    top: calc(100% + 20px);
    left: -17px;
    min-width: 320px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E5E0D8;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    margin: 0;
    padding: 21px 36px;
    z-index: 50;
    border-top: none;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.navic-search-suggestions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}

.navic-search-suggestions[hidden] {
  display: none;
}

.navic-search-suggestions-summary {
    margin: 0 0 12px;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.navic-search-suggestions-summary:empty {
  display: none;
}

.navic-search-suggestions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.navic-search-suggestions-list a {
    display: block;
    text-decoration: underline;
    white-space: nowrap;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    margin-bottom: 9px;
}

.navic-search-suggestions-loadmore {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 16px 0 0;
  color: #282826;
  font-family: "Inter-Medium";
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.navic-search-suggestions-loadmore[hidden] {
  display: none;
}

.navic-search:has(.navic-search-input.is-open) {
border: 0.5px solid #000;
    background: #F2EFEC;
}

.navic-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 39px;
  padding: 0;
  background: #f2f1ee;
  border: 0;
  color: #282826;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.4s ease;
}

.navic-search-btn:hover,
.navic-search-btn[aria-expanded="true"] {
  background: #e5dece;
}

.navic-search:has(.navic-search-input.is-open) .navic-search-btn,
.navic-search:has(.navic-search-input.is-open) .navic-search-btn:hover {
  background: transparent;
}

/* Scoped with the parent class so specificity is (0,2,0). style.min.css --
   loaded on the Customers pages -- carries
   `input[type="search"] { padding: .5rem 1rem .5rem 3.5rem }` at (0,1,1),
   which beat a bare `.navic-search-input` and left the CLOSED state at 56px
   padding. The transition then animated toward it, dragging the icon left
   before it snapped back on hide. */
.navic-search .navic-search-input {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: "Inter-Medium";
  font-size: 14px;
  color: #282826;
  opacity: 0;
  transition: opacity 0.4s ease, padding 0.4s ease;
}

.navic-search-input::-webkit-search-decoration,
.navic-search-input::-webkit-search-cancel-button,
.navic-search-input::-webkit-search-results-button,
.navic-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.navic-search .navic-search-input.is-open {
    width: 180px;
    padding: 0 4px;
    opacity: 1;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

input.navic-search-input:focus {
  outline: none;
}

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

.navic-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 39px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #282826;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.navic-search-input.is-open ~ .navic-search-clear {
  width: 36px;
  opacity: 1;
  pointer-events: auto;
}

.navic-btn {
   font-size: 16px !important;
    font-style: normal;
    line-height: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    text-decoration: none;
    white-space: nowrap;
    font-family: "Inter-Medium";
    font-weight: 500;
    box-sizing: border-box;
}

.navic-btn--login {
  background: #282826;
  border: 1.5px solid #282826;
  color: #fff;
}

.navic-btn--login:hover {
  background: #1a1a19;
  color: #fff;
}

.navic-btn--register {
  background: #fff;
  border: 1.5px solid #282826;
  color: #282826;
}

.navic-btn--register:hover {
  background: #f2f1ee;
}

.navic-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}

/* The icon is 48x35, wider than the button at every breakpoint (44px, and
   32px on mobile). Constrain it by width and let the height follow so it
   scales proportionally instead of being squashed to the button's box. */
.navic-menu-btn svg {
  width: 100%;
  height: auto;
}

/* Base (desktop) state: hidden entirely above 1200px. Declared before the
   media query below so the "display: inline-flex" override at tablet width
   actually wins (same specificity -- source order decides). */
.navic-mode-switcher {
  display: none;
  position: relative;
}

/* Tablet: 768px-1200px. The two separate desktop pills (Intermediaries,
   Customers) are replaced by a single combined switcher; Log in/Register
   are hidden (only logo, switcher, search, and hamburger show). */
@media (max-width: 1200px) {
  .navic-inner {
    height: 70px;
    padding: 0 30px;
    gap: 16px;
  }

  /* Wider spacing between search and the hamburger on tablet. (No visual
     effect below 768px -- search is hidden there, leaving the hamburger as
     the only visible child.) */
  .navic-actions {
    gap: 30px;
  }

  .navic-intermediaries,
  .navic-customers-wrap {
    display: none;
  }

  .navic-mode-switcher {
    display: inline-flex;
  }

  .navic-menu-btn {
    display: inline-flex;
  }

  /* Log in/Register are Intermediaries-desktop only; on tablet they live in
     the drawer's own header instead. */
  .navic-actions .navic-btn--login,
  .navic-actions .navic-btn--register {
    display: none;
  }

  /* The #f2efec Customers tint is a desktop-only treatment -- below 1200px
     the bar stays white for both sections. */
  .navic-header:has(.navic-customers[aria-expanded="true"]),
  .navic-header:has(.navic-customers.is-current) {
    background: #fff;
  }

  /* ...which means the search button can no longer be white too, or it would
     vanish into the bar. Back to its default tint. */
  .navic-header:has(.navic-customers[aria-expanded="true"]) .navic-search-btn,
  .navic-header:has(.navic-customers.is-current) .navic-search-btn {
    background: #f2f1ee;
  }
}

.navic-mode-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #efece7;
  border: 0;
  color: #282826;
  cursor: pointer;
  font-family: "Inter-SemiBold";
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.navic-mode-switcher__trigger:hover {
  background: #e5dece;
}

.navic-mode-switcher__trigger[aria-expanded="true"] .navic-caret {
  transform: rotate(180deg);
}

.navic-mode-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 170px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(40, 40, 38, 0.16);
  z-index: 1020;
}

.navic-mode-switcher__menu[hidden] {
  display: none;
}

.navic-mode-switcher__option {
  display: block;
  width: 100%;
  padding: 12px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #282826;
  font-family: "Inter-Medium";
  font-size: 15px;
  font-weight: 500;
}

.navic-mode-switcher__option:hover,
.navic-mode-switcher__option.is-active {
  background: #f2efec;
  font-weight: 700;
}

/* Intermediaries drawer: only exists as an overlay at the tablet breakpoint
   (see Views/master.cshtml, [data-navic-drawer]). Hidden entirely above
   1200px so it never affects desktop layout. */
.navic-drawer,
.navic-drawer-backdrop {
  display: none;
}

@media (max-width: 1200px) {
  .navic-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
  }

  .navic-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .navic-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 80vw;
    background: #fff;
    z-index: 1101;
    overflow-y: auto;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
  }

  .navic-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    background: #F2EFEC;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  }
}

/* Mobile (280px-767px). Same markup as tablet; only sizing differs. Placed
   after every base rule above so these overrides win on source order (media
   queries add no specificity of their own).
   - Header row: only logo + mode switcher + hamburger fit. With the tablet
     sizing the row needed ~410px at 375px, pushing the hamburger off-screen,
     so the logo/switcher shrink and search drops out.
   - Drawer: full screen rather than the tablet's 300px side panel; at 320px
     and below the 80vw cap left it too narrow for labels like "Existing
     customer support" to sit on one line. */
@media (max-width: 767px) {
  .navic-inner {
    height: 64px;
    padding: 0 16px;
    gap: 8px;
  }

  .navic-logo svg {
    width: 104px;
    height: auto;
  }

  /* Search isn't part of the mobile header per the design. */
  .navic-search {
    display: none;
  }

  /* Plain label beside the logo rather than a filled pill. */
  .navic-mode-switcher__trigger {
    gap: 6px;
    padding: 6px 0;
    background: transparent;
    font-size: 14px;
  }

  .navic-mode-switcher__trigger:hover {
    background: transparent;
  }

  .navic-menu-btn {
    width: 32px;
  }

  .navic-drawer {
    width: 100%;
    max-width: 100%;
  }

  /* Search moves into the drawer here, with the close button beside it on the
     left rather than pushed to the right as on tablet. */
  .navic-drawer.is-customers .navic-drawer__search {
    display: flex;
  }

  .navic-drawer.is-customers .navic-drawer__close {
    margin-left: 0;
    width: 40px;
    height: 40px;
  }

  /* Intermediaries drawer (default, non-customers): same idea as the
     customers case above, but Log in/Register stay visible here (customers
     hides them), so close moves first via `order` instead of DOM position -
     keeps this scoped away from the customers rules above rather than
     reordering the header markup shared by both. Search still wraps onto
     its own full-width row underneath. */
  .navic-drawer:not(.is-customers) .navic-drawer__header {
    flex-wrap: wrap;
  }

  .navic-drawer:not(.is-customers) .navic-drawer__close {
    order: -1;
  }

  .navic-drawer:not(.is-customers) .navic-drawer__search {
    display: flex;
    flex: 1 0 100%;
  }

  .navic-drawer:not(.is-customers) .navic-drawer__item {
    border-radius: 8px;
  }

  /* While a search is active, the drawer switches to a column flex layout
     so the white results panel can stretch to fill the remaining height
     below the header, rather than stopping at its own content. */
  .navic-drawer.is-searching {
    display: flex;
    flex-direction: column;
  }

  .navic-drawer.is-searching .navic-drawer__search-results {
    flex: 1;
  }
}

.navic-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(40, 40, 38, 0.08);
}

.navic-drawer__header[hidden] {
  display: none;
}

.navic-drawer__header .navic-btn--login {
  margin-left: auto;
}

.navic-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}

.navic-drawer__header .navic-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

/* Tablet only (768-1200px): no divider under the header, Log in is outlined
   rather than the filled dark default, and Register/close drop their borders.
   Mobile keeps the defaults. */
@media (min-width: 768px) and (max-width: 1200px) {
  .navic-drawer__header {
    gap: 14px;
    border-bottom: 0;
  }

  .navic-drawer__header .navic-btn--login,
  .navic-drawer__header .navic-btn--login:hover {
    background: #fff;
    color: #282826;
    border: 1.5px solid #282826;
    width: 87px;
    height: 40px;
    margin-left: 0;
    color: #101010;
    text-align: center;
    font-family: "Inter-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .navic-drawer__header .navic-btn--register,
  .navic-drawer__header .navic-btn--register:hover {
    background: #fff;
    border: 0;
    width: 103px;
    height: 40px;
    color: #000;
    text-align: center;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .navic-drawer__header .navic-drawer__close {
    border: 0;
    margin-left: 18px;
  }
}

/* In-drawer search: mobile only (shown in the 767px block below), since the
   header bar's own search is hidden at that width. */
.navic-drawer__search {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

/* Focused: outline the box and reveal the clear button, matching the header
   bar's own open-search treatment. */
.navic-drawer__search:focus-within {
  border-color: #282826;
}

.navic-drawer__search-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Parent-scoped for the same reason as .navic-search .navic-search-input:
   style.min.css sets padding on input[type="search"] at (0,1,1), which would
   otherwise indent this field by 56px. */
.navic-drawer__search .navic-drawer__search-input {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.navic-drawer__search-input:focus {
  outline: none;
}

.navic-drawer__search-input::-webkit-search-decoration,
.navic-drawer__search-input::-webkit-search-cancel-button,
.navic-drawer__search-input::-webkit-search-results-button,
.navic-drawer__search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.navic-drawer__search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: #282826;
  cursor: pointer;
  flex-shrink: 0;
}

.navic-drawer__search:focus-within .navic-drawer__search-clear {
  display: inline-flex;
}

.navic-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

/* Tablet only (768-1200px): looser spacing between the drawer's cards.
   The Customers sub-panel list has its own padding rule further down and is
   more specific, so it is unaffected. */
@media (min-width: 768px) and (max-width: 1200px) {
  .navic-drawer__list {
    gap: 20px;
    padding: 6px 15px;
  }

}

/* Mobile only (<=767px). Must sit after the base rule above -- the drawer's
   other mobile block earlier in this file (~line 722) is declared before it
   and would lose on source order. */
@media (max-width: 767px) {
  .navic-drawer__list {
    gap: 20px;
    padding: 15px 25px;
  }

  .navic-actions {
    float: right;
    text-align: right;
    margin-left: auto;
  }

  .navic-mode-switcher {
      padding: 0 0px;
  }

  a.navic-logo {
      margin-right: auto;
  }

  .navic-inner.container-1280 {
      height: 51px;
      padding-top: 7px;
  }

  .navic-drawer__header {
      padding: 16px 26px;
  }

  .navic-drawer__header {
      gap: 20px;
  }

  .navic-drawer.is-customers .navic-drawer__item span.navic-drawer__item-left > svg {
    margin: 2px 0 0 5px;
}

.navic-drawer.is-customers .navic-drawer__item {
    color: #000;
    text-align: right;
    font-family: "Inter-Regular";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.navic-drawer.is-customers .navic-drawer__close svg {
    width: 11.75px;
    height: 12.732px;
}

form.search-results__box {
    position: relative;
}

a.search-results__box-clear {
    position: absolute;
    right: 15px;
}

.navic-drawer__header .navic-btn {
    height: 40px;
}

.navic-drawer__list a.navic-drawer__item img {
    height: 40px !important;
}

.navic-drawer__item {
    padding: 7.5px 15px !important;
    border-radius: 0px !important;
    min-height: 55px;
}

a.navic-drawer__tile {
    width: 118.951px !important;
    height: 118.951px !important;
    color: #282826 !important;
    font-family: "Inter-Medium" !important;
    font-size: 14.986px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    gap: 17px !important;
}

.navic-drawer__tiles {
    gap: 28px !important;
    padding: 10px 25px !important;
}

.navic-drawer__panel-header {
    padding: 25px 25px 16px 25px !important;
}

.navic-drawer__sublist-item {
        padding: 14px 18px !important;
        text-decoration: none !important;
        color: #282826 !important;
        text-align: left;
        font-family: "Inter-Regular" !important;
        font-size: 16px !important;
        font-style: normal;
        font-weight: 400 !important;
        line-height: normal;
}

.navic-drawer__search-results-summary {
      color: #000 !important;
      font-family: "Inter-Regular" !important;
      font-size: 16px !important;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
}
}

.navic-drawer__list[hidden] {
  display: none;
}

/* While the in-drawer search has an active query (nav.js toggles this
   class), hide whichever drawer list is currently showing and reveal the
   live results panel below instead. */
.navic-drawer.is-searching .navic-drawer__list {
  display: none;
}

.navic-drawer__search-results {
  background: #fff;
  padding: 16px;
}

.navic-drawer__search-results[hidden] {
  display: none;
}

.navic-drawer__search-results-summary {
  font-family: "Inter-Regular";
  font-size: 15px;
  color: #282826;
  margin: 0 0 16px;
}

.navic-drawer__search-results-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.navic-drawer__search-results-list a {
    text-decoration: underline;
    color: #000;
    font-family: "Inter-Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.navic-drawer__search-results-loadmore {
  background: none;
  border: none;
  padding: 0;
  color: #282826;
  font-family: "Inter-Medium";
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.navic-drawer__search-results-loadmore[hidden] {
  display: none;
}

.navic-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #fff;
  text-decoration: none;
  color: #000;
  font-family: "Inter-Medium";
  font-size: 15px;
  font-weight: 500;
}

/* Tablet only (768-1200px): white cards, so they stay distinct against the
   drawer's #F2EFEC background -- the default #f2efec item colour matched it
   exactly and the cards disappeared. Must sit after the base rule above:
   media queries add no specificity, so source order decides. */
@media (min-width: 768px) and (max-width: 1200px) {
  .navic-drawer__item {
    background: #fff;
    height: 55px;
  }
}

.navic-drawer__item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Customers drawer (.is-customers set by nav.js on /customers pages):
   inverts the root palette -- tinted drawer with white cards, rather than
   Intermediaries' white drawer with tinted cards -- and drops Log in/Register,
   which are Intermediaries-only. */
.navic-drawer.is-customers {
  background: #f2efec;
}

.navic-drawer.is-customers .navic-drawer__item {
  background: #fff;
}

.navic-drawer.is-customers .navic-drawer__header {
  border-bottom: 0;
}

.navic-drawer.is-customers .navic-drawer__header .navic-btn--login,
.navic-drawer.is-customers .navic-drawer__header .navic-btn--register {
  display: none;
}

.navic-drawer.is-customers .navic-drawer__close {
  margin-left: auto;
  border: 0;
}

.navic-drawer.is-customers .navic-drawer__panel-header {
  border-bottom: 0;
}

/* Customers second-level screen ("Existing customer support"): a white
   screen with a boxed back arrow beside the title, and plain indented
   sub-links rather than the root screen's white cards. */
.navic-drawer.is-customers .navic-drawer__panel {
  background: #fff;
  min-height: 100%;
}

.navic-drawer.is-customers .navic-drawer__panel .navic-drawer__back {
  gap: 16px;
  text-align: left;
}

/* Keep the title on one line beside the arrow rather than wrapping. */
.navic-drawer.is-customers .navic-drawer__panel .navic-drawer__panel-title {
  font-size: 15px;
  white-space: nowrap;
}

/* Below ~340px even the full-width drawer can't fit the longest title on one
   line next to the arrow box, so let it wrap instead of overflowing. */
@media (max-width: 340px) {
  .navic-drawer.is-customers .navic-drawer__panel .navic-drawer__panel-title {
    white-space: normal;
  }
}

/* The arrow sits in its own tinted square; the title stays plain beside it. */
.navic-drawer.is-customers .navic-drawer__panel .navic-drawer__back svg {
  box-sizing: content-box;
  width: 8px;
  height: 14px;
  padding: 13px 16px;
  background: #f2efec;
}

/* Back arrow is the only way out of this screen, per the design. */
.navic-drawer.is-customers .navic-drawer__panel .navic-drawer__panel-header .navic-drawer__close {
  display: none;
}

.navic-drawer.is-customers .navic-drawer__panel .navic-drawer__list {
  gap: 0;
  padding: 0px 0 16px 42px;
}

.navic-drawer.is-customers .navic-drawer__panel .navic-drawer__item {
  background: transparent;
  padding: 14px 16px 14px 32px;
}

.navic-drawer__chevron {
  flex-shrink: 0;
  fill: currentColor;
}

.navic-drawer__thumb {
  flex-shrink: 0;
}

img.navic-drawer__thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

/* Second-level screen for a category (Residential, Bridging, Product
   Transfers): replaces .navic-drawer__list in place, see header.js. */
.navic-drawer__panel[hidden] {
  display: none;
}

.navic-drawer__panel-header {
  display: flex;
  align-items: center;
  padding: 16px;
}

.navic-drawer__panel-header .navic-drawer__close {
  margin-left: auto;
}

.navic-drawer__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #282826;
  cursor: pointer;
}

.navic-drawer__back svg {
  fill: currentColor;
  flex-shrink: 0;
}

.navic-drawer__panel-title {
    color: #000;
    text-align: right;
    font-family: "Inter-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.navic-drawer__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}

.navic-drawer__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1 / 1;
  background: #f2efec;
  text-decoration: none;
  color: #282826;
  text-align: center;
}

.navic-drawer__tile:hover,
.navic-drawer__tile:active {
  background: #e5dece;
}

.navic-drawer__tile-icon svg {
  width: 32px;
  height: 32px;
}

.navic-drawer__tile-label {
  font-family: "Inter-Medium";
  font-size: 14px;
  font-weight: 500;
}

/* Third-level screen for a tile with real sub-items (currently just
   Residential > Products), see header.js data-navic-tile-flyout. */
.navic-drawer__tile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 8px;
  padding: 16px;
  background: #f2efec;
  text-decoration: none;
  color: #282826;
  font-family: "Inter-Bold";
  font-size: 15px;
  font-weight: 700;
}

.navic-drawer__tile-row-icon svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.navic-drawer__sublist {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 52px;
}

.navic-drawer__sublist-item {
  padding: 14px 16px;
  text-decoration: none;
  color: #282826;
  font-family: "Inter-Medium";
  font-size: 15px;
  font-weight: 500;
}

.navic-drawer__illustration {
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  opacity: 0.9;
}

/* Category panels (Residential / Bridging / Product Transfers) on tablet and
   mobile. Placed after the base rules above so these win on source order.
   The panel goes white so the #f2efec tiles read as cards -- the drawer
   itself is #f2efec, so tile and background were the same colour and the
   cards vanished. Back arrow gets its own tinted box and the close button
   loses its border, matching the Customers panel treatment. */
@media (max-width: 1200px) {
  .navic-drawer__panel {
    background: #fff;
    min-height: 100%;
  }

  .navic-drawer__panel .navic-drawer__back svg {
    box-sizing: content-box;
    width: 8px;
    height: 14px;
    padding: 13px 16px;
    background: #f2efec;
  }

  .navic-drawer__panel-header .navic-drawer__close {
    border: 0;
  }

  /* Icon and label sit top-left inside the tile rather than centred. */
  .navic-drawer__tile {
    align-items: flex-start;
    padding: 16px;
    text-align: left;
  }
}

@media (min-width: 1280px) {
  input.navic-search-input.is-open {
    width: 322px !important;
  }

  .navic-search-suggestions {
      width: 446px;
      background: #FFFFFE;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  }
}

main:has(.search-results) .navic-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

button.navic-search-btn svg {
    margin-left: -3px;
}