.ht-nav, .ht-nav-dialog {
    --ht-blue: #244972;
    font-family: Lato, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    text-align: left;
  }
  .ht-nav *, .ht-nav-dialog * { box-sizing: border-box; }
  .ht-nav a, .ht-nav-dialog a { color: inherit; font: inherit; text-decoration: none; }
  .ht-nav button, .ht-nav-dialog button {
    appearance: none; font: inherit; color: inherit; background: transparent;
    border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer;
    text-transform: none; letter-spacing: normal; box-shadow: none;
  }
  .ht-nav a, .ht-nav button, .ht-nav-dialog a, .ht-nav-dialog button { touch-action: manipulation; }
  .ht-nav :is(a,button):hover, .ht-nav-dialog :is(a,button):hover { opacity: .75; }
  .ht-nav :focus-visible, .ht-nav-dialog :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
  .ht-nav img, .ht-nav-dialog img { display: block; max-width: 100%; object-fit: contain; }
  .ht-nav ul, .ht-nav-dialog ul { list-style: none; padding: 0; margin: 0; }
  .ht-nav { position: relative; z-index: 1000; width: 100%; }
  .ht-nav__bar { background: #fff; box-shadow: 0 0 60px 5px rgb(0 0 0 / 9%); }
  .ht-nav__bar.is-fixed { position: fixed; top: var(--ht-nav-top, 0px); left: 0; right: 0; }
  .ht-nav__inner { width: min(1300px, calc(100% - 40px)); margin-inline: auto; }
  .ht-nav__top { background: var(--ht-blue); color: #fff; }
  .ht-nav__top .ht-nav__inner { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .ht-nav__top ul { display: flex; align-items: center; gap: 18px; font-size: 12px; }
  .ht-nav__top a { display: inline-flex; align-items: center; gap: 8px; }
  .ht-nav__desktop { display: flex; align-items: center; gap: 20px; min-height: 100px; padding-block: 15px; }
  .ht-nav__logo { flex: 0 0 13%; }
  .ht-nav__logo img { width: 129px; height: auto; filter: brightness(0); }
  .ht-nav__phone { display: flex; align-items: center; justify-content: center; gap: 20px; flex: 0 0 18%; min-height: 60px; border-inline: 1px solid #dbdbdb; }
  .ht-nav__phone img { width: 43px; height: 43px; filter: brightness(0); }
  .ht-nav__phone small { display: block; font-size: 13px; }
  .ht-nav__phone strong { font-size: 16px; font-weight: 600; white-space: nowrap; }
  .ht-nav__primary { flex: 1; }
  .ht-nav__primary ul { display: flex; justify-content: center; align-items: center; gap: 26px; }
  .ht-nav__primary :is(a,button) { display: block; padding-block: 12px; font-size: 15px; text-transform: uppercase; white-space: nowrap; }
  .ht-nav .ht-nav__icon, .ht-nav-dialog .ht-nav__icon { display: inline-flex; justify-content: center; align-items: center; width: 50px; height: 50px; flex-shrink: 0; }
  .ht-nav__svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ht-nav__top .ht-nav__svg { width: 12px; height: 12px; }
  .ht-nav__search-slot { border-inline: 1px solid #dbdbdb; padding-inline: 10px; }
  .ht-nav__mobile { display: none; }
  .ht-nav-dialog {
    padding: 0; border: 0; max-width: none; max-height: none; margin: 0;
    overscroll-behavior: contain; box-shadow: none;
  }
  .ht-nav-dialog::backdrop { background: rgb(0 0 0 / 65%); }
  /* Dölj bara den flytande rutan. Dess egna klasser, timer och sparade
     visningsregler lämnas orörda och gäller igen när sista dialogen stängs.
     Regeln fungerar även om rutan läggs till medan menyn redan är öppen. */
  html:has([data-ht-navigation] .ht-nav-dialog[open]) #hestra-newsletter-bar {
    display: none !important;
  }
  .ht-nav-dialog[open] { animation: ht-nav-appear .2s ease-out; }
  .ht-nav-dialog .ht-nav__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; }
  .ht-nav__close .ht-nav__svg { width: 22px; height: 22px; }
  .ht-nav-dialog--mobile { width: 400px; height: 100dvh; background: var(--ht-blue); color: #fff; padding: 50px 24px max(60px, env(safe-area-inset-bottom)); }
  .ht-nav-dialog__logo { width: 100px; height: auto; margin-bottom: 25px; }
  .ht-nav-dialog__links li + li { margin-top: 9px; }
  .ht-nav-dialog__links :is(a,button) { display: block; padding-block: 5px; font-size: 19px; line-height: 1.5; }
  .ht-nav-dialog__footer { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 25%); }
  .ht-nav-dialog__footer h2 { margin: 0 0 14px; font: 700 11px/1.5 Lato, Arial, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #c6d6e7; }
  .ht-nav-dialog a.ht-nav-dialog__contact { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 74px; padding: 14px 16px; border-radius: 5px; background: #fff; color: #244972; }
  .ht-nav-dialog__contact img { width: 24px; height: 24px; flex-shrink: 0; filter: brightness(0); opacity: .7; }
  .ht-nav-dialog__contact small { display: block; font-size: 11px; line-height: 1.4; }
  .ht-nav-dialog__contact strong { display: block; font-size: 21px; line-height: 1.35; font-weight: 600; white-space: nowrap; }
  .ht-nav-dialog a.ht-nav-dialog__hours { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; }
  .ht-nav-dialog__hours .ht-nav__svg { width: 16px; height: 16px; color: #c6d6e7; flex-shrink: 0; }
  .ht-nav-dialog__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .ht-nav-dialog .ht-nav-dialog__action { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 3px; font-size: 13px; line-height: 1.4; color: #fff; }
  .ht-nav-dialog__action .ht-nav__svg { width: 19px; height: 19px; flex-shrink: 0; }
  .ht-nav-dialog__social { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
  .ht-nav-dialog__social-label { margin-right: auto; font-size: 11px; }
  .ht-nav-dialog .ht-nav-dialog__social .ht-nav__icon { width: 44px; height: 44px; }
  .ht-nav-dialog__social svg { width: 20px; height: 20px; }
  .ht-nav-dialog--search { width: 100%; height: 100dvh; background: rgb(0 0 0 / 92%); color: #fff; }
  .ht-nav-dialog--search form { display: flex; align-items: center; gap: 20px; width: min(1100px, calc(100% - 48px)); margin: 40dvh auto 0; border-bottom: 1px solid #fff; }
  .ht-nav-dialog--search input { width: 100%; min-width: 0; padding: 10px 0; border: 0; border-radius: 0; color: #fff; background: transparent; font: inherit; font-size: clamp(30px, 7.8vw, 112px); box-shadow: none; }
  .ht-nav-dialog--search input::placeholder { color: #fff; opacity: .7; }
  .ht-nav-dialog--products {
    width: min(1200px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
    margin: auto; background: #fff; color: #244972; overflow-y: auto;
  }
  .ht-nav-dialog--products::backdrop { background: #000000a1; }
  .ht-products__closebar { position: sticky; top: 0; height: 0; z-index: 1; }
  .ht-nav-dialog--products .ht-nav__close { background: #fff; color: #000; border-radius: 50%; }
  .ht-products__content { padding: 80px 20px; }
  .ht-nav-dialog--products h2 { margin: 0; color: inherit; text-align: center; font: 500 40px/1.2 Barlow, Lato, Arial, sans-serif; letter-spacing: .7px; }
  .ht-products__mark { width: 64px; height: 24px; margin: 20px auto; }
  .ht-products__tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
  .ht-products__tabs [role="tab"] { padding: 15px 24px; min-height: 48px; color: #244972; background: #f1f2f3; font-size: 18px; font-weight: 600; }
  .ht-products__tabs [role="tab"]:hover, .ht-products__tabs [aria-selected="true"] { color: #fff; background: #244972; opacity: 1; }
  .ht-products__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .ht-products__grid[hidden] { display: none; }
  .ht-nav-dialog .ht-products__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 234px; padding: 10px; border: 2px solid #edf2f7; text-align: center; font-size: 16px; line-height: 1.4; }
  .ht-products__card img { width: 200px; height: 176px; object-fit: contain; }
  .ht-nav-dialog .ht-products__card:hover { border-color: #244972; opacity: 1; }
  @media (max-width: 1024px) { .ht-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 767px) {
    .ht-nav-dialog--products { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
    .ht-products__content { padding: 60px 12px 30px; }
    .ht-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ht-nav-dialog .ht-products__card { min-height: 200px; gap: 14px; padding: 8px; }
    .ht-products__card img { width: 100%; height: 130px; }
    .ht-products__tabs [role="tab"] { padding: 13px 16px; font-size: 16px; }
  }
  .ht-nav__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  @keyframes ht-nav-appear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  @media (min-width: 1025px) and (max-width: 1250px) {
    .ht-nav__desktop { gap: 12px; }
    .ht-nav__phone { gap: 10px; }
    .ht-nav__primary ul { gap: 14px; }
    .ht-nav__primary :is(a,button) { font-size: 13px; }
    .ht-nav__search-slot { padding-inline: 0; }
  }
  @media (max-width: 1024px) {
    .ht-nav__top, .ht-nav__desktop { display: none; }
    .ht-nav__mobile { display: flex; align-items: center; justify-content: space-between; min-height: 92px; }
    .ht-nav__mobile-group { display: flex; align-items: center; gap: 10px; }
    .ht-nav__mobile .ht-nav__logo img { width: 129px; max-width: none; }
    .ht-nav__mobile .ht-nav__menu-image { width: 35px; height: 35px; filter: brightness(0); }
    .ht-nav__mobile .ht-nav__login-image { width: 35px; height: 35px; filter: brightness(0); }
  }
  @media (max-width: 767px) {
    .ht-nav__inner { width: calc(100% - 30px); }
    .ht-nav__mobile .ht-nav__logo img { width: 100px; }
    .ht-nav__mobile .ht-nav__menu-image { width: 30px; height: 30px; }
    .ht-nav__mobile .ht-nav__tablet-login { display: none; }
    .ht-nav-dialog--mobile { width: 100%; }
    .ht-nav-dialog__links :is(a,button) { font-size: 18px; }
  }
  @media (prefers-reduced-motion: reduce) { .ht-nav-dialog[open] { animation: none; } }

/* Scroll lock follows every instance and restores the existing page rules. */
html:has([data-ht-navigation] .ht-nav-dialog[open]) { overflow: hidden !important; }


  /* Behåll komponentens knappfärger även när temat sätter hover/fokus. */
  .ht-nav button:is(:hover, :focus, :active),
  .ht-nav-dialog button:is(:hover, :focus, :active) {
    background: var(--ht-button-background, transparent);
    color: var(--ht-button-color, inherit);
    text-decoration: none;
  }
  .ht-products__tabs [role="tab"] {
    --ht-button-background: #f1f2f3;
    --ht-button-color: #244972;
  }
  .ht-products__tabs [role="tab"]:hover,
  .ht-products__tabs [aria-selected="true"] {
    --ht-button-background: #244972;
    --ht-button-color: #fff;
  }
  .ht-nav-dialog--products .ht-nav__close {
    --ht-button-background: #fff;
    --ht-button-color: #000;
  }