/* Boutique navigator, prototype for pages/home (spec: hp-merged/notes/2026-09-30-navigator-design.md).
   One markup for every width, no JavaScript: a native popover drawer and a popover panel.
   Loaded after page.css. Phone up to 768px, tablet 769-1100px, desktop above 1100px. Short landscape screens
   (up to 500px tall and 1100px wide: a phone held sideways) get the phone layout (user, 2026-09-30). */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.menu-btn, .menu__close, .menu__label, .mega__all, .mega__back { display: none; }

/* ---------- Matratzen panel (every width) ---------- */
/* The chevron opens the panel, a native popover: Esc and a click outside close it (user, 2026-09-30). */
.cat__more { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; }
.cat__more svg { width: 14px; height: 14px; transition: transform .15s; }
.cat--panel:has(.mega:popover-open) .cat__more svg { transform: rotate(180deg); }
.cat__more:hover, .cat__more:focus-visible { background: var(--paper-warm); color: var(--rust); }

/* The panel lives in the top layer: anchored under the category band where CSS anchor positioning exists,
   otherwise at a fixed spot under the 181px desktop header. */
.catbar { anchor-name: --band; }
.mega {
  position: fixed; inset: auto; top: 181px; left: 0; right: 0; margin: 0 auto;
  width: min(1220px, calc(100vw - 80px)); height: auto; max-height: calc(100dvh - 190px); overflow-y: auto;
  background: #fff; color: var(--ink); border: 1px solid var(--gold-soft); border-top: 2px solid var(--rust);
  box-shadow: 0 18px 40px rgba(26, 22, 19, .12);
  padding: 30px 32px 0;
}
@supports (anchor-name: --a) {
  .mega { position-anchor: --band; top: anchor(bottom); left: anchor(left); right: auto; width: anchor-size(width); margin: 0; }
}
.mega::backdrop { background: transparent; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 32px; }
.mega__label {
  display: block; margin: 0 0 12px; font-family: var(--font-body); font-variant: small-caps;
  letter-spacing: .12em; font-size: 13px; font-weight: 600; color: var(--gold);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 6px;
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li + li { margin-top: 8px; }
.mega a { color: var(--ink); text-decoration: none; }
.mega a:hover { color: var(--rust); }
.mega__col a { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: 0; white-space: normal; }
/* Planned pages are review-only rows (spec 3.4): greyed, no link, a "geplant" tag; they show with body.review,
   like the badges. */
.planned { display: none; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--serif); font-size: 19px; color: color-mix(in srgb, var(--ink-soft) 80%, #fff); }
.review .planned { display: flex; }
.planned b { flex: none; padding: 1px 6px; border: 1px dashed var(--gold-soft); font: 600 11px/1.5 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; }
/* Matratzenfinder: an editorial column with a text link, not a filled box (user, 2026-09-30, option B). */
.mega__tile { align-self: start; padding: 4px 0 0 28px; border-left: 1px solid var(--gold-soft); }
.mega__tile p { margin: 0 0 6px; font-size: 13px; font-variant: small-caps; letter-spacing: .12em; color: var(--gold); }
.mega__tile strong { display: block; margin-bottom: 16px; font-family: var(--serif); font-size: 24px; font-weight: 400;
  line-height: 1.3; color: var(--ink); }
.mega__tile a.mega__more { display: inline-flex; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid currentColor;
  font: 600 15px/1 var(--font-body); color: var(--rust); }
.mega__tile a.mega__more:hover { color: var(--ink); }
/* The arrow is decoration: the second declaration gives it empty alt text where supported. */
.mega__tile a.mega__more::after { content: "→"; content: "→" / ""; }
/* .mega in front: the ".mega ul" reset above would otherwise win and zero this margin and padding. */
.mega .mega__service { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 28px -32px 0; padding: 14px 32px;
  background: var(--paper); border-top: 1px solid var(--gold-soft); list-style: none; }
.mega__service li + li { margin-top: 0; }
.mega__service a { font-size: 14px; font-weight: 600; }
/* The other panels (user, 2026-10-05): the live sub-categories of Betten, Kopfkissen, Bettdecken, Topper and Home &
   Living. No service row closes them. A label that links to its live parent category keeps the label's look. */
.mega:has(> .mega__grid--auto) { padding-bottom: 30px; }
.mega__col a.mega__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--gold); }
.mega__col a.mega__label:hover { color: var(--rust); }
.mega__col ul + .mega__label { margin-top: 26px; }

/* ---------- Desktop and tablet (769px and up, not short): top bar, main row, category band ---------- */
@media (min-width: 1101px), (min-width: 769px) and (min-height: 501px) {
  /* One markup for all widths: the drawer wrapper dissolves into the header grid. */
  #site-menu { display: contents; }
  .head__grid { display: grid; grid-template-columns: auto 1fr repeat(4, auto); grid-template-rows: 36px 92px 52px;
    grid-template-areas: "usp usp nav nav nav nav" "brand search show talk acct cart" "cat cat cat cat cat cat";
    align-items: center; column-gap: 8px; }
  /* Full-bleed bands without horizontal overflow: a spread shadow, clipped to the row height. */
  .head__usp::before, .catbar::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }

  .head__usp { --band: var(--petrol); grid-area: usp; position: relative; align-self: stretch; display: flex;
    align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0;
    font: 600 13px/1 var(--font-body); color: #fff; }
  .head__usp li::before { content: "✓"; margin-right: 8px; color: var(--gold-light); }
  .head__grid .nav { grid-area: nav; justify-self: end; align-self: stretch; align-items: center; gap: 22px; }
  /* White only for the bar's own links; the languages are flags (below), the open list keeps its paper panel. */
  .head__grid .nav > a { color: #fff; font-size: 12px; }
  /* The icons carry Showrooms and Kontakt, the band carries Matratzenfinder. */
  .head__grid .nav > a[href="/showroom/"], .head__grid .nav > a[href="/kontakt/"],
  .head__grid .nav > a[href="/matratzenfinder/"] { display: none; }
  /* The theme's petrol focus ring vanishes on the petrol bar: white here, as the theme does for .hero and .foot. */
  .head__grid .nav > a:focus-visible, .head__grid .nav > aside:focus-visible,
  .head__grid .nav .weglot_choice:focus-visible { outline-color: #fff; }

  .head__grid .brand { grid-area: brand; margin-right: 0; min-width: 120px; }
  .head__grid .brand img { width: 120px; height: 50px; }
  .head__search { grid-area: search; display: flex; align-items: center; height: 50px; margin: 0 32px;
    background: #fff; border: 1px solid var(--gold-soft); }
  .head__search input[type=search] { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
    padding: 0 16px; font: 400 16px/1 var(--font-body); color: var(--ink); }
  .head__search button { width: 50px; height: 50px; border: 0; background: transparent; color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  .head__search button svg { width: 20px; height: 20px; }

  /* Icons, option 1 "Feinlinie": hairline glyph, small-caps label below. */
  .head__grid .head__icon, .head__grid .head__cart { display: inline-flex; flex-direction: column; align-items: center;
    gap: 5px; min-width: 76px; color: var(--ink); text-decoration: none;
    font: 600 13px/1 var(--font-body); font-variant: small-caps; letter-spacing: .12em; }
  .head__icon--show { grid-area: show; }
  .head__icon--talk { grid-area: talk; }
  .head__icon--acct { grid-area: acct; }
  .head__grid .head__cart { grid-area: cart; }
  .head__grid .head__icon svg, .head__grid .head__cart svg { width: 30px; height: 30px; margin-bottom: 4px; stroke-width: 1.25; }
  .head__grid .head__cart::after { content: "Warenkorb"; }
  .head__grid .head__icon:hover, .head__grid .head__cart:hover { color: var(--rust); }
  /* WordPress adds the count badge for a non-empty cart; seat it on the bag, not on the label. */
  .head__grid .head__cart .head__cart-count { top: -6px; right: 14px; }

  .catbar { --band: var(--paper-warm); grid-area: cat; position: relative; }
  .catbar__list { display: flex; align-items: center; justify-content: space-between; list-style: none;
    margin: 0; padding: 0; height: 52px; }
  .catbar__list > li { display: flex; align-items: center; gap: 4px; }
  .catbar__list > li > a { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .01em;
    color: var(--ink); text-decoration: none; white-space: nowrap; }
  .catbar__list > li > a:hover { color: var(--rust); }
  .catbar__list > .cat--finder > a { color: var(--petrol); }
  .catbar__list > .cat--sale > a { color: var(--rust); }
  .catbar__list > .cat--panel:has(.mega:popover-open) > a, .cat--panel:has(.mega:popover-open) .cat__more { color: var(--rust); }

  /* Three shop columns (user, 2026-10-05, variant C): the guides sit above the finder in the fourth track, behind its
     gold line. Bound to .mega__grid--shop, so the pages that share this file keep their one row of three and the tile. */
  .mega__grid--shop { grid-template-rows: auto 1fr; row-gap: 0; }
  .mega__grid--shop > .mega__col:not(.mega__col--guides) { grid-row: 1 / 3; }
  .mega__grid--shop > .mega__col--guides { grid-column: 4; grid-row: 1; padding: 0 0 26px 28px; border-left: 1px solid var(--gold-soft); }
  .mega__grid--shop > .mega__tile { grid-column: 4; grid-row: 2; align-self: stretch; }

  /* The other panels: one track per group; a long list takes three tracks and runs in up to four columns. */
  .mega__grid--auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mega__grid--auto > .mega__col--flow { grid-column: span 3; }
  .mega__col--flow ul { columns: 4 180px; column-gap: 32px; }
  .mega__col--flow li { break-inside: avoid; }

  /* The header grows from 79px to 181px (216px on tablets): in-page anchors land below it (wp.css 275). */
  main [id] { scroll-margin-top: 197px; }
}

/* Narrow tablets: four tracks no longer hold the technologies' long words, so guides and finder move under the three
   shop columns. */
@media (min-width: 769px) and (max-width: 920px) and (min-height: 501px) {
  .mega__grid--shop { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; row-gap: 28px; }
  .mega__grid--shop > .mega__col:not(.mega__col--guides) { grid-row: 1; }
  .mega__grid--shop > .mega__col--guides { grid-column: 1 / 3; grid-row: 2; padding: 0; border-left: 0; }
  .mega__grid--shop > .mega__tile { grid-column: 3; grid-row: 2; align-self: start; }
}

/* Ten items and six chevrons fill one row from about 1240px: below that the words and chevrons take the tablet's
   sizes. Bound to .catbar__list--panels, so the pages that share this file keep their band. */
@media (min-width: 1101px) and (max-width: 1240px) {
  .catbar__list--panels > li > a { font-size: 14px; }
  .catbar__list--panels .cat__more { width: 22px; }
}

/* ---------- Tablet (769-1100px): one USP, tighter icons, the band wraps (owner ruling 2026-08-18) ---------- */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 501px) {
  .head__grid { grid-template-rows: 36px 92px auto; }
  .head__usp li + li { display: none; }
  .head__search { margin: 0 16px; }
  .head__grid .head__icon, .head__grid .head__cart { min-width: 60px; font-size: 11px; }
  .catbar__list { flex-wrap: wrap; justify-content: center; height: auto; gap: 2px 24px; padding: 8px 0; }
  .catbar__list > li > a { font-size: 14px; line-height: 36px; }
  .cat__more { width: 22px; }
  main [id] { scroll-margin-top: 235px; }
}

/* ---------- Phone (up to 768px): logo and icons, menu button and search, drawer ---------- */
@media (max-width: 768px), (max-height: 500px) and (max-width: 1100px) {
  .head__grid { display: grid; grid-template-columns: auto 1fr auto auto auto auto; grid-template-rows: auto auto;
    grid-template-areas: "brand brand show talk acct cart" "menu search search search search search";
    align-items: center; column-gap: 2px; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .head__grid .brand { grid-area: brand; width: auto; justify-content: flex-start; margin-right: 0; }
  .head__usp { display: none; }
  .head__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The theme hides the cart below 769px (theme line 570); the navigator shows it (spec section 6). */
  .head__grid .head__icon, .head__grid .head__cart { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 0; color: var(--ink); }
  .head__icon--show { grid-area: show; }
  .head__icon--talk { grid-area: talk; }
  .head__icon--acct { grid-area: acct; }
  .head__grid .head__cart { grid-area: cart; }
  .head__grid .head__icon svg, .head__grid .head__cart svg { width: 23px; height: 23px; stroke-width: 1.5; }
  .head__grid .head__cart .head__cart-count { top: 2px; right: 0; }

  .menu-btn { grid-area: menu; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin-right: 6px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
  .menu-btn svg { width: 26px; height: 26px; }
  .head__search { grid-area: search; display: flex; align-items: center; height: 44px; margin: 0;
    background: #fff; border: 1px solid var(--gold-soft); }
  .head__search input[type=search] { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
    padding: 0 12px; font: 400 16px/1 var(--font-body); color: var(--ink); }
  .head__search button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; }
  .head__search button svg { width: 20px; height: 20px; }

  /* The drawer: a native popover from the left (light dismiss and Esc, no JS). Closed, it is not rendered. */
  #site-menu:popover-open { position: fixed; inset: 0 auto 0 0; width: min(88vw, 380px); height: 100dvh;
    max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: #fff; overflow-y: auto; }
  #site-menu::backdrop { background: rgba(26, 22, 19, .5); }
  .menu__close { display: block; position: sticky; top: 0; z-index: 7; }
  .menu__close button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px;
    padding: 0 22px; border: 0; background: var(--paper); color: var(--ink); font: 600 16px/1 var(--font-body); cursor: pointer; }
  .menu__close svg { width: 22px; height: 22px; }
  #site-menu .catbar { position: static; }
  #site-menu .catbar__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
  #site-menu .catbar__list > li { display: flex; align-items: center; border-bottom: 1px solid var(--gold-soft); }
  #site-menu .catbar__list > li > a { display: flex; align-items: center; flex: 1; min-height: 56px; padding: 0 22px;
    font: 600 17px/1.2 var(--font-body); color: var(--ink); text-decoration: none; }
  #site-menu .catbar__list > .cat--finder > a { color: var(--petrol); }
  #site-menu .catbar__list > .cat--sale > a { color: var(--rust); }
  #site-menu > .menu__label { display: block; margin: 22px 22px 6px; font: 600 12px/1.4 var(--font-body);
    font-variant: small-caps; letter-spacing: .14em; color: var(--gold); }
  #site-menu .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 22px 32px; }
  #site-menu .nav > a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--gold-soft);
    font: 600 16px/1.2 var(--font-body); font-variant: normal; letter-spacing: 0; color: var(--ink); }
  #site-menu .nav > a[href="/matratzenfinder/"] { display: none; }
  #site-menu .nav aside { margin-top: 14px; }
  /* Flags as 44px touch targets (the theme's phone row gives 21 x 30). */
  #site-menu .country-selector, #site-menu .country-selector ul { gap: 6px; }
  #site-menu .country-selector ul a, #site-menu .wgcurrent { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0; }

  /* Drill-down, no JS: the chevron opens the panel popover over the drawer, below the close bar. It nests in the
     drawer popover, so Esc closes the panel first, then the drawer; "Zurück" hides it. */
  #site-menu .cat__more { width: 56px; height: 56px; border-left: 1px solid var(--gold-soft); border-radius: 0; }
  #site-menu .cat__more svg { width: 18px; height: 18px; transform: rotate(-90deg); }
  #site-menu .mega { top: 56px; bottom: 0; left: 0; right: auto; width: min(88vw, 380px); height: auto; max-height: none;
    margin: 0; padding: 0 0 28px; border: 0; box-shadow: none; }
  #site-menu .mega__back { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%;
    height: 56px; padding: 0 22px; border: 0; border-bottom: 1px solid var(--gold-soft); background: #fff; color: var(--ink);
    font: 600 16px/1 var(--font-body); cursor: pointer; }
  #site-menu .mega__back svg { width: 18px; height: 18px; transform: rotate(90deg); }
  #site-menu .mega__all { display: flex; align-items: center; min-height: 56px; padding: 0 22px;
    border-bottom: 2px solid var(--ink); font: 600 17px/1.2 var(--font-body); color: var(--rust); }
  #site-menu .mega__grid { grid-template-columns: 1fr; gap: 22px; padding: 22px 22px 0; }
  #site-menu .mega__service { margin: 22px 0 0; padding: 12px 22px; }
  #site-menu .mega__tile { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--gold-soft); }
  #site-menu .mega__service li:first-child { display: none; }
  /* With the panel open, the rows it covers leave the tab order and the accessibility tree (WCAG 2.4.11). */
  #site-menu:has(.mega:popover-open) .catbar__list > li:not(.cat--panel),
  #site-menu:has(.mega:popover-open) .cat--panel:not(:has(.mega:popover-open)) .cat__more,
  #site-menu:has(.mega:popover-open) .cat--panel > a,
  #site-menu:has(.mega:popover-open) > .menu__label,
  #site-menu:has(.mega:popover-open) > .nav { visibility: hidden; }
}

/* ---------- Language switchers: flags instead of codes (user, 2026-09-30; footer 2026-10-01) ----------
   German shows the Swiss flag; FR, IT and EN show their national flags. CSS only, on Weglot's own classes
   and data-l attributes, so the switcher markup (mv_boutique_lang_switcher) stays untouched. The code text
   stays in the DOM at font-size 0 for screen readers; the list links keep Weglot's title. One set of rules
   for the header and the footer switcher. */
:is(.site-head, .foot) .country-selector .wglanguage-name, :is(.site-head, .foot) .country-selector ul a { font-size: 0; letter-spacing: 0; }
:is(.site-head, .foot) .country-selector .wglanguage-name::before, :is(.site-head, .foot) .country-selector ul a::before {
  content: ""; display: inline-block; width: 21px; height: 14px; vertical-align: middle;
  background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(26, 22, 19, .2); }
:is(.site-head, .foot) .country-selector [data-l="de"] .wglanguage-name::before, :is(.site-head, .foot) .country-selector [data-l="de"] > a::before {
  width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23d52b1e' d='M0 0h32v32H0z'/%3E%3Cpath fill='%23fff' d='M13 6h6v7h7v6h-7v7h-6v-7H6v-6h7z'/%3E%3C/svg%3E"); }
:is(.site-head, .foot) .country-selector [data-l="fr"] .wglanguage-name::before, :is(.site-head, .foot) .country-selector [data-l="fr"] > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002654' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce1126' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
:is(.site-head, .foot) .country-selector [data-l="it"] .wglanguage-name::before, :is(.site-head, .foot) .country-selector [data-l="it"] > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23009246' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce2b37' d='M2 0h1v2H2z'/%3E%3C/svg%3E"); }
:is(.site-head, .foot) .country-selector [data-l="en"] .wglanguage-name::before, :is(.site-head, .foot) .country-selector [data-l="en"] > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath fill='%23012169' d='M0 0v30h60V0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23c8102e' stroke-width='4' clip-path='url(%23t)' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23c8102e' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E"); }
:is(.site-head, .foot) .country-selector ul a:hover::before, :is(.site-head, .foot) .country-selector ul a:focus-visible::before { box-shadow: 0 0 0 2px var(--rust); }
/* The current language: a gold line under its flag (on the phone it sits inline with the others). */
:is(.site-head, .foot) .wgcurrent .wglanguage-name { display: inline-block; padding-bottom: 4px; border-bottom: 2px solid var(--gold); }
/* On the footer's petrol ground the dark outline and the rust ring do not show: a light outline and a white ring.
   Each flag is a 44px target, as in the phone drawer; the current one starts at the block's left edge. */
.foot .country-selector .wglanguage-name::before, .foot .country-selector ul a::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.foot .country-selector ul a:hover::before, .foot .country-selector ul a:focus-visible::before { box-shadow: 0 0 0 2px #fff; }
.foot .country-selector, .foot .country-selector ul { align-items: center; gap: 0; }
.foot .country-selector ul a, .foot .wgcurrent { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; }
.foot .wgcurrent { justify-content: flex-start; min-width: 30px; }

/* A phone held sideways: the 117px phone header; wp.css only lifts anchors for 768px and below. */
@media (min-width: 769px) and (max-width: 1100px) and (max-height: 500px) {
  main [id] { scroll-margin-top: 133px; }
}