/* ════════════════════════════════════════════════════════════════════════
   ISLER UNIFIED NAVBAR  —  shared site-wide
   Floating glassmorphism pill (kept from the homepage aesthetic) with a
   Havells-style grouped 3-column "Products" mega-menu. Navy/yellow, Supreme.
   Applied to every page so the navbar is identical across the site.
   ════════════════════════════════════════════════════════════════════════ */

.isler-nav {
  position: fixed;
  top: 0;                                 /* stuck to the top edge, no gap (was 18px) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 13px 14px 13px 16px;
  /* Client 2026-08-11: the scrolled bar is plain WHITE, outlined in brand
     orange. It used to be a warm-grey frosted pill (rgba(233,231,226,.98))
     with a grey hairline — the client read that grey as dirty against the
     white page. The blur stays so anything passing under the pill still
     softens instead of reading through it sharply. */
  background: #FFFFFF;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 100px;
  border: 1.5px solid #F28C28;
  box-shadow: 0 8px 30px rgba(30, 28, 24, 0.16);
  min-width: min(1160px, calc(100vw - 40px));
  font-family: var(--font);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Auto-hide: slides up on scroll-down, reveals on scroll-up (JS toggles this).
   Keeps the horizontal centering while sliding out of view. */
.isler-nav--hidden { transform: translateX(-50%) translateY(-120%); }

/* ── Logo ──
   Client 2026-08-11: a white pill sits behind the symbol + wordmark so the
   mark stays clearly readable — this matters most on the homepage, where the
   bar goes transparent over the hero footage and the navy wordmark otherwise
   disappears into the video. The plate is part of the logo link itself, so it
   travels with the mark in every bar state. */
.isler-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: #fff;
  /* Client 2026-08-11: tried square, they preferred the cylinder — keep the
     fully-rounded pill. */
  border-radius: 100px;
  padding: 6px 16px;
}
.isler-nav__logo img {
  height: 34px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* ── Search ──
   Client 2026-08-11: the always-visible search rectangle is gone from the bar.
   What's left in the bar is a single magnifier icon sitting immediately to the
   right of "Home"; clicking it drops the field open underneath the pill. The
   field itself is the SAME element as before — it is only hidden until
   .is-search-open is set — so assets/js/search.js keeps working untouched and
   the mobile magnifier (which already worked this way) is unchanged.
   That is why this rule is display:none rather than the field being deleted. */
.isler-nav__search {
  display: none;
  align-items: center;
  background: rgba(11, 26, 61, 0.05);
  border: 1px solid rgba(11, 26, 61, 0.12);
  border-radius: 6px;   /* rectangle (was a 100px pill) */
  padding: 0 14px 0 12px;
  gap: 7px;
  transition: background 150ms ease, border-color 150ms ease;
}
.isler-nav__search:focus-within { background: rgba(11, 26, 61, 0.08); border-color: rgba(11, 26, 61, 0.22); }
.isler-nav__search svg { flex-shrink: 0; opacity: 0.55; }
/* icon uses inline stroke="white" in the markup — override to navy on the light bar */
.isler-nav__search svg circle,
.isler-nav__search svg line { stroke: var(--navy); }
.isler-nav__search input {
  background: transparent; border: none; outline: none;
  color: rgba(11, 26, 61, 0.9);
  font-size: 15px; font-family: inherit; width: 190px; padding: 8px 0; letter-spacing: 0.01em;
}
.isler-nav__search input::placeholder { color: rgba(11, 26, 61, 0.45); }

/* ── The magnifier that opens it, first item in the links row, left of "Home" ──
   A separate element from the mobile .isler-nav__search-toggle (which lives
   next to the burger and is hidden above 1023px). Both carry the toggle class
   so one handler in search.js drives either; only one is ever on screen. */
.isler-nav__search-toggle--inline { display: none; }
@media (min-width: 1024px) {
  /* Two classes deep on purpose: the shared `.isler-nav__search-toggle
     { display:none }` reset lives further down this file, and at equal
     specificity source order would hand it the win and keep the icon
     invisible on desktop. */
  .isler-nav .isler-nav__search-toggle--inline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px; margin-right: 2px;
    background: none; border: none; border-radius: 100px;
    cursor: pointer; color: var(--navy);
    transition: background 150ms ease, color 150ms ease;
  }
  .isler-nav__search-toggle--inline svg { display: block; }
  .isler-nav__search-toggle--inline:hover { background: rgba(11, 26, 61, 0.06); }
  .isler-nav.is-search-open .isler-nav__search-toggle--inline { background: rgba(11, 26, 61, 0.08); }
}

/* ── Open state: the field drops out of the pill, full width underneath ──
   These rules used to live inside the max-width:1023px block because the
   drop-open field was mobile-only. Desktop now uses the same interaction, so
   they are global; the mobile block keeps only what genuinely differs. */
.isler-nav.is-search-open .isler-nav__search {
  display: flex;
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0;
  background: rgba(7, 17, 44, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 4px 14px;
}
.isler-nav.is-search-open .isler-nav__search input { width: 100%; color: #fff; }
.isler-nav.is-search-open .isler-nav__search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.isler-nav.is-search-open .isler-nav__search svg circle,
.isler-nav.is-search-open .isler-nav__search svg line { stroke: rgba(255, 255, 255, 0.7); }
.isler-nav__search .isler-search__results { left: 0; right: 0; width: auto; }

/* Product search results dropdown */
.isler-nav__search { position: relative; }
.isler-search__results {
  position: absolute; top: calc(100% + 12px); left: 0;
  width: 340px; max-width: calc(100vw - 40px);
  max-height: 62vh; overflow-y: auto;
  background: rgba(233, 231, 226, 0.98);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(90, 88, 82, 0.24);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(30, 28, 24, 0.22);
  padding: 6px;
  display: none;
  z-index: 210;
}
.isler-search__results.is-open { display: block; }
.isler-search__item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 9px; text-decoration: none; }
.isler-search__item:hover { background: rgba(11, 26, 61, 0.06); }
.isler-search__item-name { font-size: 13.5px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.isler-search__item-cat { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-mid); white-space: nowrap; flex-shrink: 0; }
.isler-search__empty { padding: 14px 12px; font-size: 13px; color: var(--gray-mid); }

/* ── Top-level links ── */
.isler-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.isler-nav__item { position: static; }   /* lets the mega span the full pill width */

/* Scoped to DIRECT-child links only (top-level pill items + the Categories
   trigger). Must NOT reach the nested .isler-mega__link anchors — those live
   deeper (.isler-nav__links > li > .isler-mega … > li > a) and keep their own
   white color. A bare `.isler-nav__links a` here would outrank .isler-mega__link
   by specificity and paint the mega labels navy-on-navy (invisible). */
.isler-nav__links > li > a,
.isler-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;   /* +1 (was 14px) */
  font-weight: 500;
  color: rgba(11, 26, 61, 0.85);
  padding: 10px 22px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: none;
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.isler-nav__links > li > a:hover,
.isler-nav__trigger:hover { color: var(--navy); background: rgba(242, 140, 40, 0.14); }
/* Orange + navy theme (2026-10-23): the current page carries an orange
   underline; it also slides in under any link on hover. */
.isler-nav__links > li > a { position: relative; }
.isler-nav__links > li > a::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease;
}
.isler-nav__links > li > a:hover::after,
.isler-nav__links > li > a[aria-current="page"]::after { transform: scaleX(1); }
.isler-nav__links > li > a[aria-current="page"] { color: var(--navy); }
.isler-nav__search-toggle--inline { color: var(--orange-deep); }
/* Categories is now a direct link to Key Products Range — no dropdown, so hide the chevron. */
#isler-products-trigger .isler-nav__chev { display: none; }
.isler-nav__chev { transition: transform 200ms ease; opacity: 0.7; }
.isler-nav__item.is-open .isler-nav__chev { transform: rotate(180deg); }
.isler-nav__item.is-open .isler-nav__trigger { color: var(--navy); background: rgba(242, 140, 40, 0.14); }

.isler-nav__burger { display: none; }
.isler-nav__search-toggle { display: none; }

/* ════════════════════════════════  MEGA-MENU  ════════════════════════════ */
.isler-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1240px, calc(100vw - 40px));        /* wider than the pill, centered */
  /* Same warm-grey frosted glass as the navbar pill (matched colour + opacity),
     so the dropdown reads as one surface with the bar. Text/icons are navy. */
  background: rgba(233, 231, 226, 0.98);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(90, 88, 82, 0.24);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(30, 28, 24, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms 160ms;
  z-index: 199;
}
.isler-mega.is-open {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;
  transition: opacity 160ms ease, transform 160ms ease;
}
/* invisible hover bridge across the gap between pill and panel */
.isler-mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }

.isler-mega__inner {
  padding: 14px 32px 18px;
}

/* ── "cat2" layout: 4 super-category headers side by side; the one you click
      drops its sub-categories down underneath. Only one open at a time.
      ("cat1" was the earlier variant — headers stacked vertically, each panel
      opening under its own header.) ─────────────────────────────────────── */
.isler-mega__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border-bottom: 1px solid rgba(11, 26, 61, 0.10);
}

.isler-mega__tab {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 10px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(11, 26, 61, 0.72);
  text-align: center;
  border-radius: 10px 10px 0 0;
  position: relative;
  transition: color 140ms ease, background 140ms ease;
}
.isler-mega__tab:hover { color: var(--navy); background: rgba(11, 26, 61, 0.04); }
.isler-mega__tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

/* Yellow underline marks the open header, sitting on the strip's divider */
.isler-mega__tab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--yellow);
  transform: scaleX(0);
  transition: transform 200ms ease;
}
.isler-mega__tab.is-open { color: var(--navy); }
.isler-mega__tab.is-open::after { transform: scaleX(1); }

/* No +/- badge — the yellow underline alone marks the open header */
.isler-mega__tab-icon { display: none; }

/* The panel area below the strip — grows downward for whichever header is open */
.isler-mega__panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease;
}
.isler-mega__panel-inner { padding: 16px 0 6px; }

/* Each item = small thumbnail/icon + label in a row; items flow into columns */
.isler-mega__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 2px 18px;
}
.isler-mega__link {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500; line-height: 1.3;
  color: rgba(11, 26, 61, 0.85);     /* navy — legible on the warm-grey panel */
  text-decoration: none;
  padding: 6px 10px;
  margin: 0 -10px;                    /* hover bg bleeds a touch without shifting text */
  border-radius: 10px;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.isler-mega__link:hover,
.isler-mega__link:focus-visible {
  color: var(--navy);
  background: rgba(11, 26, 61, 0.06);
  outline: none;
}
.isler-mega__link--lead { font-weight: 500; }          /* "Built-in Hobs" — match other items (was 700) */
.isler-mega__gap { margin-top: 8px; }                  /* breathing room before Gas Cooktops */

/* Uniform 42px icon tile — clean line icons (no product photos).
   Subtle translucent tile on the navy panel; the icon reads in soft white
   and shifts to yellow on hover, matching the label. */
.isler-mega__thumb {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 26, 61, 0.05);
  border: 1px solid rgba(11, 26, 61, 0.12);
  transition: border-color 140ms ease, background 140ms ease;
}
.isler-mega__thumb svg {        /* line icons — navy stroke on the warm-grey tile */
  width: 22px; height: 22px;
  stroke: rgba(11, 26, 61, 0.78); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 140ms ease;
}
.isler-mega__link:hover .isler-mega__thumb {
  border-color: rgba(242, 140, 40, 0.6);
  background: rgba(242, 140, 40, 0.12);
}
.isler-mega__link:hover .isler-mega__thumb svg { stroke: var(--navy); }

/* ════════════════════════════  SIMPLE DROPDOWN (About)  ════════════════════════════ */
.isler-nav__drop { position: relative; }
.isler-nav__submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 190px;
  list-style: none; margin: 0; padding: 8px;
  background: rgba(233, 231, 226, 0.98);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(90, 88, 82, 0.24);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(30, 28, 24, 0.22);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0ms 160ms;
  z-index: 199;
}
.isler-nav__submenu::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.isler-nav__drop:hover .isler-nav__submenu,
.isler-nav__drop:focus-within .isler-nav__submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}
.isler-nav__drop:hover .isler-nav__chev,
.isler-nav__drop:focus-within .isler-nav__chev { transform: rotate(180deg); }
.isler-nav__submenu a {
  display: block; padding: 9px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: rgba(11, 26, 61, 0.85);
  white-space: nowrap; text-decoration: none;
  transition: color 140ms ease, background 140ms ease;
}
.isler-nav__submenu a:hover, .isler-nav__submenu a:focus-visible {
  color: var(--navy); background: rgba(11, 26, 61, 0.06); outline: none;
}

/* ════════════════════════════  RESPONSIVE  ════════════════════════════ */
@media (max-width: 1023px) {
  .isler-nav { gap: 14px; padding: 10px 10px 10px 14px; min-width: min(740px, calc(100vw - 28px)); }
  .isler-nav__logo img { height: 28px; }
  .isler-nav__logo { padding: 5px 12px; }
  .isler-nav__links > li > a, .isler-nav__trigger { font-size: 14px; padding: 9px 16px; }

  /* Mobile search entry point: the magnifier next to the burger. The open-state
     panel it reveals is styled globally now — only the button's own display
     switch is width-dependent. */
  .isler-nav__search-toggle:not(.isler-nav__search-toggle--inline) { display: inline-flex; align-items: center; justify-content: center; padding: 8px; background: none; border: none; cursor: pointer; color: var(--navy); }
  .isler-nav__search-toggle svg { display: block; }
  .isler-nav.is-search-open .isler-nav__search-toggle { color: var(--navy); background: rgba(11, 26, 61, 0.08); border-radius: 100px; }
}

/* Mobile: collapse links into a burger-toggled vertical panel; mega stacks. */
@media (max-width: 860px) {
  .isler-nav { min-width: calc(100vw - 24px); gap: 8px; padding: 8px 8px 8px 12px; top: 0; }

  .isler-nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(7, 17, 44, 0.95);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 10px;
    margin-left: 0;
    display: none;
    max-height: 76vh;
    overflow-y: auto;
  }
  .isler-nav.is-open .isler-nav__links { display: flex; }
  .isler-nav__links > li { width: 100%; }
  .isler-nav__links > li > a, .isler-nav__trigger { width: 100%; justify-content: space-between; color: #fff; text-shadow: none; }

  .isler-nav__burger {
    display: inline-flex; flex-direction: column; gap: 4px;
    margin-left: auto; padding: 8px; background: none; border: none; cursor: pointer;
  }
  .isler-nav__burger span { width: 22px; height: 2px; background: var(--navy); border-radius: 2px; display: block; }

  /* Mega renders inline (static) within the dark links panel, expanded when open */
  .isler-mega {
    position: static; left: auto; right: auto; width: auto; transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: none; box-shadow: none;
    display: none; margin-top: 6px; transition: none;
  }
  .isler-nav__item.is-open .isler-mega { display: block; }
  .isler-mega::before { display: none; }
  .isler-mega__inner { padding: 2px 4px 6px; }
  /* Mobile mega sits on the DARK links panel — keep labels/links/icons light.
     Not enough width for 4 headers abreast, so the strip stacks. */
  .isler-mega__tabs { grid-template-columns: 1fr; gap: 0; border-bottom: none; }
  .isler-mega__tab {
    justify-content: space-between; text-align: left;
    color: var(--yellow); padding: 14px 10px; border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .isler-mega__tab:hover { color: var(--yellow); background: rgba(255, 255, 255, 0.08); }
  .isler-mega__tab::after { display: none; }
  /* No underline on the dark panel, so the open header gets a tinted row instead */
  .isler-mega__tab.is-open { background: rgba(242, 140, 40, 0.14); }
  .isler-mega__list { grid-template-columns: 1fr; gap: 0; }
  .isler-mega__link { color: #fff; }
  .isler-mega__link:hover, .isler-mega__link:focus-visible { color: var(--yellow); background: rgba(255, 255, 255, 0.08); }
  .isler-mega__thumb { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
  .isler-mega__thumb svg { stroke: rgba(255, 255, 255, 0.9); }
  .isler-mega__link:hover .isler-mega__thumb svg { stroke: var(--yellow); }
}

/* About dropdown renders inline (always open) within the mobile links panel */
@media (max-width: 860px) {
  .isler-nav__submenu {
    position: static; transform: none; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 2px 0 4px 12px; margin: 2px 0 0; transition: none;
  }
  .isler-nav__submenu::before { display: none; }
  .isler-nav__submenu a { color: rgba(255, 255, 255, 0.85); padding: 10px 14px; }
  .isler-nav__submenu a:hover, .isler-nav__submenu a:focus-visible { color: var(--yellow); background: rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .isler-nav__chev, .isler-mega, .isler-mega__link { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Edge-to-edge navbar, SITE-WIDE — makes every page's navbar match the
   homepage: full-width rectangular bar (no floating pill), a touch shorter,
   pinned to the top with no auto-hide. Placed last so it overrides both the
   centred-pill base and the responsive min-width rules above by source order.
   (The homepage's own body.home-edgenav override already matches this.)
   ════════════════════════════════════════════════════════════════════════ */
.isler-nav {
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  /* Client 2026-08-11: brand-orange outline on the bar's top and bottom edge.
     The bar is full-bleed, so those two edges are the whole visible outline.
     This MUST be the full shorthand, not just a width: `border-top: 0` also
     reset the style to none and the colour to currentColor, which silently
     beat the orange set on .isler-nav further up and rendered a 0px charcoal
     edge instead. */
  border-top: 1.5px solid #F28C28;
  border-bottom: 1.5px solid #F28C28;
  box-shadow: 0 2px 14px rgba(30, 28, 24, 0.14);
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: max(28px, 3.2vw);
  padding-right: max(28px, 3.2vw);
}
/* Stay fixed while scrolling — neutralise the auto-hide slide-up on all pages */
.isler-nav--hidden { transform: none; }


/* ════════════════════════════════════════════════════════════════════════
   TRANSPARENT OVER THE HERO  —  homepage only (client 2026-08-10)
   The bar disappears into the hero image at the top of the page and turns
   back into the solid bar as soon as you scroll. Everything here is behind
   body.home-edgenav .isler-nav.is-top, so it cannot reach the other pages.

   NOTE the history: an earlier version of this just dropped the pill's
   opacity and the navy logo went dark and blurry against the hero. Opacity
   alone is not enough — the logo and links have to invert to white and get a
   scrim, which is what the two rules further down do.
   ════════════════════════════════════════════════════════════════════════ */
body.home-edgenav .isler-nav {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              background 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
body.home-edgenav .isler-nav.is-top {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
/* Client 2026-08-10: nothing behind the logo at all. The scrim that used to
   sit behind the bar is gone too — the bar is now genuinely nothing but its
   own text over the footage. The links keep their text-shadow, which is the
   only legibility help left. */
/* THE LOGO KEEPS ITS OWN COLOURS (client 2026-08-10: "Isler wala symbol aur
   Isler ko waise hi colour mein rehne de jaise the"). It is not a one-colour
   mark — orange factory symbol + navy wordmark — so the earlier
   brightness(0) invert(1) flattened both brand colours to white.
   The navy wordmark on a dark hero is the exact contrast problem that got
   the 2026-07-24 opacity attempt rejected, so instead of recolouring it the
   mark gets a soft light halo: colours untouched, but it separates from
   whatever is behind it. Remove this line if the client wants it bare. */
/* Client 2026-08-10: "Isler ke peeche white blur hata". The logo now sits on
   the footage completely bare — own colours, no halo, no plate. Legibility
   comes only from the bar scrim above. */
body.home-edgenav .isler-nav.is-top .isler-nav__logo img {
  filter: none;
}
body.home-edgenav .isler-nav.is-top .isler-nav__links > li > a,
body.home-edgenav .isler-nav.is-top .isler-nav__trigger {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(6, 15, 36, 0.55);
}
body.home-edgenav .isler-nav.is-top .isler-nav__links > li > a:hover,
body.home-edgenav .isler-nav.is-top .isler-nav__trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
body.home-edgenav .isler-nav.is-top .isler-nav__search-toggle,
body.home-edgenav .isler-nav.is-top .isler-nav__burger span {
  color: rgba(255, 255, 255, 0.92);
  background-color: currentColor;
}
body.home-edgenav .isler-nav.is-top .isler-nav__search-toggle { background-color: transparent; }
/* while a menu is open the bar goes solid again — a transparent bar with a
   white mega-panel hanging off it reads as two disconnected things */
body.home-edgenav .isler-nav.is-open,
body.home-edgenav .isler-nav.is-search-open { }

@media (prefers-reduced-motion: reduce) {
  body.home-edgenav .isler-nav { transition: none; }
}

/* The over-the-hero translucency for the search field is GONE (2026-08-11).
   It existed to tint the inline rectangle when the bar went transparent, but
   the field is no longer in the bar — it is a dark drop-down panel that only
   appears once you click the magnifier. These rules outranked the panel's own
   background (4 classes vs 2), so leaving them turned the open panel into a
   near-invisible translucent sheet over the hero video. */
body.home-edgenav .isler-nav.is-top .isler-nav__search-toggle--inline {
  color: rgba(255, 255, 255, 0.92);
}
body.home-edgenav .isler-nav.is-top .isler-nav__search-toggle--inline:hover {
  background: rgba(255, 255, 255, 0.12);
}