/* ==========================================================================
   Header – Novadecor
   Desktop header: logo, zoekveld, account, winkelwagen
   ========================================================================== */

:root {
  --primary: #171717;
  --primary-600: #0a0a0a;
  --accent: #a87b4b;
  --accent-600: #8c6a3e;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-400: #a3a3a3;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
}

/* --- Header root --- */
.header-main {
  background-color: #fff;
}

.header-main.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-main.w-full {
  width: 100%;
}

.header-main.z-50 {
  z-index: 50;
}

.header-main.transition-shadow {
  transition: box-shadow 0.2s ease;
}

.header-main.duration-200 {
  transition-duration: 200ms;
}

.header-main.bg-white {
  background-color: #fff;
}

.header-main.border-b,
.header-main .border-b {
  border-bottom-width: 1px;
}

.header-main.border-neutral-100,
.header-main .border-neutral-100 {
  border-color: var(--neutral-100);
}

.header-main.is-scrolled {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* --- Winkelwagenbadge (aantal) – rechtsboven op icoon, bedekt icoon niet --- */
.header-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.1875rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--accent);
  border-radius: 9999px;
  border: 1.5px solid #fff;
  box-sizing: border-box;
  pointer-events: none;
}

.header-cart-count:not([data-count]),
.header-cart-count[data-count="0"] {
  display: none;
}

/* --- Container --- */
.header-main .container-custom {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.header-main .px-0 {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 640px) {
  .header-main .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .header-main .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* --- Row --- */
.header-main .flex {
  display: flex;
}

.header-main .items-center {
  align-items: center;
}

.header-main .justify-between {
  justify-content: space-between;
}

.header-main .justify-end {
  justify-content: flex-end;
}

.header-main .h-24 {
  height: 6rem; /* 96px */
}

.header-main .gap-8 {
  gap: 2rem;
}

.header-main .gap-2 {
  gap: 0.5rem;
}

.header-main .gap-2\.5 {
  gap: 0.625rem;
}

/* --- Logo --- */
.header-main .flex-shrink-0 {
  flex-shrink: 0;
}

.header-main .max-w-\[200px\] {
  max-width: 200px;
}

.header-main .min-w-0 {
  min-width: 0;
}

.header-main .inline-flex {
  display: inline-flex;
}

.header-main .focus-visible\:outline-2:focus-visible,
.header-main .focus-visible\:outline-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.header-main .header-logo-img,
.header-main .h-14 {
  height: 3.5rem; /* 56px */
}

.header-main .w-auto {
  width: auto;
}

.header-main .max-w-full {
  max-width: 100%;
}

.header-main .object-contain {
  object-fit: contain;
}

.header-main .object-left {
  object-position: left;
}

/* --- Search wrap --- */
.header-main .flex-1 {
  flex: 1 1 0%;
}

.header-main .max-w-2xl {
  max-width: 42rem;
}

.header-main .w-full {
  width: 100%;
}

.header-main .relative {
  position: relative;
}

.header-main .absolute {
  position: absolute;
}

.header-main .left-5 {
  left: 1.25rem;
}

.header-main .right-1\.5 {
  right: 0.375rem;
}

.header-main .pointer-events-none {
  pointer-events: none;
}

.header-main .rounded-full {
  border-radius: 9999px;
}

.header-main .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.header-main .h-5 {
  height: 1.25rem;
}

.header-main .w-5 {
  width: 1.25rem;
}

.header-main .text-neutral-400 {
  color: var(--neutral-400);
}

/* Search input – utility classes (elders gebruikt) */
.header-main .h-12 {
  height: 3rem;
}

.header-main .pl-14 {
  padding-left: 3.5rem;
}

.header-main .pr-28 {
  padding-right: 7rem;
}

.header-main .bg-neutral-50 {
  background-color: var(--neutral-50);
}

.header-main .border {
  border-width: 1px;
}

.header-main .border-neutral-200 {
  border-color: var(--neutral-200);
}

.header-main .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.header-main .placeholder\:text-neutral-400::placeholder {
  color: var(--neutral-400);
}

.header-main .focus\:outline-none:focus {
  outline: none;
}

.header-main .focus\:bg-white:focus {
  background-color: #fff;
}

.header-main .focus\:border-primary\/30:focus {
  border-color: rgba(23, 23, 23, 0.3);
}

.header-main .h-9 {
  height: 2.25rem;
}

/* ==========================================================================
   Header zoekbalk (desktop) – één geheel, geen glitches
   ========================================================================== */
.header-main .header-search-inner {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 3rem;
  min-height: 3rem;
  border-radius: 9999px;
  border: 1px solid var(--neutral-200);
  background-color: var(--neutral-50);
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.header-main .header-search-inner:focus-within {
  border-color: rgba(23, 23, 23, 0.35);
  background-color: #fff;
}

.header-main .header-search-inner .header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 3rem;
  padding: 0 8rem 0 3.5rem;
  border: none;
  background: transparent;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--primary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.header-main .header-search-inner .header-search-input::placeholder {
  color: var(--neutral-400);
}

/* Geen browser-default zoekknoppen (cancel, etc.) */
.header-main .header-search-inner .header-search-input::-webkit-search-decoration,
.header-main .header-search-inner .header-search-input::-webkit-search-cancel-button,
.header-main .header-search-inner .header-search-input::-webkit-search-results-button,
.header-main .header-search-inner .header-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Zoekicoon in de bar */
.header-main .header-search-inner > .absolute.left-5 {
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}

.header-main .header-search-inner .lucide-search {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--neutral-400);
}

/* Zoeken-knop in de bar */
.header-main .header-search-inner .header-search-btn {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0 1.25rem;
  border: none;
  border-radius: 9999px;
  background-color: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-sizing: border-box;
}

.header-main .header-search-inner .header-search-btn:hover {
  background-color: var(--accent-600);
}

.header-main .header-search-inner .header-search-btn:active {
  transform: translateY(-50%) scale(0.98);
}

.header-main .header-search-inner .header-search-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Desktop zoekdropdown: balk onder de zoekbalk (zoals mobiel) */
.header-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 60;
}

.header-search-dropdown[hidden] {
  display: none !important;
}

.header-search-dropdown-result-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--neutral-800);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--neutral-50);
  transition: background-color 0.15s;
}

.header-search-dropdown-result-item:hover,
.header-search-dropdown-result-item:focus-visible {
  background-color: var(--neutral-50);
  color: var(--neutral-900);
}

.header-search-dropdown-result-item:last-child {
  border-bottom: none;
}

.header-search-dropdown-result-item img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.header-search-dropdown-result-item .header-search-dropdown-result-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-search-dropdown-result-item .header-search-dropdown-result-prices {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.header-search-dropdown-result-item .price-compare {
  font-size: 0.75rem;
  color: var(--neutral-400);
  text-decoration: line-through;
}

.header-search-dropdown-result-item .price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #dc2626;
}

.header-search-dropdown-loading,
.header-search-dropdown-empty {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--neutral-500);
}

.header-search-dropdown-view-all {
  display: block;
  text-align: center;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0.75rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--neutral-200);
  border-radius: 9999px;
  background: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}

.header-search-dropdown-view-all:hover,
.header-search-dropdown-view-all:focus-visible {
  background-color: var(--neutral-50);
  border-color: var(--primary);
}

.header-main .px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.header-main .bg-primary {
  background-color: var(--primary);
}

.header-main .text-white {
  color: #fff;
}

.header-main .font-medium {
  font-weight: 500;
}

.header-main .hover\:bg-primary-600:hover {
  background-color: var(--primary-600);
}

.header-main .active\:scale-\[0\.98\]:active {
  transform: scale(0.98);
}

/* --- Actions (account, cart) --- */
.header-main .w-64 {
  width: 16rem;
}

.header-main .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.header-main .py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.header-main .text-neutral-600 {
  color: var(--neutral-600);
}

.header-main .hover\:text-primary:hover {
  color: var(--primary);
}

.header-main .hover\:bg-neutral-50:hover {
  background-color: var(--neutral-50);
}

.header-main .group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Cart link */
.header-main .bg-neutral-100 {
  background-color: var(--neutral-100);
}

.header-main .text-neutral-700 {
  color: var(--neutral-700);
}

.header-main .hover\:bg-primary:hover {
  background-color: var(--primary);
}

/* Mobiele header: uitlijning en hoogte */
.header-mobile .container-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 4rem;
  min-height: 4rem;
}

.header-mobile .container-custom > div {
  display: flex;
  align-items: center;
}

.header-mobile .container-custom > div:first-child {
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.header-mobile .container-custom > div:last-child {
  gap: 0.5rem;
  flex-shrink: 0;
}

.header-mobile-logo-link {
  display: flex;
  align-items: center;
  height: 2.5rem;
  min-width: 0;
}

.header-mobile-logo-link img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

@media (max-width: 360px) {
  .header-mobile-logo-link {
    max-width: 110px;
  }
}

/* Mobiele header: zoekknop – vaste grootte, centrering, hover/focus */
.header-mobile .header-search-btn-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.header-mobile .header-search-btn-mobile:hover {
  background-color: var(--accent);
  color: #fff;
}

.header-mobile .header-search-btn-mobile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-mobile .header-search-btn-mobile svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Mobiele header: menuknop –zelfde layout als zoekknop (geen rand) */
.header-mobile .header-mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  box-shadow: none;
}

.header-mobile .header-mobile-menu-toggle:hover {
  background-color: var(--accent);
  color: #fff;
}

.header-mobile .header-mobile-menu-toggle:focus,
.header-mobile .header-mobile-menu-toggle:focus-visible {
  outline: none;
}

.header-mobile .header-mobile-menu-toggle:active,
.header-mobile .header-mobile-menu-toggle.is-active {
  transform: scale(0.96);
}

.header-mobile .header-mobile-menu-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Mobiele header: knoppen (menu, zoeken, account, winkelwagen) krijgen accentkleur bij hover */
.header-mobile .hover\:bg-primary:hover {
  background-color: var(--accent);
}

.header-mobile .focus-visible\:outline-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile search dropdown: klapt uit onder de header */
.mobile-search-dropdown {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
  background-color: #fff;
  border-top: 1px solid transparent;
}

.mobile-search-dropdown.is-open {
  max-height: 3.25rem;
  border-top-color: var(--neutral-100);
}

.mobile-search-dropdown.is-open.has-results {
  max-height: 70vh;
}

.mobile-search-dropdown[hidden] {
  display: block !important;
}

.mobile-search-dropdown[hidden]:not(.is-open) {
  max-height: 0;
  visibility: hidden;
}

.mobile-search-dropdown-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.5rem;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

.mobile-search-dropdown-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.mobile-search-dropdown-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.mobile-search-dropdown-icon {
  position: absolute;
  left: 0.625rem;
  width: 1rem;
  height: 1rem;
  color: var(--neutral-400);
  pointer-events: none;
}

.mobile-search-dropdown-input {
  width: 100%;
  height: 2rem;
  padding: 0 0.5rem 0 1.75rem;
  border: 1px solid var(--neutral-200);
  border-radius: 9999px;
  font-size: 16px; /* Voorkomt iOS auto-zoom bij focus op mobiel */
  background-color: var(--neutral-50);
  color: var(--neutral-800);
  transition: border-color 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

/* Verberg blauwe x (clear-knop) in zoekveld op mobiel */
.mobile-search-dropdown-input::-webkit-search-cancel-button,
.mobile-search-dropdown-input::-webkit-search-decoration,
.mobile-search-dropdown-input::-webkit-search-results-button,
.mobile-search-dropdown-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.mobile-search-dropdown-input::placeholder {
  color: var(--neutral-400);
}

.mobile-search-dropdown-input:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #fff;
}

.mobile-search-dropdown-submit {
  flex-shrink: 0;
  height: 2rem;
  padding: 0 0.625rem;
  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-search-dropdown-submit:hover {
  background-color: var(--primary-600);
}

.mobile-search-dropdown-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--neutral-500);
  cursor: pointer;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-search-dropdown-close:hover {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
}

.mobile-search-dropdown-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Zoekresultaten: onder elkaar, scrollbaar */
.mobile-search-dropdown-results {
  border-top: 1px solid var(--neutral-100);
  max-height: calc(70vh - 3.25rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-search-dropdown-results:empty {
  display: none;
}

.mobile-search-dropdown-result-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
  text-decoration: none;
  color: var(--neutral-800);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--neutral-50);
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-search-dropdown-result-item:hover,
.mobile-search-dropdown-result-item:focus-visible {
  background-color: var(--neutral-50);
  color: var(--neutral-900);
}

.mobile-search-dropdown-result-item:last-child {
  border-bottom: none;
}

.mobile-search-dropdown-result-item img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.mobile-search-dropdown-result-item .mobile-search-dropdown-result-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-search-dropdown-result-item .mobile-search-dropdown-result-prices {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.mobile-search-dropdown-result-item .price-compare {
  font-size: 0.6875rem;
  color: var(--neutral-400);
  text-decoration: line-through;
}

.mobile-search-dropdown-result-item .price {
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc2626;
}

.mobile-search-dropdown-results-loading,
.mobile-search-dropdown-results-empty {
  padding: 0.625rem 0.75rem;
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
  font-size: 0.8125rem;
  color: var(--neutral-500);
  border-top: 1px solid var(--neutral-100);
}

.mobile-search-dropdown-view-all {
  display: block;
  text-align: center;
  padding: 0.5rem 0.75rem;
  margin: 0 0.75rem 0.5rem;
  margin-left: max(0.75rem, env(safe-area-inset-left));
  margin-right: max(0.75rem, env(safe-area-inset-right));
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--neutral-200);
  border-radius: 9999px;
  background: #fff;
  transition: background-color 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-search-dropdown-view-all:hover,
.mobile-search-dropdown-view-all:focus-visible {
  background-color: var(--neutral-50);
  border-color: var(--primary);
}

.header-main .hover\:text-white:hover {
  color: #fff;
}

.header-main .w-10 {
  width: 2.5rem;
}

.header-main .h-10 {
  height: 2.5rem;
}

.header-main .justify-center {
  justify-content: center;
}

@media (min-width: 1024px) {
  .header-main .lg\:w-auto {
    width: auto;
  }

  .header-main .lg\:h-auto {
    height: auto;
  }

  .header-main .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .header-main .lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .header-main .lg\:hover\:bg-neutral-50:hover {
    background-color: var(--neutral-50);
  }

  .header-main .lg\:hover\:text-primary:hover {
    color: var(--primary);
  }

  .header-main .hidden.lg\:block {
    display: block;
  }
}

.header-main .hidden {
  display: none;
}

@media (min-width: 640px) {
  .header-main .sm\:block {
    display: block;
  }
}

/* sm:hidden = verbergen vanaf 640px (tablet/desktop); op mobiel zichtbaar */
@media (min-width: 640px) {
  .header-main .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .header-main .lg\:block {
    display: block;
  }
}

/* lg:hidden = verbergen vanaf 1024px (desktop); op mobiel gewoon zichtbaar */
@media (min-width: 1024px) {
  .header-main .lg\:hidden {
    display: none !important;
  }
}

/* Links: geen onderstreping */
.header-main a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Announcement Bar
   ========================================================================== */
.announcement {
  position: relative;
  overflow: hidden;
}

.announcement.bg-gradient-to-r {
  background: linear-gradient(to right, var(--neutral-900), var(--neutral-800), var(--neutral-900));
}

.announcement .absolute {
  position: absolute;
}

.announcement .inset-0 {
  inset: 0;
}

.announcement-shimmer {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

.announcement .h-11 {
  height: 2.75rem;
}

.announcement .h-10 {
  height: 2.5rem;
}

.announcement .gap-6 {
  gap: 1.5rem;
}

.announcement .text-neutral-300 {
  color: #d4d4d4;
}

.announcement .text-primary {
  color: var(--accent);
}

.announcement .font-semibold {
  font-weight: 600;
}

.announcement .text-white {
  color: #fff;
}

.announcement .w-px {
  width: 1px;
}

.announcement .h-4 {
  height: 1rem;
}

.announcement .bg-neutral-700 {
  background-color: var(--neutral-700);
}

.announcement .animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  50% { opacity: 0.7; }
}

.announcement .tracking-wide {
  letter-spacing: 0.025em;
}

.announcement .group:hover .group-hover\:text-primary {
  color: var(--accent);
}

.announcement a {
  text-decoration: none;
  color: inherit;
}

.announcement-mobile .w-px {
  width: 1px;
  min-width: 1px;
  background-color: rgba(255, 255, 255, 0.35);
}

.announcement-mobile .h-4 {
  height: 1rem;
}

.announcement-mobile .announcement-mobile-text {
  white-space: nowrap;
}

/* Op kleine schermen: korte linktekst om overflow te voorkomen */
.announcement-mobile .announcement-mobile-link-long {
  display: none;
}

.announcement-mobile .announcement-mobile-link-short {
  display: inline;
}

@media (min-width: 420px) {
  .announcement-mobile .announcement-mobile-link-long {
    display: inline;
  }

  .announcement-mobile .announcement-mobile-link-short {
    display: none;
  }
}

/* ==========================================================================
   Desktop Navigation Bar
   ========================================================================== */
.nav-bar {
  background-color: var(--accent);
}

.nav-bar.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.header-main.is-scrolled .nav-bar {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.nav-bar .container-custom {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  background-color: var(--accent);
}

@media (min-width: 640px) {
  .nav-bar .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .nav-bar .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.nav-bar .flex {
  display: flex;
  width: 100%;
}

.nav-bar .items-stretch {
  align-items: stretch;
}

.nav-bar .justify-start {
  justify-content: flex-start;
}

.nav-bar .nav-list {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  width: 100%;
  max-width: 100%;
}

.nav-bar .nav-list li {
  display: flex;
  align-items: stretch;
}

.nav-bar .nav-list li + li .nav-link {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-bar .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.nav-bar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.nav-bar .nav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Chevron bij items met dropdown */
.nav-link--has-dropdown {
  gap: 0.25rem;
}
.nav-link-chevron {
  flex-shrink: 0;
  opacity: 0.9;
  transition: transform 0.2s;
}
.nav-list-item--has-dropdown:hover .nav-link-chevron,
.nav-list-item--has-dropdown.is-open .nav-link-chevron {
  transform: rotate(180deg);
}

/* Dropdown container */
.nav-list-item--has-dropdown {
  position: relative;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  padding-top: 0.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s;
  z-index: 100;
  pointer-events: none;
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}
.nav-list-item--has-dropdown:hover .nav-dropdown,
.nav-list-item--has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-inner {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--neutral-200);
  padding: 0.375rem 0;
  overflow: hidden;
}
.nav-dropdown-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--neutral-800);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
  background-color: var(--neutral-50);
  color: var(--accent);
}
.nav-dropdown-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.nav-dropdown-link--parent {
  font-weight: 600;
  color: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-200);
  margin-bottom: 0.25rem;
  padding-bottom: 0.625rem;
}

.header-main .flex-shrink {
  flex-shrink: 1;
}

.header-main .gap-3 {
  gap: 0.75rem;
}

.header-main .items-stretch {
  align-items: stretch;
}

/* ==========================================================================
   Search Modal
   ========================================================================== */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

.search-modal.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.search-modal.is-open[hidden] {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

.search-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.search-modal-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.5rem 2rem;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.search-modal.is-open .search-modal-panel {
  transform: translateY(0);
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 36rem;
  margin: 0 auto;
}

.search-modal-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-modal-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.search-modal-icon {
  position: absolute;
  left: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--neutral-400);
  pointer-events: none;
}

.search-modal-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--neutral-200);
  border-radius: 9999px;
  font-size: 1rem;
  background-color: var(--neutral-50);
  transition: border-color 0.2s, background-color 0.2s;
}

.search-modal-input:focus {
  outline: none;
  border-color: var(--primary);
  background-color: #fff;
}

.search-modal-submit {
  flex-shrink: 0;
  height: 2.75rem;
  padding: 0 1.25rem;
  background-color: var(--primary);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-modal-submit:hover {
  background-color: var(--primary-600);
}

.search-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--neutral-700);
  cursor: pointer;
  border-radius: 9999px;
  flex-shrink: 0;
  transition: background-color 0.2s, color 0.2s;
}

.search-modal-close:hover {
  background-color: var(--neutral-100);
  color: var(--primary);
}

.search-modal-close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Mobile menu (telefoonmenu)
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
  display: block;
}

.mobile-menu[hidden] {
  display: block !important;
}

.mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 180ms ease;
}

.mobile-menu.is-open .mobile-menu-backdrop {
  opacity: 1;
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  max-width: 100%;
  background-color: #fff;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
  transform: translateX(-100%);
  transition: transform 180ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  background-color: #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.mobile-menu-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  border-radius: 9999px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mobile-menu-close:hover {
  background-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.mobile-menu-close:active {
  transform: scale(0.95);
}

.mobile-menu-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mobile-menu-close svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.mobile-menu-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-list > li {
  border-bottom: 1px solid var(--neutral-200);
}

.mobile-menu-list > li:last-child {
  border-bottom: none;
}

.mobile-menu-item {
  display: block;
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  color: var(--neutral-800);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-link-img {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 0.25rem;
  background-color: var(--neutral-100);
}

.mobile-menu-link-text {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  background-color: var(--neutral-50);
  color: var(--primary);
}

.mobile-menu-loading {
  padding: 0.75rem 1.25rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  font-size: 0.875rem;
  color: var(--neutral-500);
}

/* Telefoonmenu: submenu via <details>/<summary> (hele rij is summary, submenu eronder) */

.mobile-menu-details {
  display: block;
  width: 100%;
}

.mobile-menu-parent-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.mobile-menu-parent-row::-webkit-details-marker,
.mobile-menu-parent-row::marker {
  display: none;
}

.mobile-menu-item--has-sub .mobile-menu-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
  cursor: pointer;
}

.mobile-menu-sub-chevron-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
  color: var(--neutral-600);
  border-radius: 0.25rem;
  transition: color 0.15s ease, background-color 0.15s ease;
  margin-right: 0.25rem;
  pointer-events: none;
}

.mobile-menu-details[open] .mobile-menu-sub-chevron-wrap {
  color: var(--primary);
}

.mobile-menu-details[open] .mobile-menu-sub-chevron {
  transform: rotate(90deg);
}

.mobile-menu-sub-chevron {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.18s ease;
}

.mobile-menu-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
  background-color: #faf7f4;
}

.mobile-menu-details[open] .mobile-menu-sub {
  max-height: 28rem;
  border-bottom: 1px solid var(--neutral-200);
}

.mobile-menu-sublist {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0.5rem 0;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  border-left: 2px solid var(--neutral-200);
  margin-left: 0;
}

.mobile-menu-sublist li {
  margin: 0;
  margin-left: calc(-1 * max(1.25rem, env(safe-area-inset-left)));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--neutral-200);
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.mobile-menu-sublist li:last-child {
  border-bottom: none;
}

.mobile-menu-sublink {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem 0.625rem 0;
  padding-left: 0;
  color: var(--neutral-700);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  border-left: 2px solid transparent;
  margin-left: -2px;
  width: 100%;
  box-sizing: border-box;
}

.mobile-menu-sublink-img {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: cover;
  border-radius: 0.2rem;
  background-color: var(--neutral-100);
}

.mobile-menu-sublink-text {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-menu-sublink:hover,
.mobile-menu-sublink:focus-visible {
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Menuknop: tap-feedback (fallback buiten .header-mobile) */
.header-mobile-menu-toggle:active,
.header-mobile-menu-toggle.is-active {
  transform: scale(0.96);
}

/* --- Mobile: compact layout --- */
@media (max-width: 767px) {
  .header-main .header-row {
    flex-wrap: wrap;
    gap: 0.75rem;
    height: auto;
    min-height: 4rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .header-main .header-logo-wrap {
    max-width: 140px;
  }

  .header-main .header-logo-img {
    height: 2.5rem;
  }

  .header-main .header-search-wrap {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
  }

  .header-main .header-actions {
    width: auto;
    margin-left: auto;
  }
}