/* ── Header ──────────────────────────────────────── */
header.site {
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-top: env(safe-area-inset-top, 0px);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.logo {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--black);
  text-decoration: none;
  letter-spacing: var(--ls-tight);
  flex-shrink: 0;
}
.header-nav {
  display: flex;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-left: auto;
}
.header-nav a {
  color: var(--black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
}
.header-nav a:hover { background: var(--grey-100); color: var(--orange-600); }
.header-lang-icon { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.header-lang-flag { width: 20px; height: auto; flex-shrink: 0; border-radius: 2px; }

/* Main nav (inline in header) */
.main-nav {
  display: flex;
  gap: var(--sp-5);
  margin-left: var(--sp-7);
}
.main-nav a {
  color: var(--black);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  white-space: nowrap;
}
.main-nav a:hover { color: var(--orange-600); }

/* ── Mega-Menu trigger (button that looks like a nav link) ───────── */
.main-nav-item { position: static; }
.main-nav-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0;
  background: none;
  border: 0;
  color: var(--black);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.main-nav-item + .main-nav-item {
  border-left: 1px solid transparent;
  padding-left: var(--sp-5);
}
a.main-nav-trigger { color: var(--black); text-decoration: none; font-size: inherit; }
.main-nav-trigger:hover,
.main-nav-trigger[aria-expanded="true"],
.main-nav-trigger.is-current { color: var(--orange-600); }
.main-nav-trigger .chevron {
  width: var(--icon-xs);
  height: var(--icon-xs);
  transition: transform var(--dur-base);
}
.main-nav-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ── Mega-Menu panel ─────────────────────────────────────────────── */
.megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  box-shadow: 0 12px 32px var(--black-a08);
  z-index: var(--z-dropdown);
}
.megamenu[hidden] { display: none; }
.megamenu-backdrop {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--black-a35);
  z-index: calc(var(--z-dropdown) - 1);
}
.megamenu-backdrop[hidden] { display: none; }
.megamenu-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--gap);
}
.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
.megamenu-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.megamenu-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.megamenu-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.megamenu-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.megamenu-col {
  position: relative;
  display: flex;
  flex-direction: row;
  min-width: 0;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  --bar-from: var(--orange-600);
  --bar-to:   var(--orange-200);
  transition: border-color var(--dur-base) var(--ease-default), transform var(--dur-base) var(--ease-default), box-shadow var(--dur-base) var(--ease-default);
}
.megamenu-col--orange  { --bar-from: var(--orange-600); --bar-to: var(--orange-200); }
.megamenu-col--teal    { --bar-from: var(--teal-600);   --bar-to: var(--teal-100); }
.megamenu-col--indigo  { --bar-from: var(--indigo-600); --bar-to: var(--indigo-200); }
.megamenu-col--green   { --bar-from: var(--green-600);  --bar-to: var(--green-100); }
.megamenu-col--rose    { --bar-from: var(--rose-600);   --bar-to: var(--rose-200); }
.megamenu-col--slate   { --bar-from: var(--slate-600);  --bar-to: var(--slate-200); }
.megamenu-col-bar {
  width: 6px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--bar-from), var(--bar-to));
}
.megamenu-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  min-width: 0;
}
.megamenu-col:hover,
.megamenu-col:focus-within {
  border-color: var(--bar-from);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.megamenu-col-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  padding-bottom: var(--sp-2-5);
  border-bottom: 1px solid var(--grey-200);
  transition: color var(--dur-base);
}
.megamenu-col-head:hover {
  color: var(--bar-from);
}
.megamenu-col-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.megamenu-col-icon {
  display: inline-flex;
  align-items: center;
  color: var(--bar-from);
}
.megamenu-col-icon svg { width: var(--icon-base); height: var(--icon-base); }
.megamenu-col-title {
  line-height: var(--lh-snug);
  min-height: calc(2em * var(--lh-snug));
  display: inline-flex;
  align-items: center;
}
.megamenu-col-teaser {
  margin: var(--sp-2) 0 var(--sp-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--grey-500);
}
.megamenu-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.megamenu-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-2-5);
  margin: 0 calc(-1 * var(--sp-2-5));
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--grey-500);
  text-decoration: none;
  transition: color var(--dur-base), background-color var(--dur-base);
}
.megamenu-list a:hover,
.megamenu-list a:focus-visible {
  color: var(--orange-700);
  background-color: var(--grey-100);
}
.megamenu-list-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--grey-400);
  transition: color var(--dur-base), transform var(--dur-base);
}
.megamenu-list-chevron svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
}
.megamenu-list a:hover .megamenu-list-chevron,
.megamenu-list a:focus-visible .megamenu-list-chevron {
  color: var(--orange-600);
  transform: translateX(2px);
}

.megamenu-intro {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2-5) var(--sp-4);
  margin: 0 0 var(--sp-2);
  border-left: 4px solid var(--orange-600);
}
.megamenu-intro-title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--black);
  line-height: var(--lh-snug);
  white-space: nowrap;
}
.megamenu-intro-cta {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--orange-600);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  transition: color var(--dur-base);
}
.megamenu-intro-cta:hover { color: var(--orange-700); }

/* ── Megamenu banner (cross-cutting link below column grid) ── */
.megamenu-banners {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: calc(-1 * var(--sp-3));
  padding-top: var(--sp-3);
  border-top: 1px solid var(--grey-200);
}
.megamenu-banners .megamenu-banner { flex: 1; }
.megamenu-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.megamenu-banner:hover { border-color: var(--teal-600); background: var(--teal-50, #F0FDFA); }
.megamenu-banner-icon { flex-shrink: 0; color: var(--teal-600); }
.megamenu-banner-icon svg { width: var(--icon-sm); height: var(--icon-sm); }
.megamenu-banner-title { font-size: var(--fs-xs); font-weight: 500; color: var(--grey-600); white-space: nowrap; }
.megamenu-banner-arrow { flex-shrink: 0; font-size: var(--fs-xs); color: var(--teal-600); margin-left: auto; }

@media (max-width: 1100px) {
  .megamenu-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .megamenu-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .megamenu-col-teaser { display: none; }
  .search-overlay-cats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .megamenu-grid { grid-template-columns: repeat(2, 1fr); }
  .search-overlay-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .search-overlay-cats-grid[data-cols="6"] { grid-template-columns: repeat(3, 1fr); }
}

/* ── Search (icon button + dropdown) ─────────────── */
.header-search-wrap { position: relative; }
.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}
.header-search-btn:hover { background: var(--grey-100); color: var(--orange-600); }
.header-search-btn svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }

/* Search pill (used inside mobile drawer) */
.header-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--grey-100);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.header-search:focus-within {
  background: var(--white);
  border-color: var(--orange-600);
}
.header-search svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex-shrink: 0;
  color: var(--grey-500);
}
.header-search input {
  border: none;
  background: transparent;
  font-size: max(var(--fs-sm), 16px); /* >= 16px prevents iOS Safari auto-zoom */
  width: 100%;
  font-family: inherit;
  color: var(--black);
}
.header-search input::placeholder { color: var(--grey-500); }

/* ── Search overlay (megamenu-style) ─────────────── */
.search-overlay-form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: var(--max-w-content);
  margin: 0 auto;
  background: var(--grey-100);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.search-overlay-form:focus-within {
  background: var(--white);
  border-color: var(--grey-300);
}
.search-overlay-form svg {
  width: var(--icon-md-sm);
  height: var(--icon-md-sm);
  flex-shrink: 0;
  color: var(--grey-500);
}
.search-overlay-form input {
  border: none;
  background: transparent;
  font-size: var(--fs-lg);
  width: 100%;
  font-family: inherit;
  color: var(--black);
  outline: none;
}
.search-overlay-form input:focus,
.search-overlay-form input:focus-visible { outline: none; box-shadow: 0 2px 0 0 var(--teal-600); }
.search-overlay-form input::placeholder { color: var(--grey-500); }

.search-overlay-body { margin-top: var(--sp-2); min-height: 200px; width: 100%; }

.search-overlay-cats-title,
.search-results-group-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--grey-500);
}
.search-overlay-cats-title {
  margin-bottom: var(--sp-4);
  display: none;
}
.search-overlay-cats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
.search-overlay-cats-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.search-overlay-cats-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.search-overlay-cats-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.search-overlay-cat {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--black);
  text-align: center;
  overflow: hidden;
  --cat-color: var(--orange-600);
  --cat-color-light: var(--orange-200);
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.search-overlay-cat-bar {
  width: 6px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, var(--cat-color), var(--cat-color-light));
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.search-overlay-cat-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  flex: 1;
}
.search-overlay-cat:hover {
  border-color: var(--cat-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.search-overlay-cat:hover .search-overlay-cat-name { color: var(--cat-color); }
.search-overlay-cat--orange  { --cat-color: var(--orange-600); --cat-color-light: var(--orange-200); }
.search-overlay-cat--teal    { --cat-color: var(--teal-600);   --cat-color-light: var(--teal-100); }
.search-overlay-cat--indigo  { --cat-color: var(--indigo-600); --cat-color-light: var(--indigo-200); }
.search-overlay-cat--green   { --cat-color: var(--green-600);  --cat-color-light: var(--green-100); }
.search-overlay-cat--rose    { --cat-color: var(--rose-600);   --cat-color-light: var(--rose-200); }
.search-overlay-cat--slate   { --cat-color: var(--slate-600);  --cat-color-light: var(--slate-200); }
.search-overlay-cat-icon { display: flex; }
.search-overlay-cat svg {
  width: var(--icon-md-lg);
  height: var(--icon-md-lg);
  color: var(--cat-color);
}
.search-overlay-cat-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.search-overlay-cat-count {
  font-size: var(--fs-xs);
  color: var(--grey-500);
}

.search-overlay .search-results {
  max-height: none;
  overflow-y: visible;
  width: 100%;
}
.search-overlay .search-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.search-overlay .search-results-col {
  min-width: 0;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.search-overlay .search-results-col--course    { border-left: 3px solid var(--orange-600); }
.search-overlay .search-results-col--knowledge { border-left: 3px solid var(--green-600); }
.search-results-col-empty {
  padding: var(--sp-3);
  color: var(--grey-400);
  font-size: var(--fs-sm);
}

/* ── Search results ──────────────────────────────── */
.search-results {
  max-height: 360px;
  overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-results-group-title {
  padding: var(--sp-2-5) var(--sp-3) var(--sp-1);
}
.search-overlay .search-results-group-title {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--grey-100);
  border-bottom: 1px solid var(--grey-200);
}
.search-overlay .search-results-group-title svg {
  width: var(--icon-xs);
  height: var(--icon-xs);
  flex-shrink: 0;
}
.search-results-count {
  font-weight: 400;
  color: var(--grey-300);
  margin-left: auto;
}
.search-results-item {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--black);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.search-overlay .search-results-item {
  border-radius: 0;
  border-bottom: 1px solid var(--grey-200);
  padding: var(--sp-2-5) var(--sp-3);
}
.search-overlay .search-results-item:last-child { border-bottom: none; }
.search-results-item:hover,
.search-results-item.is-active {
  background: var(--grey-100);
}
.search-results-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.search-results-item-sub {
  font-size: var(--fs-xs);
  color: var(--grey-500);
  line-height: var(--lh-normal);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1-5);
}
.search-tag {
  font-size: var(--fs-2xs);
  font-weight: 500;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--grey-100);
  color: var(--grey-500);
  line-height: var(--lh-normal);
}
.search-tag--highlight {
  background: var(--orange-50);
  color: var(--orange-700);
}
.search-results-empty {
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  color: var(--grey-500);
  font-size: var(--fs-sm);
}
.search-results mark {
  background: transparent;
  color: var(--orange-600);
  font-weight: 700;
}

/* ── Hamburger (mobile only) ─────────────────────── */
.header-hamburger {
  background: none;
  border: none;
  padding: var(--sp-2-5);
  cursor: pointer;
  color: var(--black);
  border-radius: var(--r-sm);
}
.header-hamburger:hover { background: var(--grey-100); }
.header-hamburger svg {
  width: var(--sp-6);
  height: var(--sp-6);
  display: block;
}

.mobile-drawer { display: none; }

/* ── Responsive: tablet adaptation (tighter spacing, desktop nav kept) ── */
@media (max-width: 960px) {
  .main-nav { gap: var(--sp-4); }
  .main-nav-item + .main-nav-item { padding-left: var(--sp-4); }
  header.site .wrap { gap: var(--sp-4); }
  .header-nav { gap: var(--sp-2); }
  .megamenu-banners { flex-wrap: wrap; }
}

/* ── Responsive: full mobile (nav hidden, hamburger + drawer) ── */
@media (max-width: 768px) {
  /* Actual mobile header: padding 10px×2 + logo 17px + border = ~57px */
  :root { --header-h: 57px; }

  .main-nav { display: none; }
  .header-search-wrap { display: none; }
  .header-hamburger[hidden] { display: flex; }

  /* Compact header */
  header.site .wrap {
    padding-top: var(--sp-2-5);
    padding-bottom: var(--sp-2-5);
    gap: var(--sp-1-5);
  }
  .logo { font-size: var(--fs-lg); }

  .header-nav { gap: var(--sp-2); } /* min 8px for tap target spacing */
  .header-nav .header-lang {
    padding: var(--sp-2);
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    font-weight: 700;
  }
  .header-hamburger { padding: 11px; }
  .header-hamburger svg { width: var(--icon-sm-md); height: var(--icon-sm-md); }

  .mobile-drawer {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
    box-shadow: var(--shadow-lg);
    padding: calc(var(--header-h, 77px) + env(safe-area-inset-top, 0px) + var(--sp-2)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-drawer);
    scroll-padding-top: var(--sp-4);
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
  /* Tablet: cap drawer height for less intrusive overlay */
  @media (min-height: 900px) {
    .mobile-drawer {
      max-height: 85vh;
      border-radius: 0 0 var(--r-2xl) var(--r-2xl);
    }
  }
  .mobile-drawer[hidden] { display: none; }
  .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-45);
    z-index: var(--z-drawer-backdrop);
    animation: mobile-drawer-fade var(--dur-fast) var(--ease-default);
  }
  .mobile-drawer-backdrop[hidden] { display: none; }
  @keyframes mobile-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .mobile-drawer-backdrop { animation: none; }
  }
  .mobile-drawer .header-search {
    display: flex;
    max-width: none;
    margin-bottom: var(--sp-2);
  }
  .mobile-nav {
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-list,
  .mobile-subnav,
  .mobile-subsub {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-nav-item > a,
  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-3-5) var(--sp-2);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--black);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--grey-100);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .mobile-nav-item > a:hover,
  .mobile-nav-toggle:hover { color: var(--orange-600); }
  .mobile-nav-toggle .chevron {
    width: var(--icon-sm);
    height: var(--icon-sm);
    transition: transform var(--dur-base);
    flex-shrink: 0;
  }
  .mobile-nav-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  .mobile-nav-toggle[aria-expanded="true"] { color: var(--orange-600); }

  .mobile-subnav[hidden],
  .mobile-subsub[hidden] { display: none; }

  .mobile-subnav-item > a,
  .mobile-subnav-item > .mobile-nav-toggle {
    padding-left: var(--sp-6);
    font-size: var(--fs-sm);
    font-weight: 500;
  }
  .mobile-subsub a {
    display: block;
    padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-8);
    font-size: var(--fs-sm);
    color: var(--grey-500);
    text-decoration: none;
    border-bottom: 1px solid var(--grey-100);
  }
  .mobile-subsub a:hover { color: var(--orange-600); }
  .mobile-subsub .mobile-subsub-all {
    font-weight: 600;
    color: var(--black);
  }
}

@media (max-width: 560px) {
  .mobile-subsub a { padding-left: var(--sp-6); }
  .search-overlay-cats-grid,
  .search-overlay-cats-grid[data-cols="3"],
  .search-overlay-cats-grid[data-cols="4"],
  .search-overlay-cats-grid[data-cols="6"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .logo { font-size: var(--fs-sm); }
  .mobile-nav-item > a,
  .mobile-nav-toggle { padding: var(--sp-3) var(--sp-2); font-size: var(--fs-sm); }
  .mobile-subnav-item > a,
  .mobile-subnav-item > .mobile-nav-toggle { padding-left: var(--sp-5); }
  .mobile-subsub a { padding: var(--sp-2-5) var(--sp-2) var(--sp-2-5) var(--sp-5); }
  .search-overlay-cats-grid,
  .search-overlay-cats-grid[data-cols="3"],
  .search-overlay-cats-grid[data-cols="4"],
  .search-overlay-cats-grid[data-cols="6"] { grid-template-columns: 1fr; }
}

/* ── Landscape phone: reduce header height to reclaim vertical space ── */
@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 48px; }
  header.site .wrap { padding-top: var(--sp-1-5); padding-bottom: var(--sp-1-5); }
}

/* ── Minimum 44px touch targets ── */
.logo {
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
}
/* Touch targets on touch devices (mobile + hybrid laptops) */
@media (pointer: coarse) {
  .header-nav a,
  .header-nav button,
  .header-search-btn {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    justify-content: center;
  }
  .main-nav-trigger {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: var(--sp-2) var(--sp-1);
  }
}