/* =====================================================================
   SULO Group – page frame
   Header, mega menu, section bar, pager, footer, language overlay, toast, lists.
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*); the short names below are aliases.
   Content styles shared with the editor: content.css. Block styles: plugin sulogroup-blocks (per block).
   ===================================================================== */
:root {
  --sg-teal: var(--wp--preset--color--teal);
  --sg-teal-dark: var(--wp--preset--color--teal-dark);
  --sg-teal-pale: var(--wp--preset--color--teal-pale);
  --sg-teal-wash: var(--wp--custom--teal-wash);
  --sg-mint: var(--wp--preset--color--mint);
  --sg-cream: var(--wp--preset--color--cream);
  --sg-grey: var(--wp--preset--color--grey);
  --sg-white: var(--wp--preset--color--white);
  --sg-ink: var(--wp--preset--color--ink);
  --sg-body: var(--wp--custom--body);
  --sg-muted: var(--wp--custom--muted);
  --sg-line: var(--wp--custom--line);
  --sg-font: var(--wp--preset--font-family--open-sans);
  --sg-gutter: max(24px, env(safe-area-inset-left, 0px));
  --sg-gutter-right: max(24px, env(safe-area-inset-right, 0px));
  --sg-page-width: 1360px; /* header, footer and .wrap: content lines up with logo and language button */
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; }
.sg-wrap {
  max-width: var(--sg-page-width);
  margin: 0 auto;
  padding-left: var(--sg-gutter);
  padding-right: var(--sg-gutter-right);
}
img { max-width: 100%; height: auto; }

/* Small design elements used by the frame and the templates (the blocks bring their own) */
.sg-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-teal);
  margin: 0 0 16px;
}
.sg-eyebrow::before {
  content: "";
  width: 30px;
  height: 1.5px;
  background: currentColor;
}
.sg-lead {
  color: var(--sg-teal);
  font-size: var(--wp--preset--font-size--l);
  line-height: 1.38;
  font-weight: 300;
}
.sg-btn {
  display: inline-block;
  background: var(--sg-teal);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 12px 20px;
  text-decoration: none;
  border: 1.5px solid var(--sg-teal);
  width: fit-content;
  cursor: pointer;
}
.sg-btn.sg-btn--ghost {
  background: transparent;
  color: var(--sg-ink);
  border-color: var(--sg-ink);
}
.sg-link {
  color: var(--sg-teal);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}
.sg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.sg-logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}

/* ===== Motion & polish ===== */
:root {
  --sg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sg-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --sg-ease-quint: cubic-bezier(0.16, 1, 0.3, 1);
}
::selection { background: var(--sg-teal-wash); color: var(--sg-ink); }
html { scrollbar-color: var(--sg-teal-pale) var(--sg-grey); scrollbar-width: thin; }
input, textarea { caret-color: var(--sg-teal); }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--sg-teal); outline-offset: 3px; }

/* buttons & links: feedback */
.sg-btn { transition: transform 160ms var(--sg-ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.sg-btn:active { transform: scale(.97); }
.sg-link .sg-arrow { display: inline-block; transition: transform 220ms var(--sg-ease-out); }
@media (hover:hover) and (pointer:fine) {
  .sg-btn:hover { background: var(--sg-teal-dark); border-color: var(--sg-teal-dark); }
  .sg-btn.sg-btn--ghost:hover { background: var(--sg-ink); color: #fff; }
  .sg-link:hover .sg-arrow { transform: translateX(4px); }
}
.ico { transition: transform 260ms var(--sg-ease-out); }

.sg-postgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}
.sg-postcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sg-postcard__image {
  aspect-ratio: 3/2;
  background: var(--sg-mint);
  overflow: hidden;
}
.sg-postcard__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--sg-ease-out);
}
.sg-postcard h3 { margin: 0; }
.sg-postcard p { margin: 0; }
.sg-postcard .sg-postcard__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--sg-muted);
}
.sg-postcard .sg-postcard__cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sg-teal);
}
.sg-postcard h3 {
  font-size: 17px;
  line-height: 1.35;
  transition: color 200ms ease;
}
.sg-postcard p { font-size: 14px; }
.sg-postcard .sg-link { margin-top: 2px; }
@media (hover:hover) and (pointer:fine) {
  .sg-postcard:hover h3 { color: var(--sg-teal); }
  .sg-postcard:hover .sg-arrow { transform: translateX(4px); }
  .sg-postcard:hover .sg-postcard__image img { transform: scale(1.03); }
}
.sg-postcard[hidden] { display: none !important; }
@media (max-width:900px) {
  .sg-postgrid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
}
@media (max-width:480px) {
  .sg-postgrid { grid-template-columns: 1fr; }
}
.sg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =====================================================================
   SITE SHELL — header, mega menu, language overlay, sub-navigation, pager, footer, toast, home, articles, legal pages
   ===================================================================== */
html { scroll-padding-top: 184px; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* long words (Dutch / German compounds, product names) wrap everywhere – menus, slider, tiles, buttons –
     instead of running out of their box; hyphenation follows the lang of <html> */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 3;
}
:is(pre, code, kbd, samp, input, textarea, select) { -webkit-hyphens: manual; hyphens: manual; }
.sg-main { flex: 1; }
.sg-skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--sg-teal);
  color: #fff;
  padding: 10px 16px;
  font-weight: 700;
}
.sg-skip:focus { left: 8px; }

/* ---------- header ---------- */
.sg-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--sg-line);
  transition: box-shadow 240ms ease;
}
.sg-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(21, 26, 25, .45); }
.sg-header__inner {
  display: flex;
  align-items: stretch;
  height: 110px;
  max-width: 1360px;
  margin: 0 auto;
  padding-left: var(--sg-gutter);
  padding-right: var(--sg-gutter-right);
}
.sg-header .sg-logo {
  justify-content: center;
  padding-right: 36px;
  flex-shrink: 0;
}
/* every logo (uploaded or backup) fits a box: fixed height, width up to --sg-logo-w; wide logos shrink in
   proportion (object-fit) instead of growing to their full width */
.sg-logo img {
  max-width: var(--sg-logo-w);
  object-fit: contain;
  object-position: left center;
}
.sg-header .sg-logo img {
  --sg-logo-w: 240px;
  height: 65px;
  width: auto;
  display: block;
}
.sg-header .sg-logo img.sg-logo--shop { width: 200px; height: auto; }
.sg-header .sg-logo b { font-size: 25px; }
.sg-header .sg-logo b span { font-size: 20px; }
.sg-header .sg-logo small { font-size: 7.8px; }
.sg-nav {
  display: flex;
  flex: 1;
  min-width: 0;
}
.sg-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}
.sg-nav__item { display: flex; }
.sg-nav__button {
  font: inherit;
  font-size: 16px;
  color: var(--sg-ink);
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  position: relative;
  white-space: nowrap;
  transition: color 200ms ease;
}
.sg-nav__button svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 240ms var(--sg-ease-out);
}
.sg-nav__button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: var(--sg-teal);
  transform: scaleX(0);
  transition: transform 260ms var(--sg-ease-out);
}
.sg-nav__item.on > .sg-nav__button, .sg-nav__button[aria-expanded="true"] { color: var(--sg-teal); }
.sg-nav__item.on > .sg-nav__button::after { transform: scaleX(1); }
.sg-nav__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.sg-nav__button:focus-visible, .sg-lang__button:focus-visible, .sg-nav__toggle:focus-visible { outline: 2px solid var(--sg-teal); outline-offset: -4px; }
@media (hover:hover) and (pointer:fine) {
  .sg-nav__button:hover { color: var(--sg-teal); }
}
.sg-header__tools {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}
.sg-lang__button {
  font: inherit;
  font-size: 15px;
  color: var(--sg-ink);
  background: none;
  border: 0;
  border-left: 1.5px solid var(--sg-teal);
  padding: 4px 0 4px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.sg-lang__button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}
.sg-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  margin-left: 4px;
}
.sg-nav__toggle i {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--sg-ink);
  transition: transform 260ms var(--sg-ease-out), opacity 200ms ease;
}
.sg-nav__toggle i:nth-child(1) { top: 15px; }
.sg-nav__toggle i:nth-child(2) { top: 21px; }
.sg-nav__toggle i:nth-child(3) { top: 27px; }
.sg-header.open .sg-nav__toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sg-header.open .sg-nav__toggle i:nth-child(2) { opacity: 0; }
.sg-header.open .sg-nav__toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- mega menu ---------- */
.sg-megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--sg-teal);
  box-shadow: 0 24px 40px -30px rgba(21, 26, 25, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 240ms var(--sg-ease-out), visibility 0s linear 240ms;
}
.sg-megamenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 200ms ease, transform 240ms var(--sg-ease-out), visibility 0s;
}
.sg-megamenu__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 30px var(--sg-gutter-right) 40px var(--sg-gutter);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.15fr .9fr;
  gap: 56px;
}
.sg-megamenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-megamenu__list a {
  display: flex;
  align-items: center;
  padding: 15px 0;
  font-size: 16px;
  color: var(--sg-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, padding 220ms var(--sg-ease-out);
}
.sg-megamenu__list a .sg-arrow {
  color: var(--sg-teal);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 220ms var(--sg-ease-out);
}
.sg-megamenu__list a[aria-current="page"],
.sg-megamenu__list li.is-current-parent > a { color: var(--sg-teal); font-weight: 600; } /* current page, or the category of the current product */
@media (hover:hover) and (pointer:fine) {
  .sg-megamenu__list a:hover { color: var(--sg-teal); padding-left: 6px; }
  .sg-megamenu__list a:hover .sg-arrow { opacity: 1; transform: none; }
}
.sg-megamenu__intro {
  border-left: 1px solid var(--sg-line);
  padding-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 12px;
}
.sg-megamenu__intro h3 { font-size: 24px; line-height: 1.2; }
.sg-megamenu__intro p { font-size: 14.5px; max-width: 46ch; }
.sg-megamenu__intro .sg-megamenu__all { align-self: flex-start; margin-top: 2px; }
.sg-megamenu__inner:not(.has-sub) > .sg-megamenu__card { align-self: start; }
.sg-megamenu__card {
  position: relative; /* holds the AI label (shop menus: absolute, set further down) */
  background: var(--sg-mint);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--sg-body);
  align-self: start;
  margin-top: 12px;
  transition: transform 220ms var(--sg-ease-out), box-shadow 220ms ease;
}
.sg-megamenu__card .sg-megamenu__card-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-teal);
}
.sg-megamenu__card .sg-megamenu__card-number {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--sg-teal);
  font-variant-numeric: tabular-nums;
}
.sg-megamenu__card b { color: var(--sg-ink); font-size: 15px; }
.sg-megamenu__card span { font-size: 13.5px; }
@media (hover:hover) and (pointer:fine) {
  .sg-megamenu__card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(14, 110, 100, .6); }
}
.sg-scrim {
  position: fixed;
  inset: 0;
  background: rgba(21, 26, 25, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.sg-scrim.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 0s;
}

/* ---------- sub navigation (section pages) ---------- */
.sg-subnav {
  background: var(--sg-grey);
  position: sticky;
  top: 76px; /* header height after scrolling */
}
.admin-bar .sg-subnav { top: 108px; }
.sg-subnav[hidden] { display: none; }
.sg-subnav .sg-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-block: 8px;
  max-width: 1360px;
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.sg-subnav .sg-wrap::-webkit-scrollbar { display: none; }
.sg-subnav .sg-subnav__section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-ink);
  padding: 9px 18px 9px 0;
  margin-right: 8px;
  border-right: 1px solid #d6dcda;
  white-space: nowrap;
  text-decoration: none;
}
.sg-subnav a.sg-subnav__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-muted);
  padding: 9px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
.sg-subnav a.sg-subnav__link[aria-current="page"] { color: var(--sg-teal); }
@media (hover:hover) and (pointer:fine) {
  .sg-subnav a.sg-subnav__link:hover { color: var(--sg-ink); }
}
.sg-subnav .sg-subnav__indicator {
  position: absolute;
  left: 0;
  bottom: 8px;
  height: 2px;
  width: 100px;
  background: var(--sg-teal);
  transform-origin: left;
  transition: transform 380ms var(--sg-ease-out);
  pointer-events: none;
}

/* ---------- pager ---------- */
.sg-pager { border-top: 1px solid var(--sg-line); }
.sg-pager .sg-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-block: 36px;
}
.sg-pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--sg-ink);
  padding: 18px 0;
}
.sg-pager a span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sg-teal);
}
.sg-pager a b { font-size: 19px; transition: color 200ms ease; }
.sg-pager .sg-pager__next { text-align: right; align-items: flex-end; }
@media (hover:hover) and (pointer:fine) {
  .sg-pager a:hover b { color: var(--sg-teal); }
}

/* ---------- footer ---------- */
footer.sg-footer {
  background: var(--sg-cream);
  color: var(--sg-body);
  font-size: 14.5px;
  margin-top: 0;
}
.sg-footer__top {
  max-width: 1360px;
  margin: 0 auto;
  padding: 64px var(--sg-gutter-right) 56px var(--sg-gutter);
  display: grid;
  grid-template-columns: 1.5fr repeat(6, 1fr);
  gap: 32px;
}
.sg-footer .sg-logo { margin-bottom: 28px; }
.sg-footer .sg-logo b { font-size: 34px; }
.sg-footer .sg-logo b span { font-size: 27px; }
.sg-footer .sg-logo small { font-size: 10px; margin-top: 6px; }
.sg-footer .sg-logo img {
  --sg-logo-w: 220px;
  height: 60px;
  width: auto;
  display: block;
}
.sg-footer address { font-style: normal; line-height: 1.6; }
.sg-footer address a { color: var(--sg-body); text-decoration: none; }
.sg-footer h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.sg-footer h2 a { color: var(--sg-ink); text-decoration: none; }
.sg-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sg-footer ul a {
  color: var(--sg-body);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color 200ms ease;
}
@media (hover:hover) and (pointer:fine) {
  .sg-footer ul a:hover, .sg-footer h2 a:hover { color: var(--sg-teal); }
}
.sg-footer__bottom { background: #000; color: #fff; }
.sg-footer__bottom .sg-footer__bottom-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px var(--sg-gutter-right) 22px var(--sg-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}
.sg-footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
}
.sg-footer__bottom a, .sg-footer__bottom button {
  color: #fff;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
@media (hover:hover) and (pointer:fine) {
  .sg-footer__bottom a:hover, .sg-footer__bottom button:hover { color: var(--sg-teal-pale); }
}

/* ---------- language overlay ---------- */
.sg-lang {
  position: fixed;
  inset: 0;
  background: var(--sg-teal);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(60px, 12vh, 140px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.sg-lang.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s;
}
.sg-lang svg.sg-lang__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sg-lang svg.sg-lang__deco path {
  fill: none;
  stroke: #73cdab;
  stroke-width: 6;
}
.sg-lang .sg-lang__close {
  position: relative;
  font: inherit;
  font-size: 48px;
  font-weight: 300;
  line-height: 1;
  color: #a8dcc7;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 14px;
  transition: transform 220ms var(--sg-ease-out), color 200ms ease;
}
@media (hover:hover) and (pointer:fine) {
  .sg-lang .sg-lang__close:hover { color: #fff; transform: rotate(90deg); }
}
.sg-lang h2 {
  position: relative;
  color: #fff;
  font-size: clamp(32px, 4vw, 46px);
  margin: 18px 0 26px;
  letter-spacing: 0;
}
.sg-lang ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(20px, 6vw, 100px);
}
.sg-lang ul a {
  display: block;
  font-size: 19px;
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 0;
  transition: background-color 200ms ease, color 200ms ease;
}
.sg-lang ul a[aria-current="true"] { background: var(--sg-cream); color: var(--sg-ink); }
@media (hover:hover) and (pointer:fine) {
  .sg-lang ul a:not([aria-current="true"]):hover { background: rgba(255, 255, 255, .12); }
}

/* ---------- toast ---------- */
.sg-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--sg-ink);
  color: #fff;
  font-size: 14px;
  padding: 14px 20px;
  max-width: min(520px, calc(100vw - 32px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, transform 260ms var(--sg-ease-out), visibility 0s linear 260ms;
}
.sg-toast.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 220ms ease, transform 260ms var(--sg-ease-out), visibility 0s;
}

/* ---------- one left edge for every page ----------
   Page head (breadcrumb, H1) and text column start where the logo starts. The text column keeps its
   reading width (760 px), wide pages (cart, quote, compare) and the product description use the page width.
   Bands (sections, hero, stage) run across the full width as before. */
:is(.sg-page-head, .sg-article-head, .sg-content).is-layout-constrained > :not(.alignfull):not(.alignwide) {
  margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size, 1312px)) / 2)) !important;
  margin-right: auto !important;
}

/* ---------- page, article and list heads (templates) ---------- */
.sg-page-head { padding-block: 64px 8px; }
.sg-content { padding-bottom: 88px; }
.sg-content:has(> .alignfull:last-child) { padding-bottom: 0; }
.sg-article-head {
  padding-block: 56px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sg-article-head .sg-link { font-size: 12px; }
.sg-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--sg-muted);
  align-items: center;
}
.sg-article-meta .sg-eyebrow { margin: 0; }
.sg-article-image {
  max-width: var(--sg-page-width);
  margin: 0 auto 56px;
}
.sg-article-image img {
  display: block;
  width: 100%;
  max-height: 640px;
  object-fit: cover;
}
.sg-related {
  background: var(--sg-grey);
  padding-block: 88px;
}
.sg-related h2 { margin: 0 0 40px; }
.sg-archive-head { padding-block: 64px 48px; }
.sg-archive-head h1 { margin: 0; }
.sg-archive-head .sg-lead { margin-top: 14px; max-width: 56ch; }
.sg-archive { padding-bottom: 88px; }
.sg-pagination { margin-top: 56px; }
.sg-pagination .nav-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sg-pagination .page-numbers {
  min-width: 40px;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--sg-line);
  color: var(--sg-ink);
  text-decoration: none;
}
.sg-pagination .page-numbers.current { background: var(--sg-teal); border-color: var(--sg-teal); color: #fff; }
/* Breadcrumb (shop sites, inc/breadcrumb.php) */
.sg-breadcrumb {
  font-size: 12.5px;
  color: var(--sg-muted);
  padding: 18px 0 6px;
}
.sg-breadcrumb a { color: var(--sg-muted); text-decoration: none; }
/* first link (home) as a house icon; font-size 0 keeps "Home" as the accessible name (Yoast / fallback markup) */
:is(.sg-breadcrumb > span > span:first-child > a, .sg-breadcrumb > a:first-child) {
  display: inline-block;
  font-size: 0;
  vertical-align: -2px;
}
:is(.sg-breadcrumb > span > span:first-child > a, .sg-breadcrumb > a:first-child)::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9v12h14V9'/><path d='M10 21v-6h4v6'/></svg>") center / contain no-repeat;
}
.sg-breadcrumb .breadcrumb_last, .sg-breadcrumb [aria-current="page"] { color: var(--sg-ink); } /* Yoast / fallback */

/* Footer – company (widget area) and the widgets below news articles */
.sg-footer__company { margin-top: 22px; font-size: 14px; line-height: 1.6; }
.sg-footer__company :is(p, ul, address) { margin: 0 0 10px; }
.sg-footer__company a { color: var(--sg-body); text-decoration: none; }
.sg-footer__company .wp-block-social-links { margin-top: 18px; }
.sg-footer__company .sg-widget-title, .sg-article-after .sg-widget-title { font-size: 16px; margin: 0 0 10px; }
.sg-article-after { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--sg-line); }
@media (hover:hover) and (pointer:fine) {
  .sg-breadcrumb a:hover { color: var(--sg-teal); }
}
.sg-page-head .sg-breadcrumb,
.sg-article-head .sg-breadcrumb { padding: 0 0 8px; }

/* Guides / support archive (archive.php) */
.sg-archive-band {
  background: var(--sg-mint);
  padding-block: 32px 48px;

  & h1 { margin: 12px 0 0; }
  & .sg-lead { margin-top: 14px; max-width: 56ch; }
}
.sg-archive__body { padding-block: 56px 0; }
.sg-archive__toolbar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}
.sg-archive__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sg-archive__filters select { width: auto; min-width: 220px; }
.sg-archive__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--sg-muted);
  border-top: 1px solid var(--sg-line);
  padding-top: 14px;
}
.sg-archive__sort select {
  border: 0;
  padding: 4px 30px 4px 6px;
  font-size: 13px;
  width: auto;
  color: var(--sg-ink);
}
.sg-postcard .sg-postcard__meta:empty { display: none; }

.sg-404 { padding-block: 120px; }
.sg-404 h1 { margin: 0 0 16px; }
.sg-404 .sg-lead { margin: 0 0 28px; max-width: 56ch; }

/* ---------- responsive ---------- */
@media (max-width:1180px) {
  .sg-nav__button { padding: 0 12px; font-size: 15px; }
  .sg-footer__top { grid-template-columns: repeat(3, 1fr); }
  .sg-footer__brand { grid-column: 1/-1; }
  .sg-megamenu__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .sg-megamenu__card { display: none; }
}
@media (max-width:1023px) {
  html { scroll-padding-top: 130px; }
  .sg-header__inner { height: 66px; }
  .sg-header .sg-logo { border-right: 0; padding-right: 0; }
  .sg-nav__toggle { display: block; }
  .sg-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 66px;
    bottom: 0;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 300ms var(--sg-ease-out), visibility 0s linear 300ms;
    z-index: 58;
  }
  .sg-header.open .sg-nav {
    transform: none;
    visibility: visible;
    transition: transform 300ms var(--sg-ease-out), visibility 0s;
  }
  .sg-nav__list {
    flex-direction: column;
    width: 100%;
    padding: 8px var(--sg-gutter-right) 40px var(--sg-gutter);
  }
  .sg-nav__item { flex-direction: column; border-bottom: 1px solid var(--sg-line); }
  .sg-nav__button {
    padding: 18px 0;
    font-size: 18px;
    justify-content: space-between;
    width: 100%;
  }
  .sg-nav__button::after { display: none; }
  .sg-nav__item.on > .sg-nav__button { font-weight: 600; }

  /* Drill-down: every level is a panel over the whole menu area that slides in from the right */
  .sg-nav:has(.sg-megamenu.is-open) { overflow: hidden; }
  .sg-nav__list, .sg-nav__item { position: static; }
  /* same chevron as .sg-megamenu__expand on every level */
  .sg-nav__button svg { display: none; }
  .sg-nav__item > button.sg-nav__button::after {
    content: "";
    display: block;
    position: static;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-right: 18px;
    background: none;
    border-right: 1.5px solid var(--sg-teal);
    border-top: 1.5px solid var(--sg-teal);
    transform: rotate(45deg);
  }
  .sg-megamenu {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    opacity: 1;
    visibility: hidden;
    padding: 0 var(--sg-gutter-right) 0 var(--sg-gutter);
    background: #fff;
    box-shadow: none;
    border: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 320ms var(--sg-ease-out), visibility 0s linear 320ms;
  }
  .sg-megamenu.is-open {
    visibility: visible;
    transform: none;
    transition: transform 320ms var(--sg-ease-out), visibility 0s;
  }
  .sg-megamenu:has(li.is-open) { overflow: hidden; }
  .sg-megamenu__inner, .sg-megamenu__inner.has-sub {
    position: static;
    display: block;
    overflow: visible;
    padding: 0 0 40px;
  }
  .sg-megamenu__intro { display: none; }
  /* promo card at the end of the section panel */
  .sg-megamenu__card { display: flex; margin-top: 28px; min-height: 170px; }
  .sg-megamenu__list a { padding: 12px 0; font-size: 15.5px; }
  .sg-lang__button { border-left: 0; padding-left: 0; }
  .sg-lang__button span { display: none; }
  .sg-subnav { top: 66px; }
  .sg-scrim { display: none; }
}
@media (max-width:640px) {
  .sg-footer__top { grid-template-columns: 1fr 1fr; padding-top: 48px; }
  .sg-pager .sg-wrap { grid-template-columns: 1fr; }
  .sg-pager .sg-pager__next { text-align: left; align-items: flex-start; }
  .sg-footer__bottom .sg-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .sg-megamenu, .sg-lang, .sg-toast, .sg-nav, .sg-scrim { transition: none !important; }
}
h1[tabindex="-1"]:focus { outline: none; }

@media (max-width:1023px) {
  .sg-header .sg-logo img { height: 40px; --sg-logo-w: 170px; }
  .sg-header .sg-logo img.sg-logo--shop { width: 150px; height: auto; }
}

/* Admin bar must not cover the sticky header */
.admin-bar .sg-header { top: 32px; }
@media (max-width:782px) {
  .admin-bar .sg-header { top: 46px; }
}
@media (max-width:600px) {
  .admin-bar .sg-header { top: 0; }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* Stacking order of the page frame. Content (sliders, carousels, Page Builder) uses z-index up to 600
   (former shop styles), so header, mega menu and overlays sit above that. */
.sg-skip { z-index: 1200; }
.sg-header { z-index: 700; }
.sg-scrim { z-index: 690; }
.sg-subnav { z-index: 650; }
.sg-lang { z-index: 1000; }
.sg-toast { z-index: 1100; }

/* Top-level menu entry without sub-pages = plain link */
a.sg-nav__button { text-decoration: none; color: inherit; }

/* Preheader: widget area "Top bar" (Appearance → Widgets); without widgets the default links (inc/settings.php).
   Widgets (paragraph, list, menu, group …) are flattened into one row of links; sub-levels are hidden. */
.sg-preheader {
  background: var(--sg-teal);
  color: #fff;
  font-size: 12.5px;
}
.sg-preheader__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 7px var(--sg-gutter-right) 7px var(--sg-gutter);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
}
.sg-preheader__inner :is(.sg-preheader__widget, ul, ol, p, div) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-preheader__inner li { margin: 0; }
.sg-preheader__inner :is(ul ul, ol ol, .sub-menu) { display: none; }
.sg-preheader a {
  color: #fff;
  text-decoration: none;
  padding: 0 14px;
  line-height: 1.3;
}
/* thin divider between the links, also across widgets and list items */
.sg-preheader :is(a + a, li + li > a, .sg-preheader__widget + .sg-preheader__widget a:first-child) {
  border-left: 1px solid rgba(255, 255, 255, .35);
}
.sg-preheader a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover:hover) and (pointer:fine) {
  .sg-preheader a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.sg-nav__service { display: none; }
@media (max-width:1023px) {
  .sg-preheader { display: none; }
  .sg-nav { flex-direction: column; align-items: stretch; }
  .sg-nav__list { flex: 0 0 auto; padding-bottom: 16px; }
  .sg-nav__service {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 18px var(--sg-gutter-right) 40px var(--sg-gutter);
    border-top: 1px solid var(--sg-line);
    width: 100%;
  }
  .sg-nav__service :is(.sg-preheader__widget, ul, ol, p, div) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sg-nav__service :is(ul ul, ol ol, .sub-menu) { display: none; }
  .sg-nav__service a {
    color: var(--sg-muted);
    font-size: 14px;
    text-decoration: none;
  }
}

/* Mega menu with several levels (shop menus: section → category → sub category → product).
   Same look as the group mega menu: white, thin full-height dividers, calm typography, no arrows.
   Desktop: each level opens as the next column (hover with a short intent delay / keyboard focus / tap).
   Mobile: every level is a panel that slides in from the right, "Back" slides it out again. */
.sg-megamenu__list .sg-menu-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--sg-teal);
}
.sg-megamenu__list a { justify-content: flex-start; gap: 10px; }
.sg-megamenu__list a > span { min-width: 0; } /* long names wrap inside the column */
.sg-megamenu__list a .sg-arrow, .sg-megamenu__back-item, .sg-megamenu__back-top { display: none; }
.sg-megamenu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sg-megamenu__expand { display: none; }
.sg-megamenu__all {
  display: inline-block;
  margin-top: 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sg-teal);
  text-decoration: none;
  transition: color 200ms ease;
}
.sg-megamenu__all:hover { color: var(--sg-teal-dark); }
.sg-megamenu__card .sg-megamenu__card-cta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sg-teal);
  margin-top: 4px;
}
.sg-megamenu__card :is(.sg-megamenu__card-number, .sg-megamenu__card-label):empty { display: none; }
/* image on top, always whole (contain: products are seen completely), text below on mint */
.sg-megamenu__card.has-img::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  margin: -28px -28px 12px;
  padding: 16px;
  background: #fff var(--sg-megamenu-img) center / contain no-repeat content-box padding-box;
  box-shadow: inset 0 0 0 1px var(--sg-mint); /* white image area stays visible on the white menu */
}
/* EU AI label of the card image (site.js, cardAi): in the image area, top corner – not over the text */
.sg-megamenu__card > .sg-ai-label { inset-block: 8px auto; }
@media (min-width:1024px) {
  .sg-megamenu__inner.has-sub {
    display: block;
    position: relative;
    --sg-mm-col: 270px;
    --sg-mm-panel: 290px;
    --sg-mm-gap: 44px;
  }
  .sg-megamenu__inner.has-sub > .sg-megamenu__list {
    position: relative;
    width: var(--sg-mm-col);
    padding-bottom: 56px;
  }
  .sg-megamenu__inner.has-sub > .sg-megamenu__intro { display: none; }
  .sg-megamenu__inner.has-sub > .sg-megamenu__card {
    position: absolute;
    top: 30px;
    right: var(--sg-gutter-right);
    width: min(300px, 24%);
    margin: 0;
  }
  .sg-megamenu__inner.has-sub > .sg-megamenu__all {
    position: absolute;
    left: var(--sg-gutter);
    bottom: 40px;
    margin: 0;
  }

  /* entries: as in the group menu, hover = teal + a small slide, no arrows */
  .sg-megamenu__inner.has-sub li > a { color: var(--sg-ink); }
  .sg-megamenu__inner.has-sub .sg-megamenu__sub a { font-size: 15px; padding: 12px 0; }
  .sg-megamenu__inner.has-sub li.is-active > a { color: var(--sg-teal); }
  .sg-megamenu__inner.has-sub li.is-current > a { color: var(--sg-teal); font-weight: 600; }
  @media (hover:hover) and (pointer:fine) {
    .sg-megamenu__inner.has-sub li > a:hover { color: var(--sg-teal); } /* also the last level (no is-active there) */
  }

  /* entries with a further level: small chevron on the right, visible without hover */
  .sg-megamenu__inner.has-sub li.has-sub > a::after {
    content: "";
    margin-left: auto;
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .45;
    transition: opacity 200ms ease, transform 200ms var(--sg-ease-out);
  }
  .sg-megamenu__inner.has-sub li.has-sub:is(.is-active,:hover) > a::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
  .sg-megamenu__inner.has-sub li.has-sub > a { padding-right: 18px; }

  /* next level: column with a thin full-height divider */
  .sg-megamenu__inner.has-sub .sg-megamenu__sub {
    position: absolute;
    top: -30px;
    bottom: -40px;
    left: 100%;
    width: calc(var(--sg-mm-panel) + var(--sg-mm-gap));
    padding: 30px 0 40px var(--sg-mm-gap);
    border-left: 1px solid var(--sg-line);
    background: #fff;
    display: none;
  }
  .sg-megamenu__inner.has-sub > .sg-megamenu__list > li > .sg-megamenu__sub { margin-left: var(--sg-mm-gap); }
  .sg-megamenu__inner.has-sub .sg-megamenu__sub .sg-megamenu__sub {
    top: 0;
    bottom: 0;
    margin-left: var(--sg-mm-gap);
  }
  .sg-megamenu__inner.has-sub li.is-active > .sg-megamenu__sub { display: block; animation: sg-megamenu-panel 200ms var(--sg-ease-out); }

  /* "All …" = eyebrow of the column */
  .sg-megamenu__inner.has-sub .sg-megamenu__overview { margin: 0 0 6px; }
  .sg-megamenu__inner.has-sub .sg-megamenu__overview > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sg-teal);
  }
  .sg-megamenu__inner.has-sub .sg-megamenu__overview > a::before {
    content: "";
    width: 30px;
    height: 1.5px;
    background: var(--sg-teal);
    flex-shrink: 0;
  }
  .sg-megamenu__inner.has-sub .sg-megamenu__overview > a:hover { padding-left: 0; color: var(--sg-teal-dark); }
}
@media (min-width:1024px) and (max-width:1320px) {
  .sg-megamenu__inner.has-sub {
    --sg-mm-col: 230px;
    --sg-mm-panel: 230px;
    --sg-mm-gap: 32px;
  }
  .sg-megamenu__inner[data-depth="3"] > .sg-megamenu__card, .sg-megamenu__inner[data-depth="4"] > .sg-megamenu__card { display: none; }
}
@media (min-width:1024px) {
  .sg-megamenu__inner[data-depth="4"] {
    --sg-mm-col: 210px;
    --sg-mm-panel: 210px;
    --sg-mm-gap: 28px;
  }
  .sg-megamenu__inner[data-depth="4"] > .sg-megamenu__card { display: none; }
}
@keyframes sg-megamenu-panel {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width:1023px) {
  .sg-megamenu__list li { position: relative; }
  .sg-megamenu__list li.has-sub > a { padding-right: 52px; }
  .sg-megamenu__expand {
    display: block;
    position: absolute;
    right: 0;
    top: 3px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    cursor: pointer;

    /* chevron: the next level slides in from the right */
  }
  .sg-megamenu__expand::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--sg-teal);
    border-top: 1.5px solid var(--sg-teal);
    transform: translate(-70%, -50%) rotate(45deg);
  }
  .sg-megamenu__list li.has-sub {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .sg-megamenu__list li.has-sub > a { flex: 1 1 auto; }
  .sg-megamenu__list li.has-sub > .sg-megamenu__expand {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .sg-megamenu__sub {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0 var(--sg-gutter-right) 40px var(--sg-gutter);
    border: 0;
    background: #fff;
    overflow-y: auto;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 320ms var(--sg-ease-out), visibility 0s linear 320ms;
  }
  .sg-megamenu__sub:has(li.is-open) { overflow: hidden; }
  .sg-megamenu__list li.is-open > .sg-megamenu__sub {
    visibility: visible;
    transform: translateX(0);
    transition: transform 320ms var(--sg-ease-out), visibility 0s;
  }
  .sg-megamenu__back-item, .sg-megamenu__back-top { display: block; }
  .sg-megamenu__back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--sg-line);
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sg-teal);
    cursor: pointer;
  }
  .sg-megamenu__back::before {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .sg-megamenu__overview > a {
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sg-teal) !important;
  }
  .sg-megamenu__all { margin: 12px 0 0; }
}
@media (prefers-reduced-motion:reduce) {
  .sg-megamenu__inner.has-sub li.is-active > .sg-megamenu__sub { animation: none; }
}
/* desktop: the menu glides to a new height when another entry needs more or less room (site.js, glide) */
.sg-megamenu__inner.is-gliding {
  overflow: hidden;
  transition: height 260ms var(--sg-ease-out);
}
/* low screens (small laptops): a very long menu scrolls inside instead of running below the screen */
@media (min-width:1024px) {
  .sg-megamenu {
    max-height: calc(100svh - 110px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Header shrinks after scrolling; the logo follows smoothly (same duration, no jump) */
.sg-header__inner { transition: height 300ms ease; }
.sg-header .sg-logo img { transition: height 300ms ease, width 300ms ease, max-width 300ms ease; }
@media (prefers-reduced-motion: reduce) {
  .sg-header__inner, .sg-header .sg-logo img { transition: none; }
}
@media (min-width: 1024px) {
  .sg-header.is-scrolled .sg-header__inner { height: 76px; }
  .sg-header.is-scrolled .sg-logo img { height: 44px; --sg-logo-w: 180px; }
  .sg-header.is-scrolled .sg-logo img.sg-logo--shop { width: 150px; height: auto; }
}

/* Footer logo a little smaller; align-self keeps the flex column from stretching it */
.sg-footer .sg-logo img { height: 44px; align-self: flex-start; }
.sg-footer .sg-logo img.sg-logo--shop { width: 170px; height: auto; }

/* ---------- Mobile menu: language button with its name (phones), no sideways scrolling ---------- */
.sg-nav__lang { display: none; }
@media (max-width: 1023px) {
  /* the sub-level panels wait outside on the right (translateX(100%)): they must never make the menu scroll sideways */
  .sg-nav,
  .sg-megamenu,
  .sg-megamenu__sub { overflow-x: hidden; overscroll-behavior-x: none; }
  @supports (overflow: clip) {
    .sg-nav,
    .sg-megamenu,
    .sg-megamenu__sub { overflow-x: clip; }
  }
}
@media (max-width: 600px) {
  .sg-header__tools > .sg-lang__button { display: none; } /* in the menu instead */
  .sg-nav__lang {
    display: block;
    width: 100%;
    padding: 0 var(--sg-gutter-right) 32px var(--sg-gutter);
  }
  .sg-nav__lang .sg-lang__button {
    width: 100%;
    padding: 14px 0;
    border-left: 0;
    border-top: 1px solid var(--sg-line);
    font-size: 16px;
    gap: 12px;
  }
  .sg-nav__lang .sg-lang__button svg { color: var(--sg-teal); }
  .sg-nav__lang-code { margin-left: auto; color: var(--sg-muted); font-size: 14px; }
}

/* ---------- "Back to top" (footer.php, site.js) – bottom right; moves up above the contact person bubble and the
   shop dock when they are there (no overlapping), square like all buttons ---------- */
.sg-totop {
  --sg-totop-lift: 0px;
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: calc(20px + var(--sg-totop-lift) + env(safe-area-inset-bottom, 0px));
  z-index: 640;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--sg-teal);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(21, 26, 25, .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms, bottom 200ms ease;
}
.sg-totop::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}
.sg-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s, bottom 200ms ease; }
.sg-totop:hover { background: var(--sg-teal-dark); }
.sg-totop:focus-visible { outline: 2px solid var(--sg-ink); outline-offset: 3px; }
body:has(.sg-contact) .sg-totop { --sg-totop-lift: 76px; }
body:has(.sg-dock.is-visible) .sg-totop { --sg-totop-lift: 76px; }
body:has(.sg-contact):has(.sg-dock.is-visible) .sg-totop { --sg-totop-lift: 152px; }
@media (prefers-reduced-motion: reduce) {
  .sg-totop { transition: none; }
}
@media print {
  .sg-totop { display: none; }
}