/* ================================================================
   OZ HEADER — Custom sitewide header, menu drawer, search drawer.
   Uses design tokens from oz-design-system.css.
   ================================================================ */

/* Header-specific tokens (extend design system) */
:root {
  --oz-hdr-height: 60px;
  --oz-hdr-height-desktop: 76px;
  --oz-hdr-bg: var(--oz-bg-page, #FFF);
  --oz-hdr-color: var(--oz-text-primary, #1A1A1A);
  --oz-hdr-teal: var(--oz-accent, #135350);
  --oz-hdr-charcoal: var(--oz-text-primary, #1A1A1A);
  --oz-hdr-sand: var(--oz-bg-warm, #F5F4F0);
  --oz-hdr-stone: var(--oz-border, #E5E5E3);
  --oz-hdr-text-muted: var(--oz-text-muted, #888);
  --oz-hdr-ff-heading: var(--oz-ff-heading, 'DM Serif Display', Georgia, serif);
  --oz-hdr-ff-body: var(--oz-ff-body, 'Raleway', system-ui, sans-serif);
  --oz-hdr-transition: var(--oz-transition, .3s cubic-bezier(.4,0,.2,1));
}

/* ── Component resets ── */
.oz-header__svg,
.oz-header__icon svg,
.oz-menu-drawer__close svg,
.oz-menu-drawer__account svg,
.oz-menu-drawer__category-arrow svg,
.oz-menu-drawer__back-button svg,
.oz-menu-drawer__subcategory-link svg,
.oz-search-drawer__close svg,
.oz-search-drawer__search-icon,
.oz-search-drawer__clear svg,
.oz-search-drawer__view-all svg {
  overflow: visible;
  fill: none;
  stroke: currentColor;
}

.oz-header button,
.oz-menu-drawer button,
.oz-search-drawer button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

button.oz-menu-drawer__category-link {
  padding: 12px 20px;
}

.oz-search-drawer input[type="search"] {
  appearance: none;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  color: var(--oz-hdr-charcoal);
  height: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
}

.oz-search-drawer input[type="search"]::placeholder {
  color: var(--oz-hdr-text-muted);
}

.oz-header a,
.oz-menu-drawer a,
.oz-search-drawer a,
.oz-footer a {
  text-decoration: none;
  color: inherit;
}

/* ── Header bar ── */
.oz-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--oz-hdr-height);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 8px rgba(0,0,0,.04);
  transition: background var(--oz-hdr-transition),
              border-color var(--oz-hdr-transition),
              box-shadow var(--oz-hdr-transition);
}

/* Full-width header — icons pushed to edges, no boxed constraint */
.oz-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 16px;
}

/* Left group: mobile buttons + logo (logo centered via absolute on mobile) */
.oz-header__left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

/* Mobile: center the logo absolutely in the header bar */
.oz-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Center group: desktop nav (hidden on mobile) */
.oz-header__center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* Right group: account + cart */
.oz-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1;
}

/* Icon button base — color set explicitly to override Flatsome inheritance */
.oz-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none !important;
  background: none;
  cursor: pointer;
  color: var(--oz-hdr-charcoal) !important;
  border-radius: 50%;
  transition: background .15s;
  text-decoration: none !important;
  position: relative;
}

.oz-header__icon:hover {
  background: rgba(0,0,0,.05);
}

/* Hamburger/X toggle: both SVGs live inside the same button.
   Default: hamburger visible, X hidden.
   When .menu-open: hamburger hidden, X visible. */
#oz-menu-trigger .oz-header__svg {
  display: block;
}

#oz-menu-trigger .oz-header__svg--close {
  display: none !important;
}

.oz-header.menu-open #oz-menu-trigger .oz-header__svg:not(.oz-header__svg--close) {
  display: none !important;
}

.oz-header.menu-open #oz-menu-trigger .oz-header__svg--close {
  display: block !important;
}

/* When menu is open, float the header above the drawer so the X is visible.
   Header goes transparent. ALL groups hidden — only #oz-menu-trigger (X) shows. */
.oz-header.menu-open {
  z-index: 1002;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Hide every header group — left (search+hamburger), center (logo), right (account+cart) */
.oz-header.menu-open .oz-header__left,
.oz-header.menu-open .oz-header__center,
.oz-header.menu-open .oz-header__right {
  visibility: hidden;
}

/* Only the X button itself is visible and clickable */
.oz-header.menu-open #oz-menu-trigger {
  visibility: visible;
  pointer-events: auto;
}

/* Force dark X on the drawer's white panel.
   Must beat .oz-header--overlay:not(.is-stuck) specificity (0,4,0). */
.oz-header.menu-open .oz-header__left #oz-menu-trigger {
  color: var(--oz-hdr-charcoal) !important;
}

.oz-header.menu-open .oz-header__left #oz-menu-trigger .oz-header__svg {
  stroke: var(--oz-hdr-charcoal) !important;
}

/* Hide the drawer's own close button — the main header X replaces it.
   Logo + account stay visible in the drawer header (like Gulcanhome). */
.oz-menu-drawer.is-open .oz-menu-drawer__close {
  visibility: hidden;
}

/* Logo */
.oz-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.oz-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.oz-header__logo-text {
  font-family: var(--oz-hdr-ff-heading);
  font-size: 18px;
  color: var(--oz-hdr-charcoal);
}

/* Cart badge */
.oz-header__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--oz-hdr-teal);
  color: #FFF;
  font-family: var(--oz-hdr-ff-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 999px;
}

/* Responsive visibility: desktop elements hidden on mobile, vice versa */
.oz-header__desktop-only {
  display: none;
}

.oz-header__mobile-only {
  display: flex;
}

/* ── Overlay header mode (hero pages: homepage + ruimte) ──
   Transparent header with white text/icons over dark hero images.
   On scroll (is-stuck), reverts to frosted glass with dark text. */
.oz-header--overlay:not(.is-stuck) {
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 70%, transparent 100%);
  border-bottom-color: transparent;
}

.oz-header--overlay:not(.is-stuck) .oz-header__icon,
.oz-header--overlay:not(.is-stuck) .oz-header__logo-text {
  color: #FFF !important;
}

.oz-header--overlay:not(.is-stuck) .oz-header__logo img {
  filter: none;
}

.oz-header--overlay:not(.is-stuck) .oz-header__icon:hover {
  background: rgba(255,255,255,.12);
}

.oz-header--overlay:not(.is-stuck) .oz-header__svg {
  stroke: #FFF !important;
}

/* Desktop nav links go white on overlay */
.oz-header--overlay:not(.is-stuck) .oz-nav__link {
  color: #FFF;
}

.oz-header--overlay:not(.is-stuck) .oz-nav__link:hover {
  background: rgba(255,255,255,.12);
}

.oz-header--overlay:not(.is-stuck) .oz-nav__chevron {
  stroke: #FFF;
}

/* Sticky glass state when scrolled (matches base header glass) */
.oz-header--overlay.is-stuck {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

.oz-header--overlay.is-stuck .oz-header__icon,
.oz-header--overlay.is-stuck .oz-header__logo-text {
  color: var(--oz-hdr-charcoal) !important;
}

.oz-header--overlay.is-stuck .oz-header__svg {
  stroke: var(--oz-hdr-charcoal) !important;
}

.oz-header--overlay.is-stuck .oz-header__logo img {
  filter: none;
}

.oz-header--overlay.is-stuck .oz-header__icon:hover {
  background: rgba(0,0,0,.05);
}

/* Nav links revert to dark on scroll */
.oz-header--overlay.is-stuck .oz-nav__link {
  color: var(--oz-hdr-charcoal);
}

.oz-header--overlay.is-stuck .oz-nav__chevron {
  stroke: var(--oz-hdr-charcoal);
}

.oz-header--overlay.is-stuck .oz-nav__item--cta .oz-nav__link {
  color: var(--oz-cta, #E67C00);
}

/* Body offset so content doesn't sit behind fixed header */
body:not(.oz-header-overlay-page) {
  padding-top: var(--oz-hdr-height);
}

/* Homepage: no padding (overlay mode, hero fills full viewport) */
body.oz-header-overlay-page {
  padding-top: 0;
}


/* ================================================================
   MENU DRAWER — slides from left
   ================================================================ */
.oz-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
  visibility: hidden;
}

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

/* Overlay */
.oz-menu-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity var(--oz-hdr-transition);
}

.oz-menu-drawer.is-open .oz-menu-drawer__overlay {
  opacity: 1;
}

/* Panel */
.oz-menu-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--oz-hdr-bg);
  transform: translateX(-100%);
  transition: transform var(--oz-hdr-transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.oz-menu-drawer.is-open .oz-menu-drawer__panel {
  transform: translateX(0);
}

/* Drawer header: close + logo + account */
.oz-menu-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--oz-hdr-stone);
  flex-shrink: 0;
}

.oz-menu-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--oz-hdr-charcoal);
  border-radius: 50%;
  transition: background .15s;
}

.oz-menu-drawer__close:hover {
  background: rgba(0,0,0,.05);
}

.oz-menu-drawer__logo {
  display: flex;
  align-items: center;
}

.oz-menu-drawer__logo img {
  height: 40px;
  width: auto;
}

.oz-menu-drawer__account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--oz-hdr-charcoal);
  text-decoration: none;
  border-radius: 50%;
  transition: background .15s;
}

.oz-menu-drawer__account:hover {
  background: rgba(0,0,0,.05);
}

/* Scrollable menu content — flex column so footer links stick to bottom */
.oz-menu-drawer__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Banner image with overlay text (like Gulcanhome) */
.oz-menu-drawer__banner {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.oz-menu-drawer__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.oz-menu-drawer__banner-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 20px;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4) 100%);
  color: #fff;
}

.oz-menu-drawer__banner-line1 {
  font-family: var(--oz-hdr-ff-body);
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .8;
}

.oz-menu-drawer__banner-line2 {
  font-family: var(--oz-hdr-ff-body);
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
}

/* Footer links at bottom of drawer (Klantenservice, Retourneren, etc.) */
.oz-menu-drawer__footer {
  margin-top: auto;
  padding: 16px 20px 12px;
  border-top: 1px solid var(--oz-hdr-stone);
}

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

.oz-menu-drawer__footer-list li {
  margin: 0;
  padding: 0;
}

.oz-menu-drawer__footer-list a {
  display: block;
  padding: 8px 0;
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  color: var(--oz-hdr-charcoal);
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s;
}

.oz-menu-drawer__footer-list a:hover {
  opacity: 1;
}

/* Category list */
.oz-menu-drawer__categories {
  list-style: none;
  margin: 0;
  padding: 12px 0;
}

.oz-menu-drawer__category {
  margin: 0;
  padding: 0;
}

/* Category link row: icon + title + arrow */
.oz-menu-drawer__category-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--oz-hdr-charcoal);
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .15s;
}

.oz-menu-drawer__category-link:hover {
  background: var(--oz-hdr-sand);
}

/* Circle icon */
.oz-menu-drawer__category-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--oz-hdr-stone);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oz-menu-drawer__category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback: first letter */
.oz-menu-drawer__category-letter {
  font-family: var(--oz-hdr-ff-heading);
  font-size: 20px;
  color: var(--oz-hdr-teal);
}

.oz-menu-drawer__category-title {
  flex: 1;
}

.oz-menu-drawer__category-arrow {
  display: flex;
  align-items: center;
  color: var(--oz-hdr-text-muted);
  transition: transform .2s;
}

/* ── Submenu drill-down panels ──
   Cover the full __panel. The back-header has padding-top matching
   the main header height, so the floating X sits in that spacer
   and the back button sits in the row below. */
.oz-menu-drawer__subcategory {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--oz-hdr-bg);
  transform: translateX(100%);
  transition: transform var(--oz-hdr-transition);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.oz-menu-drawer__subcategory.is-open {
  transform: translateX(0);
}

/* Row 1: empty spacer matching the drawer header height so the
   main header's floating X button sits here without collision.
   Row 2 (__back-header itself): the actual "< Ruimtes" back button. */
.oz-menu-drawer__back-header {
  padding: 16px 20px;
  padding-top: calc(var(--oz-hdr-height) + 16px);
  border-bottom: 1px solid var(--oz-hdr-stone);
}

@media (min-width: 768px) {
  .oz-menu-drawer__back-header {
    padding-top: calc(var(--oz-hdr-height-desktop) + 16px);
  }
}

.oz-menu-drawer__back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--oz-hdr-charcoal);
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}

.oz-menu-drawer__back-button:hover {
  color: var(--oz-hdr-teal);
}

.oz-menu-drawer__back-title {
  font-family: var(--oz-hdr-ff-heading);
  font-size: 18px;
  font-weight: 400;
}

.oz-menu-drawer__subcategory-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.oz-menu-drawer__subcategory-item {
  margin: 0;
  padding: 0;
}

.oz-menu-drawer__subcategory-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  text-decoration: none;
  color: var(--oz-hdr-charcoal);
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, color .15s;
}

.oz-menu-drawer__subcategory-link:hover {
  background: var(--oz-hdr-sand);
  color: var(--oz-hdr-teal);
}

/* Sub-sub accordion (grandchildren inside a subcategory panel) */
.oz-menu-drawer__subcategory-item.has-grandchildren .oz-menu-drawer__subcategory-row {
  display: flex;
  align-items: stretch;
}

.oz-menu-drawer__subcategory-item.has-grandchildren .oz-menu-drawer__subcategory-link {
  flex: 1;
  min-width: 0;
}

.oz-menu-drawer__subcategory-toggle {
  flex: 0 0 auto;
  width: 52px;
  background: none;
  border: none;
  border-left: 1px solid var(--oz-hdr-stone);
  cursor: pointer;
  color: var(--oz-hdr-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, transform .2s;
  padding: 0;
}

.oz-menu-drawer__subcategory-toggle:hover {
  background: var(--oz-hdr-sand);
  color: var(--oz-hdr-teal);
}

.oz-menu-drawer__subcategory-toggle svg {
  transition: transform .2s ease;
}

.oz-menu-drawer__subcategory-item.is-expanded .oz-menu-drawer__subcategory-toggle svg {
  transform: rotate(180deg);
}

.oz-menu-drawer__grandchildren {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: var(--oz-hdr-sand);
}

.oz-menu-drawer__subcategory-item.is-expanded .oz-menu-drawer__grandchildren {
  max-height: 1000px;
}

.oz-menu-drawer__grandchild-item {
  margin: 0;
  padding: 0;
}

.oz-menu-drawer__grandchild-link {
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 40px;
  text-decoration: none;
  color: var(--oz-hdr-charcoal);
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 400;
  transition: background .15s, color .15s;
}

.oz-menu-drawer__grandchild-link:hover {
  background: var(--oz-hdr-stone);
  color: var(--oz-hdr-teal);
}


/* ================================================================
   SEARCH DRAWER — slides from left
   ================================================================ */
.oz-search-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}

.oz-search-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Overlay */
.oz-search-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity var(--oz-hdr-transition);
}

.oz-search-drawer.is-open .oz-search-drawer__overlay {
  opacity: 1;
}

/* Panel */
.oz-search-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--oz-hdr-bg);
  transform: translateX(-100%);
  transition: transform var(--oz-hdr-transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.oz-search-drawer.is-open .oz-search-drawer__panel {
  transform: translateX(0);
}

/* Search header: back + input */
.oz-search-drawer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--oz-hdr-stone);
  flex-shrink: 0;
}

.oz-search-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--oz-hdr-charcoal);
  border-radius: 50%;
  transition: background .15s;
  flex-shrink: 0;
}

.oz-search-drawer__close:hover {
  background: rgba(0,0,0,.05);
}

/* Search form */
.oz-search-drawer__form {
  flex: 1;
}

.oz-search-drawer__input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--oz-hdr-sand);
  border-radius: 999px;
  padding: 0 16px;
  height: 44px;
  transition: box-shadow .2s;
}

.oz-search-drawer__input-wrapper:focus-within {
  box-shadow: 0 0 0 2px var(--oz-hdr-teal);
}

.oz-search-drawer__search-icon {
  flex-shrink: 0;
  color: var(--oz-hdr-text-muted);
}

.oz-search-drawer__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  color: var(--oz-hdr-charcoal);
  outline: none;
  height: 100%;
}

.oz-search-drawer__input::placeholder {
  color: var(--oz-hdr-text-muted);
}

/* Hide the native browser clear X on type="search" inputs — we have our own
   custom clear button (#oz-search-clear). Without this, Chrome/Edge render
   their own X, resulting in two clear icons stacked on top of each other. */
.oz-search-drawer__input::-webkit-search-cancel-button,
.oz-search-drawer__input::-webkit-search-decoration,
.oz-search-drawer__input::-webkit-search-results-button,
.oz-search-drawer__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.oz-search-drawer__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0,0,0,.08);
  border-radius: 50%;
  cursor: pointer;
  color: var(--oz-hdr-charcoal);
  flex-shrink: 0;
  transition: background .15s;
}

.oz-search-drawer__clear:hover {
  background: rgba(0,0,0,.14);
}

/* Scrollable content */
.oz-search-drawer__content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}

/* Sections */
.oz-search-drawer__section {
  margin-bottom: 32px;
}

.oz-search-drawer__section:last-child {
  margin-bottom: 0;
}

.oz-search-drawer__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.oz-search-drawer__section-title {
  font-family: var(--oz-hdr-ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--oz-hdr-text-muted);
  margin: 0 0 12px;
}

.oz-search-drawer__section-header .oz-search-drawer__section-title {
  margin-bottom: 0;
}

.oz-search-drawer__clear-all {
  border: none;
  background: none;
  font-family: var(--oz-hdr-ff-body);
  font-size: 12px;
  color: var(--oz-hdr-teal);
  cursor: pointer;
  padding: 0;
}

.oz-search-drawer__clear-all:hover {
  text-decoration: underline;
}

/* Recent searches list */
.oz-search-drawer__recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oz-search-drawer__recent-list li {
  margin: 0;
}

.oz-search-drawer__recent-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  color: var(--oz-hdr-charcoal);
  text-align: left;
  transition: color .15s;
}

.oz-search-drawer__recent-list button:hover {
  color: var(--oz-hdr-teal);
}

.oz-search-drawer__recent-list button::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}

/* Quick category links */
.oz-search-drawer__categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oz-search-drawer__category-link {
  display: inline-block;
  padding: 8px 16px;
  background: var(--oz-hdr-sand);
  color: var(--oz-hdr-charcoal);
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: background .15s, color .15s;
}

.oz-search-drawer__category-link:hover {
  background: var(--oz-hdr-teal);
  color: #FFF;
}

/* Search results grid */
.oz-search-drawer__results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Product card in results */
.oz-search-drawer__product {
  text-decoration: none;
  color: var(--oz-hdr-charcoal);
  transition: transform .15s;
}

.oz-search-drawer__product:hover {
  transform: translateY(-2px);
}

.oz-search-drawer__product-img {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--oz-hdr-sand);
  margin-bottom: 8px;
}

.oz-search-drawer__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oz-search-drawer__product-title {
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.oz-search-drawer__product-price {
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-hdr-teal);
}

/* View all results link */
.oz-search-drawer__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-hdr-teal);
  text-decoration: none;
  transition: gap .2s;
}

.oz-search-drawer__view-all:hover {
  gap: 12px;
}

/* No results */
.oz-search-drawer__no-results-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--oz-hdr-charcoal);
  margin-bottom: 4px;
}

.oz-search-drawer__no-results-hint {
  font-size: 13px;
  color: var(--oz-hdr-text-muted);
}

/* Loading spinner */
.oz-search-drawer__loading {
  text-align: center;
  padding: 40px 0;
  color: var(--oz-hdr-text-muted);
  font-size: 14px;
}

.oz-search-drawer__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--oz-hdr-stone);
  border-top-color: var(--oz-hdr-teal);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: oz-spin .7s linear infinite;
}

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

/* Placeholder text */
.oz-search-drawer__placeholder-text {
  font-size: 13px;
  color: var(--oz-hdr-text-muted);
  font-style: italic;
}

/* ================================================================
   DESKTOP NAVIGATION — horizontal nav with mega menu panels.
   Hidden below 1024px (lives inside .oz-header__desktop-only).
   CSS :hover/:focus-within drives the mega panels; JS only adds
   keyboard (Escape) and touch (first-tap-opens) support.
   ================================================================ */
.oz-nav {
  display: flex;
  align-items: center;
}

.oz-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.oz-nav__item {
  position: relative;
}

.oz-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-hdr-charcoal);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.oz-nav__link:hover {
  background: rgba(0,0,0,.05);
}

.oz-nav__chevron {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  transition: transform .2s;
}

/* CTA nav item (accent color, e.g. "Offerte aanvragen") */
.oz-nav__item--cta .oz-nav__link {
  color: var(--oz-cta, #E67C00);
  font-weight: 600;
}

.oz-nav__item--cta .oz-nav__link:hover {
  background: rgba(230,124,0,.08);
}

/* ── Mega menu dropdown panel ── */
.oz-mega__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 8px;           /* spacer prevents hover-gap between link and panel */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  z-index: 100;
  max-width: calc(100vw - 48px);  /* prevent overflow on smaller desktops */
}

/* Show on hover or keyboard focus-within */
.oz-nav__item.has-mega:hover .oz-mega__panel,
.oz-nav__item.has-mega:focus-within .oz-mega__panel {
  opacity: 1;
  visibility: visible;
}

/* Touch devices: JS toggles .is-mega-open on first tap */
.oz-nav__item.is-mega-open .oz-mega__panel {
  opacity: 1;
  visibility: visible;
}

/* Escape key: JS adds .is-mega-closed to override :focus-within */
.oz-nav__item.is-mega-closed .oz-mega__panel {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Chevron flips when panel is open */
.oz-nav__item.has-mega:hover .oz-nav__chevron,
.oz-nav__item.has-mega:focus-within .oz-nav__chevron,
.oz-nav__item.is-mega-open .oz-nav__chevron {
  transform: rotate(180deg);
}

/* Panel inner: frosted glass, flex row of columns */
.oz-mega__inner {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--oz-radius-lg, 12px);
  box-shadow: var(--oz-shadow-lg, 0 8px 32px rgba(0,0,0,.12));
  padding: 32px;
  display: flex;
  gap: 32px;
  min-width: 200px;
}

/* When no .oz-mega__column children exist (flat links like Ruimtes),
   wrap into a 2-column grid automatically */
.oz-mega__inner:not(:has(.oz-mega__column)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 24px;
}

/* Category column: heading + child links stacked vertically */
.oz-mega__column {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

/* Category heading — bold, links to parent category */
.oz-mega__heading {
  display: block;
  padding: 8px 12px;
  font-family: var(--oz-hdr-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--oz-hdr-teal);
  text-decoration: none;
  margin-bottom: 4px;
}

.oz-mega__heading:hover {
  color: var(--oz-hdr-charcoal);
}

/* Individual link inside a column or flat panel */
.oz-mega__link {
  display: block;
  padding: 8px 12px;
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-hdr-charcoal);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.oz-mega__link:hover {
  background: var(--oz-hdr-sand);
  color: var(--oz-hdr-teal);
}


/* ================================================================
   SCROLL LOCK
   ================================================================ */
body.oz-drawer-open {
  overflow: hidden;
  touch-action: none;
}

/* ================================================================
   DESKTOP (768px+)
   ================================================================ */
@media (min-width: 768px) {
  .oz-header {
    height: var(--oz-hdr-height-desktop);
  }

  body:not(.oz-header-overlay-page) {
    padding-top: var(--oz-hdr-height-desktop);
  }

  .oz-header__inner {
    padding: 0 24px;
  }

  .oz-header__logo img,
  .oz-menu-drawer__logo img {
    height: 52px;
  }

  /* Search results: 3 columns on desktop */
  .oz-search-drawer__results-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   DESKTOP NAV BREAKPOINT (1024px+)
   Below 1024px: mobile layout — hamburger (left), logo (center), cart (right).
   Above 1024px: desktop layout — logo (left), horizontal nav (center),
   search + account + cart (right).
   ================================================================ */
@media (min-width: 1024px) {
  .oz-header__mobile-only { display: none; }
  .oz-header__desktop-only { display: flex; }

  /* Left: just the logo (hamburger hidden via mobile-only) */
  .oz-header__left { flex: 0 0 auto; }

  /* Center: horizontal nav fills the middle space */
  .oz-header__center { flex: 1; display: flex; justify-content: center; }

  /* Right: search + account + cart, fixed width */
  .oz-header__right { flex: 0 0 auto; }

  .oz-header__inner { padding: 0 32px; }

  /* Logo flows normally in the left group on desktop */
  .oz-header__logo {
    position: static;
    transform: none;
  }
}


/* ================================================================
   MOBILE (<480px)
   ================================================================ */
@media (max-width: 479px) {
  .oz-menu-drawer__panel {
    max-width: 100%;
  }

  .oz-search-drawer__panel {
    max-width: 100%;
  }
}


/* ================================================================
   FOOTER
   ================================================================ */

/* Trust bar at top of footer */
.oz-footer__trust {
  background: var(--oz-hdr-sand);
  border-bottom: 1px solid var(--oz-hdr-stone);
}

.oz-footer__trust-inner {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}

.oz-footer__trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--oz-hdr-ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--oz-hdr-charcoal);
  white-space: nowrap;
}

.oz-footer__trust-item svg {
  flex-shrink: 0;
  color: var(--oz-hdr-teal);
  overflow: visible !important;
}

.oz-footer__trust-item svg path,
.oz-footer__trust-item svg rect,
.oz-footer__trust-item svg circle,
.oz-footer__trust-item svg line {
  stroke: var(--oz-hdr-teal) !important;
  fill: none !important;
}

/* Hide Flatsome footer if any leaks through hooks */
#footer.footer-wrapper {
  display: none !important;
}

.oz-footer {
  background: var(--oz-hdr-charcoal);
  color: rgba(255,255,255,.6);
  font-family: var(--oz-hdr-ff-body);
  font-size: 14px;
  line-height: 1.6;
}

.oz-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 48px;
}

.oz-footer__logo {
  display: inline-block;
  margin-bottom: 12px;
  text-decoration: none;
}

.oz-footer__logo img {
  height: 60px;
  width: auto;
}

.oz-footer__logo span {
  font-family: var(--oz-hdr-ff-heading);
  font-size: 18px;
  color: #FFF;
}

.oz-footer__tagline {
  font-family: var(--oz-hdr-ff-heading);
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin: 0 0 16px;
}

.oz-footer__contact {
  font-size: 13px;
  line-height: 1.6;
}

.oz-footer__contact p {
  margin: 0 0 12px;
}

.oz-footer__contact a {
  color: rgba(255,255,255,.6) !important;
  transition: color .15s;
}

.oz-footer__contact a:hover {
  color: #FFF !important;
}

.oz-footer__legal {
  font-size: 11px;
  color: rgba(255,255,255,.7);
}

.oz-footer__heading {
  font-family: var(--oz-hdr-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin: 0 0 16px;
}

.oz-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oz-footer__links li {
  margin-bottom: 12px;
}

.oz-footer__links a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .15s;
}

.oz-footer__links a:hover {
  color: #FFF;
}

/* Opening hours table */
.oz-footer__hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.oz-footer__hours th,
.oz-footer__hours td {
  padding: 4px 0;
  text-align: left;
  font-weight: 400;
  color: rgba(255,255,255,.6);
  vertical-align: top;
}

.oz-footer__hours th {
  padding-right: 12px;
  color: rgba(255,255,255,.75);
}

.oz-footer__closed {
  color: rgba(255,255,255,.7);
  font-style: italic;
}

/* Accordion — collapsible columns on mobile, static on desktop */
.oz-footer__accordion {
  /* reset native details display so grid item behaves normally */
}

.oz-footer__accordion > summary {
  list-style: none;
}

.oz-footer__accordion > summary::-webkit-details-marker { display: none; }
.oz-footer__accordion > summary::marker { content: ""; }

.oz-footer__chevron {
  display: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}

/* Desktop: force content always visible, make summary non-interactive */
@media (min-width: 801px) {
  .oz-footer__accordion > summary {
    cursor: default;
    pointer-events: none;
  }
  .oz-footer__accordion > :not(summary) {
    display: block !important;
  }
  .oz-footer__accordion > .oz-footer__hours {
    display: table !important;
  }
}

/* Mobile: native collapse, rotate chevron when open */
@media (max-width: 800px) {
  .oz-footer__accordion {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 0;
  }
  .oz-footer__accordion:last-of-type {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .oz-footer__accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0;
  }
  .oz-footer__chevron {
    display: inline-block;
    color: rgba(255,255,255,.55);
  }
  .oz-footer__accordion[open] .oz-footer__chevron {
    transform: rotate(180deg);
  }
  .oz-footer__accordion[open] .oz-footer__links,
  .oz-footer__accordion[open] .oz-footer__hours {
    margin-top: 16px;
  }
}

/* Payment icons — sitewide footer strip, replaces Flatsome's
   flatsome_footer_payment_icons. Static SVGs from oz-theme/img/payment-icons.
   Uses .oz-payment-section--footer modifier (PDP variant lives in the plugin). */
.oz-payment-section--footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.oz-payment-section--footer .oz-payment-label {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.oz-payment-section--footer .oz-payment-methods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.oz-payment-section--footer .oz-payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  padding: 4px;
  background: white;
  border-radius: 4px;
}

.oz-payment-section--footer .oz-payment-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.oz-payment-section--footer .oz-payment-icon--ideal {
  width: 64px;
}

/* When the payment strip is present, .oz-footer__bottom should not double the
   border. Suppress the bottom's top border in that case. */
.oz-payment-section--footer + .oz-footer__bottom {
  border-top: 0;
}

.oz-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.oz-footer__bottom p {
  margin: 0;
}

.oz-footer__bottom .oz-footer__co2 {
  margin: 0 0 8px;
  color: rgba(255,255,255,.75);
  font-size: 11px;
  letter-spacing: .5px;
}

/* Badges row — Google reviews + webshop keurmerk */
.oz-footer__badges {
  background: var(--oz-hdr-charcoal);
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 32px 24px;
  flex-wrap: wrap;
}

.oz-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 20px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.oz-footer__badge:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.oz-footer__badge-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5b50a;
}

.oz-footer__badge-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.3;
}

.oz-footer__badge-text strong {
  font-family: var(--oz-hdr-ff-heading);
  font-size: 16px;
  color: #FFF;
  font-weight: 600;
}

.oz-footer__badge-text em {
  font-style: normal;
  font-size: 11px;
  color: rgba(255,255,255,.5);
  letter-spacing: .3px;
}

.oz-footer__badge--keurmerk {
  padding: 8px 16px;
}

.oz-footer__badge--keurmerk img {
  display: block;
  height: 40px;
  width: auto;
  border-radius: 4px;
}

/* Brand trilogy line — shows 3 flagship product lines under tagline */
.oz-footer__trilogy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

.oz-footer__trilogy a {
  color: rgba(255,255,255,.7) !important;
  font-family: var(--oz-hdr-ff-heading);
  font-style: italic;
  font-size: 13px;
  text-decoration: none;
  transition: color .15s;
}

.oz-footer__trilogy a:hover {
  color: #FFF !important;
}

.oz-footer__trilogy-sep {
  color: rgba(255,255,255,.2);
}

@media (max-width: 600px) {
  .oz-footer__badges {
    gap: 24px;
    padding: 20px 16px;
  }
  .oz-footer__badge {
    padding: 12px 16px;
    gap: 12px;
  }
  .oz-footer__badge--keurmerk img {
    height: 34px;
  }
  .oz-footer__trilogy {
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  .oz-footer__trust-inner {
    flex-wrap: wrap;
    gap: 16px 32px;
    justify-content: flex-start;
  }

  .oz-footer__trust-item {
    white-space: normal;
    font-size: 12px;
  }

  .oz-footer__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 32px 20px;
  }

  .oz-footer__brand {
    margin-bottom: 16px;
  }
}