:root {
  --nytte-overlay-shadow: 0 24px 60px rgb(23 64 42 / 22%);
  --nytte-drawer-shadow: -24px 0 60px rgb(23 64 42 / 24%);
}

html.nytte-modal-open,
html.nytte-modal-open body {
  overflow: hidden;
}

.nytte-search-trigger {
  align-items: center;
  background: var(--nytte-white);
  border: 1.5px solid #d5d2c0;
  border-radius: 999px;
  color: var(--nytte-muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 0.9375rem;
  gap: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 1.125rem;
  text-align: left;
  width: 300px;
  box-sizing: border-box;
}

.nytte-search-trigger:hover,
.nytte-search-trigger:focus-visible {
  border-color: var(--nytte-forest);
  color: var(--nytte-forest);
}

/* Luppen erstatter »Søg:« i teksten: ikonet siger allerede, hvad feltet gør,
   så etiketten kan bruge sin plads på, hvad man kan søge efter. */
.nytte-search-trigger__icon {
  align-items: center;
  color: var(--nytte-muted);
  display: inline-flex;
  flex: 0 0 auto;
  margin-right: 0.55rem;
}

.nytte-search-trigger:hover .nytte-search-trigger__icon,
.nytte-search-trigger:focus-visible .nytte-search-trigger__icon {
  color: var(--nytte-leaf);
}

.nytte-search-trigger__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nytte-mega__panel {
  top: calc(100% + 18px);
  width: min(940px, calc(100vw - 48px));
}

.nytte-mega__layout {
  display: grid;
  gap: 28px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 260px;
}

.nytte-mega__main {
  min-width: 0;
}

.nytte-mega__eyebrow {
  margin-bottom: 14px;
}

.nytte-mega__panel .nytte-mega-card {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 14px;
  min-height: 0;
  padding: 12px 14px;
}

.nytte-pest-thumb {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 12px;
  display: block;
  flex: 0 0 44px;
  height: 44px;
  width: 44px;
}

.nytte-pest-thumb--spider-mites {
  background-image: url("../images/mega-menu/mega-01-spider-mites.webp");
}

.nytte-pest-thumb--fungus-gnat {
  background-image: url("../images/mega-menu/mega-02-fungus-gnat.webp");
}

.nytte-pest-thumb--thrips {
  background-image: url("../images/mega-menu/mega-03-thrips.webp");
}

.nytte-pest-thumb--whiteflies {
  background-image: url("../images/mega-menu/mega-04-whiteflies.webp");
}

.nytte-pest-thumb--aphids {
  background-image: url("../images/mega-menu/mega-05-aphids.webp");
}

.nytte-pest-thumb--slug {
  background-image: url("../images/mega-menu/mega-06-slug.webp");
}

.nytte-mega-card__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.nytte-mega-card strong,
.nytte-mega-card small {
  display: block;
}

.nytte-mega-card strong {
  color: var(--nytte-forest);
  font-size: 1rem;
  line-height: 1.25;
}

.nytte-mega-card small {
  color: var(--nytte-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.32;
  margin-top: 2px;
}

.nytte-mega-card__count {
  color: var(--nytte-leaf);
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.nytte-mega__panel .nytte-mega__all {
  align-items: center;
  display: inline-flex;
  margin-top: 16px;
  min-height: 44px;
  padding: 0;
}

.nytte-mega__advice {
  align-self: stretch;
  background: var(--nytte-pale);
  border-radius: 18px;
  color: #4a5844;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}

.nytte-mega__advice strong {
  color: var(--nytte-forest);
  font-size: 1rem;
  line-height: 1.35;
}

.nytte-mega__advice p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
}

.nytte-mega__advice a {
  align-items: center;
  align-self: stretch;
  background: var(--nytte-forest);
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--nytte-white);
  display: flex;
  font-size: 0.875rem;
  justify-content: center;
  margin-top: auto;
  min-height: 44px;
  padding: 13px;
  text-align: center;
  width: 100%;
}

.nytte-mega__advice a:hover {
  background: #0f3320;
  color: var(--nytte-white);
}

.nytte-mobile-nav__view[hidden] {
  display: none;
}

.nytte-mobile-nav__search,
.nytte-mobile-nav__submenu,
.nytte-mobile-nav__back {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--nytte-forest);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 750;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.75rem;
  text-align: left;
  width: 100%;
}

.nytte-mobile-nav__search {
  background: var(--nytte-cream);
  border: 1.5px solid var(--nytte-border);
  margin-bottom: 0.45rem;
}

/* CH-168: soegerækken havde et naesten usynligt ⌕-tegn til venstre og en
   pil til hoejre som undermenu-raekkerne. Ejeren bad om ét tydeligt
   soegeikon til hoejre i pilens plads og stoerrelse. Tegnet er skiftet til
   en SVG-lup i currentColor, saa den foelger tekstfarven, og 1.25em, saa
   den skalerer med raekkens skrift som pilen goer. */
.nytte-mobile-nav__search-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.nytte-mobile-nav__search-icon svg {
  display: block;
  height: 1.25em;
  width: 1.25em;
}

.nytte-mobile-nav__submenu:hover,
.nytte-mobile-nav__submenu:focus-visible,
.nytte-mobile-nav__back:hover,
.nytte-mobile-nav__back:focus-visible {
  background: var(--nytte-pale);
}

.nytte-mobile-nav__back {
  justify-content: flex-start;
  margin-bottom: 0.25rem;
}

.nytte-mobile-nav__pest-link {
  align-items: center;
  display: grid !important;
  gap: 0.7rem;
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.nytte-mobile-nav__pest-link .nytte-pest-thumb {
  border-radius: 10px;
  flex-basis: 38px;
  height: 38px;
  width: 38px;
}

.nytte-mobile-nav__pest-link strong,
.nytte-mobile-nav__pest-link small {
  display: block;
}

.nytte-mobile-nav__pest-link small {
  color: var(--nytte-muted);
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.nytte-mobile-nav__help {
  background: var(--nytte-forest);
  border-radius: 14px;
  color: #bfd8c4;
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
}

.nytte-mobile-nav__help strong {
  color: var(--nytte-white);
  display: block;
}

.nytte-mobile-nav__help a {
  color: var(--nytte-white);
  display: inline-block;
  min-height: auto;
  padding: 0.4rem 0 0;
  text-decoration: underline;
}

.nytte-search-overlay[hidden] {
  display: none;
}

.nytte-search-overlay {
  align-items: flex-start;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: fixed;
  /* Admin-bjælken ligger på z-index 99999 og kan ikke overtrumfes; overlayet
     starter derfor under den, når den er til stede. */
  top: var(--nytte-admin-bar, 0px);
  visibility: hidden;
  z-index: 120;
}

.nytte-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nytte-search-overlay__backdrop {
  background: rgb(23 64 42 / 48%);
  border: 0;
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.nytte-search-overlay__dialog {
  background: var(--nytte-cream);
  border-bottom: 1px solid var(--nytte-border);
  box-shadow: var(--nytte-overlay-shadow);
  box-sizing: border-box;
  max-height: min(760px, 100dvh);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.nytte-search-overlay__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  max-height: min(760px, 100dvh);
  max-width: 940px;
  padding: 1.75rem 1.5rem 2rem;
}

.nytte-search-overlay__form {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin: 0;
}

.nytte-search-overlay__field {
  align-items: center;
  background: var(--nytte-white);
  border: 2px solid var(--nytte-forest);
  border-radius: 999px;
  display: flex;
  flex: 1;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.25rem 0.35rem 0.25rem 1.25rem;
}

.nytte-search-overlay__field > span {
  color: var(--nytte-muted);
  font-size: 1.15rem;
}

.nytte-search-overlay__field input {
  background: transparent;
  border: 0;
  color: var(--nytte-forest);
  flex: 1;
  font: inherit;
  font-size: 1.12rem;
  min-height: 52px;
  min-width: 0;
  outline: 0;
  padding: 0;
}

.nytte-search-overlay__field:has(input:focus-visible) {
  border-color: var(--wp--preset--color--leaf);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--leaf);
  outline: 0;
}

.nytte-search-overlay__field input:focus-visible {
  box-shadow: none;
}

.nytte-search-overlay__field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.nytte-search-overlay__clear {
  background: var(--nytte-pale);
  border: 0;
  border-radius: 999px;
  color: var(--nytte-forest);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  min-height: 44px;
  padding: 0.65rem 1rem;
}

.nytte-search-overlay__close {
  align-items: center;
  background: var(--nytte-white);
  border: 1.5px solid #d5d2c0;
  border-radius: 50%;
  color: var(--nytte-forest);
  cursor: pointer;
  display: flex;
  flex: 0 0 56px;
  font: inherit;
  font-size: 1.65rem;
  height: 56px;
  justify-content: center;
  line-height: 1;
  width: 56px;
}

.nytte-search-overlay__close:hover,
.nytte-search-overlay__close:focus-visible {
  background: var(--nytte-forest);
  border-color: var(--nytte-forest);
  color: var(--nytte-white);
}

.nytte-search-overlay__suggestions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.nytte-search-overlay__suggestions > span {
  color: var(--nytte-muted);
  font-size: 0.875rem;
  margin-right: 0.2rem;
}

.nytte-search-overlay__suggestions button {
  background: var(--nytte-white);
  border: 1.5px solid #d5d2c0;
  border-radius: 999px;
  color: var(--nytte-forest);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  min-height: 40px;
  padding: 0.55rem 0.9rem;
}

.nytte-search-overlay__suggestions button:hover,
.nytte-search-overlay__suggestions button:focus-visible {
  background: var(--nytte-pale);
  border-color: var(--nytte-leaf);
}

.nytte-search-overlay__results {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.nytte-search-overlay__prompt,
.nytte-search-overlay__error {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 16px;
  color: var(--nytte-muted);
  margin: 0;
  padding: 1.25rem;
}

.nytte-search-overlay__loading {
  align-items: center;
  color: var(--nytte-muted);
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem;
}

.nytte-search-overlay__loading p {
  margin: 0;
}

.nytte-search-spinner {
  animation: nytte-search-spin 700ms linear infinite;
  border: 3px solid var(--nytte-pale);
  border-radius: 50%;
  border-top-color: var(--nytte-forest);
  height: 22px;
  width: 22px;
}

@keyframes nytte-search-spin {
  to {
    transform: rotate(360deg);
  }
}

.nytte-search-group {
  display: grid;
  gap: 0.55rem;
}

.nytte-search-group h3 {
  align-items: center;
  color: var(--nytte-muted);
  display: flex;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  justify-content: space-between;
  letter-spacing: 0.07em;
  margin: 0;
  text-transform: uppercase;
}

.nytte-search-group h3 span {
  background: var(--nytte-pale);
  border-radius: 999px;
  color: var(--nytte-forest);
  padding: 0.2rem 0.55rem;
}

.nytte-search-group__list {
  display: grid;
  gap: 0.5rem;
}

.nytte-search-hit {
  align-items: center;
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border);
  border-radius: 14px;
  color: var(--nytte-forest);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 64px;
  min-width: 0;
  overflow: hidden;
  padding: 0.65rem 0.8rem;
}

.nytte-search-hit:hover,
.nytte-search-hit:focus-visible {
  border-color: var(--nytte-leaf);
  box-shadow: 0 8px 20px rgb(23 64 42 / 8%);
  text-decoration: none;
}

.nytte-search-hit img,
.nytte-search-hit__icon {
  background: var(--nytte-pale);
  border-radius: 10px;
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.nytte-search-hit__icon {
  align-items: center;
  display: flex;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  justify-content: center;
}

.nytte-search-hit--pest img {
  border-radius: 11px;
  height: 38px;
  margin: 5px;
  object-fit: cover;
  width: 38px;
}

.nytte-search-hit__body,
.nytte-search-hit__body strong,
.nytte-search-hit__body small {
  display: block;
  min-width: 0;
}

.nytte-search-hit__body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nytte-search-hit__kind {
  color: var(--nytte-action);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nytte-search-hit__note,
.nytte-search-hit__meta small {
  color: var(--nytte-muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.nytte-search-hit__meta {
  max-width: 16rem;
  min-width: 0;
  text-align: right;
}

.nytte-search-hit__meta strong,
.nytte-search-hit__meta small {
  display: block;
}

.nytte-search-hit__meta strong {
  line-height: 1.25;
  white-space: normal;
}

.nytte-search-hit__meta small {
  white-space: nowrap;
}

.nytte-search-overlay__footer {
  align-items: center;
  border-top: 1px solid var(--nytte-border);
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.nytte-search-overlay__all {
  color: var(--nytte-forest);
  font-weight: 800;
  min-height: 44px;
  padding: 0.65rem 0;
}

.nytte-search-overlay__empty {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 18px;
  padding: 1.5rem;
}

.nytte-search-overlay__empty h3 {
  margin: 0.8rem 0 0.45rem;
}

.nytte-search-overlay__empty > p:not(.nytte-kicker) {
  color: var(--nytte-muted);
  margin: 0;
}

.nytte-search-overlay__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.nytte-search-results.is-loading .nytte-search-layout {
  opacity: 0.45;
}

@media (max-width: 1080px) {
  .nytte-mega__panel {
    width: min(760px, calc(100vw - 32px));
  }

  .nytte-mega__layout {
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) 210px;
  }
}

@media (max-width: 860px) {
  .nytte-mobile-nav__panel {
    border: 0;
    border-radius: 0;
    box-shadow: var(--nytte-overlay-shadow);
    box-sizing: border-box;
    display: block;
    left: 0;
    /* Hoejden maales mod vinduet, mens `top` maales mod panelets containing
       block (se site.js). De to tal er kun ens, naar der ikke er en
       kampagnebjaelke over headeren. */
    max-height: calc(100dvh - var(--nytte-mobile-menu-viewport-top, 120px));
    overflow-y: auto;
    padding: 1rem;
    position: fixed;
    right: 0;
    top: var(--nytte-mobile-menu-top, 120px);
    width: 100%;
  }

  .nytte-mobile-nav__view {
    margin-inline: auto;
    max-width: 560px;
  }

  .nytte-mobile-nav__panel a {
    min-height: 48px;
  }
}

@media (max-width: 640px) {
  .nytte-search-overlay__inner {
    max-height: 100dvh;
    padding: 1rem;
  }

  .nytte-search-overlay__dialog {
    height: 100dvh;
    max-height: 100dvh;
  }

  .nytte-search-overlay__form {
    gap: 0.55rem;
  }

  .nytte-search-overlay__field {
    padding-left: 0.9rem;
  }

  .nytte-search-overlay__field input {
    font-size: 1rem;
  }

  .nytte-search-overlay__clear {
    min-width: auto;
    overflow: visible;
    padding: 0.65rem 0.8rem;
    text-indent: 0;
    width: auto;
  }

  .nytte-search-overlay__clear::after {
    content: none;
  }

  .nytte-search-overlay__close {
    flex-basis: 56px;
    height: 56px;
    width: 56px;
  }

  .nytte-search-overlay__suggestions {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    overflow-x: auto;
    padding-inline: 1rem;
    scrollbar-width: none;
  }

  .nytte-search-overlay__suggestions::-webkit-scrollbar {
    display: none;
  }

  .nytte-search-overlay__suggestions button {
    flex: 0 0 auto;
  }

  .nytte-search-overlay__results {
    margin-right: -0.4rem;
    padding-right: 0.4rem;
  }

  .nytte-search-hit {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .nytte-search-hit__meta,
  .nytte-search-hit__arrow {
    grid-column: 2;
    max-width: 100%;
    text-align: left;
  }

  .nytte-search-hit__meta strong,
  .nytte-search-hit__meta small {
    display: inline;
    white-space: normal;
  }

  .nytte-search-hit__meta small::before {
    content: " · ";
  }

  .nytte-search-overlay__empty-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Lagerstatus i søgeresultatets meta-række står side om side med prisen. */
.nytte-search-product__meta .nytte-stock {
  margin: 0;
}

/* ── Headerrækken i det smalle desktopbånd (861-1000 px) ──────────────────
   Søgefeltet har en fast width: 300px, og min-width: auto på flex-elementet
   gør den ushrinkbar. Værktøjsrækken målte derfor 368 px inde i en 707 px bred
   .nytte-header-main og stak 36 px ud over layoutbredden ved 900 px — vandret
   sidescroll på hver side. Under 861 px er hele værktøjsrækken skjult, og over
   1000 px er der 61 px luft, så båndet imellem er det eneste ramte.
   Feltet kollapser til ikonet, præcis som den sammenklappede header gør.
   min-width: 0 er sikkerhedsnettet: uden det kan et flex-element ikke krympe
   under sit indhold, uanset hvad width siger. */
@media (max-width: 1000px) {
  .nytte-header-main,
  .nytte-header-tools,
  .nytte-desktop-nav {
    min-width: 0;
  }

  .nytte-search-trigger {
    padding-inline: 0.75rem;
    width: auto;
  }

  .nytte-search-trigger__label {
    display: none;
  }
}