/**
 * Public header / nav / footer — assembled from the landing-package sample.
 * Tokens only. Does not change cart, search, wishlist, or newsletter hooks.
 */

/* ========== Sticky single header (DS 08 Navigation) ========== */
.gp-ds header.gp-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--gp-surface);
  box-shadow: var(--gp-shadow-card);
  border-bottom: 1px solid var(--gp-border);
}

.gp-ds header.gp-site-header .sub-header {
  display: none;
}

.gp-ds header.gp-site-header .menubar {
  background: transparent;
  padding: 0;
  border-bottom: none;
}

.gp-ds header.gp-site-header .navbar {
  padding: 0;
}

.gp-ds header.gp-site-header .navbar>.container,
.gp-ds header.gp-site-header .header-inner {
  max-width: 1240px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  padding-left: 22px;
  padding-right: 22px;
}

@media (min-width: 992px) {
  .gp-ds header.gp-site-header .navbar-collapse {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px;
    flex-wrap: nowrap;
  }
}

.gp-ds header.gp-site-header .navbar-brand.logo {
  padding: 0;
  margin-right: 0;
  flex: 0 0 auto;
}

.gp-ds header.gp-site-header .navbar-brand.logo img {
  height: 36px;
  width: auto;
}

/* Logo swap: the uploaded "dark_logo" has dark-colored wordmark text and
   disappears on a dark ground; "light_logo" is the white-text variant made
   for exactly this. Show the matching one per theme, same tri-state pattern
   as the color tokens (bare rule = light, media query = system, attr = explicit). */
.gp-ds .gp-logo-on-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .gp-ds:not([data-theme="light"]) .gp-logo-on-light {
    display: none;
  }
  .gp-ds:not([data-theme="light"]) .gp-logo-on-dark {
    display: inline-block;
  }
}
.gp-ds[data-theme="dark"] .gp-logo-on-light {
  display: none;
}
.gp-ds[data-theme="dark"] .gp-logo-on-dark {
  display: inline-block;
}

.gp-ds header.gp-site-header .main-nav-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 !important;
}

/* Nav links — 14px / 500, underline grows from the link edges */
.gp-ds header.gp-site-header .main-nav-wrap .nav-link,
.gp-ds header.gp-site-header .navbar-collapse>a {
  font-family: var(--gp-font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--gp-fg) !important;
  background: transparent !important;
  padding: 8px 0;
  position: relative;
}

.gp-ds header.gp-site-header .main-nav-wrap .nav-link i,
.gp-ds header.gp-site-header .main-nav-wrap .nav-link .fa-angle-down {
  font-size: 10px;
  margin-left: 6px !important;
  color: var(--gp-fg-muted);
}

.gp-ds header.gp-site-header .main-nav-wrap .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--gp-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--gp-dur-base) var(--gp-ease-out);
}

.gp-ds header.gp-site-header .main-nav-wrap .nav-item:hover .nav-link,
.gp-ds header.gp-site-header .main-nav-wrap .nav-item.active .nav-link {
  color: var(--gp-blue-solid) !important;
}

.gp-ds header.gp-site-header .main-nav-wrap .nav-item:hover .nav-link::after,
.gp-ds header.gp-site-header .main-nav-wrap .nav-item.active .nav-link::after {
  transform: scaleX(1);
}

/* Courses / dropdowns */
.gp-ds header.gp-site-header .navbarHover {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow-card);
  min-width: 280px;
  padding: 8px 0;
  margin-top: 10px;
}

.gp-ds header.gp-site-header .navbarHover li a {
  font-family: var(--gp-font-body);
  font-size: 14px;
  color: var(--gp-fg-muted);
  padding: 10px 18px;
}

.gp-ds header.gp-site-header .navbarHover li a:hover {
  background: var(--gp-paper);
  color: var(--gp-accent);
  padding-left: 24px;
}

.gp-ds header.gp-site-header .sub-category-menu {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: 0 10px 10px 0;
}

/* Compact search-icon dropdown (many header menu items) — DS card, not inline #bbb */
.gp-ds header.gp-site-header .search-input-form .dropdown-menu {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow-card) !important;
}

/* Search — compact pill, icon and label do not overlap */
.gp-ds header.gp-site-header .gp-header-search,
.gp-ds header.gp-site-header .search-input-form {
  flex: 1 1 260px;
  width: 260px;
  max-width: 280px;
  min-width: 0;
  margin: 0 auto;
}

.gp-ds header.gp-site-header .header-search,
.gp-ds header.gp-site-header .search-container {
  background: transparent;
  box-shadow: none !important;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

/* DS's own input component (gp-components-core.css, reference doc §07):
   underline-only, no boxed border, transparent ground, thickens and turns
   gold-deep on focus — used here instead of a bespoke pill so the header
   search matches every other text field in the system. */
.gp-ds header.gp-site-header .search-input,
.gp-ds header.gp-site-header .search-input-floating,
.gp-ds header.gp-site-header .search-input:focus,
.gp-ds header.gp-site-header .search-input.focused {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 36px;
  height: 36px;
  border: none !important;
  border-bottom: 1.5px solid var(--gp-border-strong) !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--gp-fg) !important;
  font-family: var(--gp-font-body);
  font-size: 13.5px;
  padding: 0 4px 0 26px !important;
  opacity: 1 !important;
  margin: 0 !important;
  line-height: 36px !important;
  letter-spacing: 0;
  word-spacing: 0.12em;
  transition: border-color var(--gp-dur-fast) var(--gp-ease-out), border-bottom-width var(--gp-dur-fast) var(--gp-ease-out) !important;
}

.gp-ds header.gp-site-header .search-input::placeholder,
.gp-ds header.gp-site-header .search-input-floating::placeholder,
.gp-ds header.gp-site-header .search-input::-webkit-input-placeholder,
.gp-ds header.gp-site-header .search-input-floating::-webkit-input-placeholder {
  color: var(--gp-fg-muted) !important;
  opacity: 1;
}

.gp-ds header.gp-site-header .search-input:focus,
.gp-ds header.gp-site-header .search-input-floating:focus {
  border-bottom-color: var(--gp-gold-deep) !important;
  border-bottom-width: 2px !important;
  outline: none;
  box-shadow: none;
}

.gp-ds header.gp-site-header .header-search-icon {
  left: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gp-fg-muted) !important;
  z-index: 2;
}

.gp-ds header.gp-site-header .header-search-icon svg,
.gp-ds header.gp-site-header .menu_pro_cart_tgl svg,
.gp-ds header.gp-site-header .menu_wisth_tgl svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 !important;
}

.gp-ds header.gp-site-header .header-search-icon svg,
.gp-ds header.gp-site-header .header-search-icon svg path,
.gp-ds header.gp-site-header .menu_pro_cart_tgl svg,
.gp-ds header.gp-site-header .menu_pro_cart_tgl svg path,
.gp-ds header.gp-site-header .menu_wisth_tgl svg,
.gp-ds header.gp-site-header .menu_wisth_tgl svg path {
  fill: currentColor !important;
}

/* Right actions */
.gp-ds header.gp-site-header .right-menubar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 36px;
  margin-left: auto !important;
}

.gp-ds header.gp-site-header .right-menubar>* {
  margin: 0 !important;
}

.gp-ds header.gp-site-header .right-menubar a,
.gp-ds header.gp-site-header .menubar .right-menubar a {
  margin-top: 0 !important;
}

.gp-ds header.gp-site-header .right-menubar i,
.gp-ds header.gp-site-header .menubar .right-menubar i {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1;
}

.gp-ds header.gp-site-header .right-menubar>li {
  display: none;
}

.gp-ds header.gp-site-header .wisth_tgl_2div>a,
.gp-ds header.gp-site-header .menu_pro_cart_tgl,
.gp-ds header.gp-site-header .menu_wisth_tgl {
  width: 36px;
  height: 36px;
  border-radius: var(--gp-radius);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gp-fg);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0;
}

.gp-ds header.gp-site-header .wisth_tgl_2div>a:hover,
.gp-ds header.gp-site-header .menu_pro_cart_tgl:hover {
  background: var(--gp-paper);
}

.gp-ds header.gp-site-header .wisth_tgl_div,
.gp-ds header.gp-site-header .menu_pro_tgl_div {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.gp-ds header.gp-site-header .wish,
.gp-ds header.gp-site-header .wisth_tgl_2div,
.gp-ds header.gp-site-header .wisth_tgl_2div.wish,
.gp-ds header.gp-site-header .menu_pro_tgl-2div {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  height: 36px;
}

.gp-ds header.gp-site-header .menu_number {
  background: var(--gp-secondary);
  color: var(--gp-on-primary);
  font-family: var(--gp-font-head);
  font-weight: 800;
  font-size: 10px;
}

.gp-ds header.gp-site-header .menu_pro_wish,
.gp-ds header.gp-site-header .menu_pro_tgl_bg {
  background: var(--gp-surface) !important;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow-card);
  color: var(--gp-fg);
}

.gp-ds header.gp-site-header .menu_pro_wish::after {
  background-color: var(--gp-surface) !important;
  box-shadow: none;
}

.gp-ds header.gp-site-header .menu_pro_wish .menu_pro_wish-flex .text h4,
.gp-ds header.gp-site-header .menu_pro_wish h4,
.gp-ds header.gp-site-header .menu_pro_wish:hover .text h4,
.gp-ds header.gp-site-header .menu_pro_wish a:not(.btn) {
  color: var(--gp-fg) !important;
  letter-spacing: 0;
  word-spacing: 0.12em;
}

.gp-ds header.gp-site-header .menu_pro_wish .menu_pro_wish-flex .text p,
.gp-ds header.gp-site-header .menu_pro_wish:hover .text p,
.gp-ds header.gp-site-header .menu_pro_wish .text-muted,
.gp-ds header.gp-site-header .menu_pro_wish .text-secondary,
.gp-ds header.gp-site-header .menu_pro_wish small {
  color: var(--gp-fg-muted) !important;
  letter-spacing: 0;
  word-spacing: 0.12em;
}

.gp-ds header.gp-site-header .menu_pro_wish-flex .spandiv span {
  color: var(--gp-fg) !important;
}

.gp-ds header.gp-site-header .menu_pro_wish-flex .spandiv del {
  color: var(--gp-fg-faint) !important;
}

.gp-ds header.gp-site-header .menu_pro_wish-f-b {
  border-bottom-color: var(--gp-border) !important;
}

.gp-ds header.gp-site-header .wisth_tgl_2div:hover .menu_pro_wish,
.gp-ds header.gp-site-header .menu_pro_wish:hover,
.gp-ds header.gp-site-header .menu_pro_tgl_bg:hover {
  background: var(--gp-surface) !important;
  color: var(--gp-fg) !important;
}

.gp-ds header.gp-site-header .menu_pro_wish-f-b:hover,
.gp-ds header.gp-site-header .menu_pro_wish .path_pos_wish-2:hover,
.gp-ds header.gp-site-header .menu_pro_wish a.checkPropagation:hover,
.gp-ds header.gp-site-header .notify-item:hover {
  background: var(--gp-surface-sunk) !important;
  color: var(--gp-fg) !important;
}

.gp-ds header.gp-site-header .menu_pro_wish-f-b:hover h4,
.gp-ds header.gp-site-header .menu_pro_wish-f-b:hover .text h4,
.gp-ds header.gp-site-header .menu_pro_wish-f-b:hover a,
.gp-ds header.gp-site-header .menu_pro_wish-f-b:hover span,
.gp-ds header.gp-site-header .menu_pro_wish:hover .text h4 {
  color: var(--gp-fg) !important;
}

.gp-ds header.gp-site-header .menu_pro_wish-f-b:hover p,
.gp-ds header.gp-site-header .menu_pro_wish:hover .text p {
  color: var(--gp-fg-muted) !important;
}

.gp-ds header.gp-site-header .menu_pro_wish .cart-minus,
.gp-ds header.gp-site-header .menu_pro_wish .cart-minus i,
.gp-ds header.gp-site-header .menu_pro_wish .fa-cart-plus,
.gp-ds header.gp-site-header .menu_pro_wish .fa-minus-circle {
  color: var(--gp-fg-muted) !important;
}

.gp-ds header.gp-site-header .notify-icon {
  background: var(--gp-surface-sunk) !important;
  color: var(--gp-fg-muted);
}

.gp-ds header.gp-site-header .notify-item {
  color: var(--gp-fg);
}

.gp-ds header.gp-site-header .notify-item.unread {
  background: var(--gp-surface-sunk);
}

.gp-ds header.gp-site-header .notify-details,
.gp-ds header.gp-site-header .notify-item .user-msg,
.gp-ds header.gp-site-header .notify-item .text-muted {
  color: var(--gp-fg-muted) !important;
}

.gp-ds header.gp-site-header .notify-details {
  color: var(--gp-fg) !important;
}

.gp-ds header.gp-site-header .menu_pro_btn .btn,
.gp-ds header.gp-site-header .menu_pro_btn a.btn {
  color: var(--gp-on-primary) !important;
  text-transform: none !important;
  letter-spacing: 0.02em;
  word-spacing: 0.16em;
}

/* Profile-dropdown SVG icons ship with a hardcoded #99A1B7 stroke/fill in the
   markup (28 occurrences) — repoint to the DS muted-text token instead of
   editing every inline SVG, so it follows dark mode like everything else. */
.gp-ds header.gp-site-header .user-dropdown-menu-item svg [stroke="#99A1B7"] {
  stroke: var(--gp-fg-muted);
}
.gp-ds header.gp-site-header .user-dropdown-menu-item svg [fill="#99A1B7"] {
  fill: var(--gp-fg-muted);
}

.gp-ds header.gp-site-header .menu_pro_tgl img,
.gp-ds header.gp-site-header .profile-dropdown img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gp-border);
}

.gp-ds header.gp-site-header .gp-login-link {
  font-family: var(--gp-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--gp-fg);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 4px;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.gp-ds header.gp-site-header .gp-login-link:hover {
  color: var(--gp-blue-solid);
}

.gp-ds header.gp-site-header .right-menubar .btn-primary,
.gp-ds header.gp-site-header .right-menubar .ctBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 0 20px !important;
  margin: 0 !important;
  font-family: var(--gp-font-head);
  font-size: 12px;
  font-weight: 800;
  line-height: 1 !important;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--gp-primary) !important;
  border: 2px solid var(--gp-primary) !important;
  color: var(--gp-on-primary) !important;
  border-radius: var(--gp-radius) !important;
}

.gp-ds header.gp-site-header .right-menubar .btn-primary:hover,
.gp-ds header.gp-site-header .right-menubar .ctBtn:hover {
  background: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
  color: var(--gp-on-primary) !important;
}

.gp-ds header.gp-site-header .gp-header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 36px;
}

@media (max-width: 1199px) {
  .gp-ds header.gp-site-header .gp-header-tools .gp-lang-dropdown {
    display: none;
  }
}

/* Language switcher — plain DS dropdown component (gp-dropdown.css), not
   the jQuery nice-select plugin skinned to look like one. Matches the
   quiet, transparent-until-hover treatment of the theme-toggle pill and
   cart/wishlist icons right next to it, instead of a filled surface-sunk
   chip that reads as a form input rather than a header nav control. */
.gp-ds header.gp-site-header .gp-lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px !important;
  max-width: 124px;
  background: transparent !important;
  color: var(--gp-fg) !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 999px !important;
  font-family: var(--gp-font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--gp-dur-fast) var(--gp-ease-out);
}

.gp-ds header.gp-site-header .gp-lang-toggle:hover {
  background: var(--gp-paper) !important;
}

.gp-ds header.gp-site-header .gp-lang-toggle svg {
  flex-shrink: 0;
  color: var(--gp-fg-muted);
}

.gp-ds header.gp-site-header .gp-lang-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gp-ds header.gp-site-header .gp-lang-toggle::after {
  margin-left: auto;
  flex-shrink: 0;
}

.gp-ds header.gp-site-header .gp-lang-menu {
  min-width: 170px;
  max-height: 320px;
  overflow-y: auto;
}

/* Plain DS dropdown list (see reference/geeseprojdesignsystem.html §17) —
   hover-only, no solid-fill "active" state. The current language gets a
   checkmark instead of gp-dropdown.css's .active fill, which reads as a
   giant colored block when (as here) there's only one item in the list. */
.gp-ds header.gp-site-header .gp-lang-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gp-ds header.gp-site-header .gp-lang-item-current {
  color: var(--gp-primary) !important;
  font-weight: 700;
}

.gp-ds header.gp-site-header .gp-lang-item-current svg {
  flex-shrink: 0;
  color: var(--gp-primary);
}

.gp-ds header.gp-site-header .gp-theme-row,

.gp-ds footer.gp-site-footer .gp-theme-row {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gp-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
  height: 36px;
  box-sizing: border-box;
}

.gp-ds header.gp-site-header .gp-theme-btn,

.gp-ds footer.gp-site-footer .gp-theme-btn {
  border: none;
  background: transparent;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px;
  color: var(--gp-fg-muted);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
}

.gp-ds header.gp-site-header .gp-theme-btn svg,

.gp-ds footer.gp-site-footer .gp-theme-btn svg {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gp-ds header.gp-site-header .gp-theme-btn.active,

.gp-ds footer.gp-site-footer .gp-theme-btn.active {
  background: var(--gp-primary);
  color: var(--gp-on-primary);
  border-color: transparent;
}

/* Dark header: keep language, cart, login, and theme readable.
   Search needs no override here — the underline field (base rule above) is
   transparent with theme-aware tokens throughout, so it already adapts. */
.gp-ds[data-theme="dark"] header.gp-site-header .search-input::placeholder,
.gp-ds[data-theme="dark"] header.gp-site-header .search-input-floating::placeholder,
.gp-ds[data-theme="dark"] header.gp-site-header .search-input::-webkit-input-placeholder,
.gp-ds[data-theme="dark"] header.gp-site-header .search-input-floating::-webkit-input-placeholder {
  color: var(--gp-fg-muted) !important;
}

.gp-ds[data-theme="dark"] header.gp-site-header .header-search-icon,
.gp-ds[data-theme="dark"] header.gp-site-header .menu_pro_cart_tgl,
.gp-ds[data-theme="dark"] header.gp-site-header .menu_wisth_tgl,
.gp-ds[data-theme="dark"] header.gp-site-header .wisth_tgl_2div>a,
.gp-ds[data-theme="dark"] header.gp-site-header .gp-login-link,
.gp-ds[data-theme="dark"] header.gp-site-header .menu-offcanves .btn-bar,
.gp-ds[data-theme="dark"] header.gp-site-header .m-search-icon,
.gp-ds[data-theme="dark"] header.gp-site-header .m-cross-icon {
  color: var(--gp-fg-muted) !important;
}

.gp-ds[data-theme="dark"] header.gp-site-header .gp-login-link:hover,
.gp-ds[data-theme="dark"] header.gp-site-header .menu_pro_cart_tgl:hover,
.gp-ds[data-theme="dark"] header.gp-site-header .wisth_tgl_2div>a:hover {
  color: var(--gp-fg) !important;
  background: var(--gp-border);
}

.gp-ds[data-theme="dark"] header.gp-site-header .gp-lang-toggle {
  background: var(--gp-border) !important;
  color: var(--gp-fg) !important;
  border-color: var(--gp-border-strong) !important;
}

.gp-ds[data-theme="dark"] header.gp-site-header .gp-theme-row,

.gp-ds[data-theme="dark"] footer.gp-site-footer .gp-theme-row {
  border-color: var(--gp-border-strong);
  background: var(--gp-border);
}

.gp-ds[data-theme="dark"] header.gp-site-header .gp-theme-btn,

.gp-ds[data-theme="dark"] footer.gp-site-footer .gp-theme-btn {
  color: var(--gp-fg-muted);
}

.gp-ds[data-theme="dark"] header.gp-site-header .gp-theme-btn.active,

.gp-ds[data-theme="dark"] footer.gp-site-footer .gp-theme-btn.active {
  background: var(--gp-primary-2);
  color: var(--gp-on-primary);
}

@media (prefers-color-scheme: dark) {

  /* Search needs no override here either — see the dark-header comment above. */

  .gp-ds[data-theme="system"] header.gp-site-header .header-search-icon,
  .gp-ds[data-theme="system"] header.gp-site-header .menu_pro_cart_tgl,
  .gp-ds[data-theme="system"] header.gp-site-header .menu_wisth_tgl,
  .gp-ds[data-theme="system"] header.gp-site-header .wisth_tgl_2div>a,
  .gp-ds[data-theme="system"] header.gp-site-header .gp-login-link {
    color: var(--gp-fg-muted) !important;
  }

  .gp-ds[data-theme="system"] header.gp-site-header .gp-lang-toggle {
    background: var(--gp-border) !important;
    color: var(--gp-fg) !important;
    border-color: var(--gp-border-strong) !important;
  }

  .gp-ds[data-theme="system"] header.gp-site-header .gp-theme-row,

  .gp-ds[data-theme="system"] footer.gp-site-footer .gp-theme-row {
    border-color: var(--gp-border-strong);
    background: var(--gp-border);
  }
}

/* Mobile offcanvas → navy drawer */
.gp-ds header.gp-site-header .mobile-view-offcanves .offcanvas {
  background: var(--gp-accent) !important;
  color: var(--gp-on-primary);
}

.gp-ds header.gp-site-header .mobile-view-offcanves .offcanvas-header,
.gp-ds header.gp-site-header .mobile-view-offcanves .offcanves-top,
.gp-ds header.gp-site-header .mobile-view-offcanves li.bg-light,
.gp-ds header.gp-site-header .mobile-view-offcanves .btn-toggle-nav {
  background: transparent !important;
}

.gp-ds header.gp-site-header .mobile-view-offcanves .btn-toggle-list,
.gp-ds header.gp-site-header .mobile-view-offcanves .btn-toggle,
.gp-ds header.gp-site-header .mobile-view-offcanves a,
.gp-ds header.gp-site-header .mobile-view-offcanves .user-details h4,
.gp-ds header.gp-site-header .mobile-view-offcanves .user-details p {
  /* Off-white, not var(--gp-fg): this drawer is a fixed --gp-accent navy panel
     in both themes, so its text needs a fixed light color too — --gp-fg would
     go near-black in light mode and disappear against the navy background. */
  color: rgba(255, 255, 255, 0.92) !important;
}

.gp-ds header.gp-site-header .mobile-view-offcanves .offcanves-btn .logIn-btn,
.gp-ds header.gp-site-header .mobile-view-offcanves .offcanves-btn .signUp-btn {
  border-radius: var(--gp-radius);
}

.gp-ds header.gp-site-header .mobile-view-offcanves .gp-header-tools {
  padding: 16px 20px 24px;
}

.gp-ds header.gp-site-header .mobile-view-offcanves .gp-theme-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gp-ds header.gp-site-header .menu-offcanves .btn-bar,
.gp-ds header.gp-site-header .m-search-icon,
.gp-ds header.gp-site-header .m-cross-icon {
  color: var(--gp-fg);
}

/* ---- Responsive shell (≤991px) — Phase 1 of the responsive remediation ----
   Each rule below counters a recorded legacy conflict (baseline 2026-09-22). */

/* style.css `.m-cross-icon, .m-search-icon` keep the old purple border and
   `.search-item span:hover` the same purple fill. */
.gp-ds header.gp-site-header .m-search-icon,
.gp-ds header.gp-site-header .m-cross-icon {
  border-color: var(--gp-border-strong);
  border-radius: var(--gp-radius);
}

.gp-ds header.gp-site-header .search-item span:hover {
  background: var(--gp-surface-sunk);
  color: var(--gp-fg);
}

/* style.css `.inline-form .mobile-search` is a transparent, left-anchored
   overlay (z-index raised by responsive.css); give it a DS surface so the
   search field does not float over page text. */
@media (max-width: 991px) {
  /* style.css `.inline-form` is an absolutely positioned wrapper (left: -13px) and
     `.inline-form .mobile-search` adds margin-left: -20px, so the overlay started 33px
     left of the screen and ended 33px short of the right edge (hero showed through).
     The wrapper only holds the overlay, so take it out of positioning and let the
     overlay anchor to the full-width navbar instead. */
  .gp-ds header.gp-site-header .inline-form {
    position: static;
    margin: 0;
  }

  /* Once static, the (empty) open form became a third flex item in the header row and, with
     `justify-content: space-between`, pushed the close and menu buttons toward the logo whenever
     search was opened. `display: contents` takes the form's own box out of the row while its
     overlay child still anchors to the navbar; legacy `.inline-form { display: none }` still hides
     it when search is closed. */
  .gp-ds header.gp-site-header .inline-form.active {
    display: contents;
  }

  .gp-ds header.gp-site-header .inline-form .mobile-search {
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    /* responsive.css raises this to 2147483647, which put the open search panel on top
       of the navigation drawer (Bootstrap offcanvas z-index 1045). */
    z-index: 1030;
    background: var(--gp-surface);
    border-bottom: 1px solid var(--gp-border);
    box-shadow: var(--gp-shadow-card);
  }
}

/* Drawer auth buttons: style.css `.signUp-btn` (var(--color-4) purple) and
   `.logIn-btn` (var(--bg-white-2) fill) combined with the drawer's forced
   white text left "Login" white-on-near-white. The drawer is a fixed navy
   panel in both themes, so use fixed-contrast tokens. */
.gp-ds header.gp-site-header .mobile-view-offcanves .offcanves-btn .signUp-btn {
  background: var(--gp-on-primary);
  /* !important counters style.css `.signUp-btn { color: var(--color-9) !important }` */
  color: var(--gp-accent) !important;
}

.gp-ds header.gp-site-header .mobile-view-offcanves .offcanves-btn .logIn-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
}

/* Logged-in drawer header: style.css `.offcanves-profile` keeps a light grey fill
   (var(--hover-color)) while the drawer forces the name and email to white, so in light
   mode they were white on near-white. The drawer is a fixed navy panel in both themes;
   let the profile block sit on it like the rest of the drawer. */
.gp-ds header.gp-site-header .mobile-view-offcanves .offcanves-profile {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* custom.css `.btn-toggle::after` draws a rgba(0,0,0,.5) chevron SVG — near
   invisible on the navy drawer. Invert it rather than re-drawing the icon. */
.gp-ds header.gp-site-header .mobile-view-offcanves .btn-toggle::after {
  filter: invert(1);
}

/* Phone search field = the desktop header field: same underline input, same magnifier on
   the left, same type and placeholder (mirrors `.search-input` / `.header-search-icon`
   above), instead of a filled pill with a blue button. style.css also gives
   `.inline-form .form-control` `margin: 0 27px` and `.inline-form .search-btn`
   `right: 5px` / `width: 41px`, both tuned for the old shifted overlay. The submit
   button and Enter still submit the same form. */
.gp-ds header.gp-site-header .inline-form .form-control {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  height: 36px;
  margin: 0;
  border: none !important;
  border-bottom: 1.5px solid var(--gp-border-strong) !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--gp-fg) !important;
  font-family: var(--gp-font-body);
  font-size: 13.5px;
  line-height: 36px;
  letter-spacing: 0;
  word-spacing: 0.12em;
  padding: 0 4px 0 26px !important;
  box-shadow: none;
}

.gp-ds header.gp-site-header .inline-form .form-control::placeholder {
  color: var(--gp-fg-muted) !important;
  opacity: 1;
}

.gp-ds header.gp-site-header .inline-form .form-control:focus {
  border-bottom-color: var(--gp-gold-deep) !important;
  border-bottom-width: 2px !important;
  outline: none;
  box-shadow: none;
}

.gp-ds header.gp-site-header .inline-form .search-btn {
  left: 22px; /* panel padding (20px) + 2px, like the desktop icon's left: 2px */
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--gp-fg-muted) !important;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Draw the desktop icon (same outline magnifier) instead of the Font Awesome glyph. */
.gp-ds header.gp-site-header .inline-form .search-btn i {
  display: none;
}

.gp-ds header.gp-site-header .inline-form .search-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M8.625 16.3125C4.3875 16.3125 0.9375 12.8625 0.9375 8.62496C0.9375 4.38746 4.3875 0.937458 8.625 0.937458C12.8625 0.937458 16.3125 4.38746 16.3125 8.62496C16.3125 12.8625 12.8625 16.3125 8.625 16.3125ZM8.625 2.06246C5.0025 2.06246 2.0625 5.00996 2.0625 8.62496C2.0625 12.24 5.0025 15.1875 8.625 15.1875C12.2475 15.1875 15.1875 12.24 15.1875 8.62496C15.1875 5.00996 12.2475 2.06246 8.625 2.06246Z'/%3E%3Cpath d='M16.4991 17.0625C16.3566 17.0625 16.2141 17.01 16.1016 16.8975L13.4991 14.2951C13.2816 14.0776 13.2816 13.7176 13.4991 13.5001C13.7166 13.2826 14.0766 13.2826 14.2941 13.5001L16.8966 16.1025C17.1141 16.32 17.1141 16.68 16.8966 16.8975C16.7841 17.01 16.6416 17.0625 16.4991 17.0625Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M8.625 16.3125C4.3875 16.3125 0.9375 12.8625 0.9375 8.62496C0.9375 4.38746 4.3875 0.937458 8.625 0.937458C12.8625 0.937458 16.3125 4.38746 16.3125 8.62496C16.3125 12.8625 12.8625 16.3125 8.625 16.3125ZM8.625 2.06246C5.0025 2.06246 2.0625 5.00996 2.0625 8.62496C2.0625 12.24 5.0025 15.1875 8.625 15.1875C12.2475 15.1875 15.1875 12.24 15.1875 8.62496C15.1875 5.00996 12.2475 2.06246 8.625 2.06246Z'/%3E%3Cpath d='M16.4991 17.0625C16.3566 17.0625 16.2141 17.01 16.1016 16.8975L13.4991 14.2951C13.2816 14.0776 13.2816 13.7176 13.4991 13.5001C13.7166 13.2826 14.0766 13.2826 14.2941 13.5001L16.8966 16.1025C17.1141 16.32 17.1141 16.68 16.8966 16.8975C16.7841 17.01 16.6416 17.0625 16.4991 17.0625Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ========== Page header / breadcrumb band (shared by ~29 inner pages) ========== */
/* Replaces the old .bread-crumb purple-pattern banner + decorative book image.
   breadcrumb.php is included by many pages, some already DS, some not (see
   the coverage audit) — keep this purely token-driven so it looks correct
   regardless of what the rest of the page looks like yet. */
.gp-ds .gp-page-header {
  background: var(--gp-paper);
  border-bottom: 1px solid var(--gp-border);
  padding-block: 28px;
}

.gp-ds .gp-page-header .breadcrumb {
  margin-bottom: 10px;
}

.gp-ds .gp-page-header-title {
  font-family: var(--gp-font-head);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--gp-fg);
  margin: 0;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}

/* ========== Cookie consent banner (site-wide, included on every page) ========== */
/* Replaces purecookie.css's .cookieConsentContainer with a plain DS card.
   JS hook (#cookieConsentContainer, cookieAccept()) is untouched — this is
   a pure restyle, still hidden by default and faded in/out by the same
   inline script. */
.gp-ds .gp-cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  max-width: 640px;
  margin-inline: auto;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow-card);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gp-ds .gp-cookie-banner-desc {
  flex: 1 1 320px;
}

.gp-ds .gp-cookie-banner-desc p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gp-fg-muted);
}

.gp-ds .gp-cookie-banner-link {
  color: var(--gp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.gp-ds .gp-cookie-banner-actions {
  flex: 0 0 auto;
}

.gp-ds .gp-cookie-banner-btn {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .gp-ds .gp-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px;
  }
}

/* ========== Footer (DS paper grid — keep all admin-driven blocks) ========== */
.gp-ds footer.gp-site-footer,
.gp-ds footer.lms2-footer-section.gp-site-footer {
  background: var(--gp-paper);
  color: var(--gp-fg-muted);
  padding: 72px 0 0;
  border-top: 1px solid var(--gp-border);
  overflow: visible;
  position: relative;
  z-index: 1;
}

.gp-ds footer.gp-site-footer::after {
  display: none !important;
}

.gp-ds footer.gp-site-footer>.container {
  max-width: 1240px;
}

.gp-ds footer.gp-site-footer .gp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.35fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1024px) {
  .gp-ds footer.gp-site-footer .gp-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .gp-ds footer.gp-site-footer .gp-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.gp-ds footer.gp-site-footer .gp-footer-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}

.gp-ds footer.gp-site-footer .gp-footer-brand p,
.gp-ds footer.gp-site-footer .gp-footer-note {
  font-family: var(--gp-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gp-fg-muted);
  max-width: 280px;
}

.gp-ds footer.gp-site-footer .gp-footer-brand span {
  display: block;
  font-family: var(--gp-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gp-fg);
  margin-top: 8px;
}

.gp-ds footer.gp-site-footer .gp-footer-brand span a {
  color: var(--gp-fg);
}

.gp-ds footer.gp-site-footer h4,
.gp-ds footer.gp-site-footer .ft2-title {
  font-family: var(--gp-font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gp-secondary);
  margin: 0 0 18px;
}

.gp-ds[data-theme="dark"] footer.gp-site-footer h4,
.gp-ds[data-theme="dark"] footer.gp-site-footer .ft2-title {
  color: var(--gp-gold-light);
}

.gp-ds footer.gp-site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gp-ds footer.gp-site-footer ul li {
  margin-bottom: 12px;
}

.gp-ds footer.gp-site-footer a,
.gp-ds footer.gp-site-footer .ft2-nav-link {
  font-family: var(--gp-font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gp-fg-muted);
  text-decoration: none;
  transition: color var(--gp-dur-fast) var(--gp-ease-out);
}

.gp-ds footer.gp-site-footer a:hover,
.gp-ds footer.gp-site-footer .ft2-nav-link:hover {
  color: var(--gp-primary);
  padding-left: 0 !important;
}

.gp-ds footer.gp-site-footer .gp-footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.gp-ds footer.gp-site-footer .gp-footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: var(--gp-radius);
  border: 1.5px solid var(--gp-border);
  background: var(--gp-surface);
  color: var(--gp-fg) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gp-ds footer.gp-site-footer .gp-footer-socials a i,
.gp-ds footer.gp-site-footer .gp-footer-socials a svg {
  color: inherit;
  fill: currentColor;
}

.gp-ds footer.gp-site-footer .gp-footer-socials a:hover {
  background: var(--gp-primary);
  border-color: var(--gp-primary);
  color: var(--gp-on-primary) !important;
  padding-left: 0 !important;
}

.gp-ds footer.gp-site-footer .gp-footer-subscribe h4 {
  margin-bottom: 14px;
}

.gp-ds footer.gp-site-footer .ft2-subscribe-wrap {
  background: transparent;
  padding: 0;
}

.gp-ds footer.gp-site-footer .gp-foot-subscribe {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 0;
  position: relative;
}

.gp-ds footer.gp-site-footer .gp-foot-subscribe .form-control,
.gp-ds footer.gp-site-footer .ft2-newsLetter-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  border: 1.5px solid var(--gp-border-strong) !important;
  background: var(--gp-surface) !important;
  border-radius: var(--gp-radius) !important;
  padding: 10px 12px !important;
  color: var(--gp-fg) !important;
  font-family: var(--gp-font-body);
  font-size: 13.5px;
}

.gp-ds footer.gp-site-footer .gp-foot-subscribe .form-control::placeholder,
.gp-ds footer.gp-site-footer .ft2-newsLetter-input::placeholder {
  color: var(--gp-fg-muted) !important;
}

.gp-ds footer.gp-site-footer .ft2-newsLetter-btn {
  position: static !important;
  right: auto !important;
  top: auto !important;
  flex: 0 0 auto;
  height: 42px;
  background: var(--gp-primary) !important;
  border: 2px solid var(--gp-primary) !important;
  color: var(--gp-on-primary) !important;
  border-radius: var(--gp-radius) !important;
  padding: 0 16px !important;
  font-family: var(--gp-font-head);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.32px;
}

.gp-ds footer.gp-site-footer .ft2-newsLetter-btn:hover {
  background: var(--gp-accent) !important;
  border-color: var(--gp-accent) !important;
}

.gp-ds footer.gp-site-footer .gp-footer-bottom {
  border-top: 1px solid var(--gp-border);
  margin-top: 56px;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gp-fg-faint);
}

.gp-ds footer.gp-site-footer .gp-footer-theme {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.gp-ds footer.gp-site-footer .gp-footer-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.gp-ds footer.gp-site-footer .gp-footer-legal a {
  color: var(--gp-fg-muted);
  font-size: 13px;
}

.gp-ds footer.gp-site-footer .gp-footer-legal a:hover {
  color: var(--gp-primary);
  padding-left: 0 !important;
}