/* ==========================================================================
   Knitting Dreams — additive styles that are not WooCommerce-specific.
   Loaded on every page, after the original stylesheets. Nothing here changes
   the desktop design; it corrects the header at small sizes.
   ========================================================================== */

/* ---------- Mobile header ----------
   The currency switcher sits in the header actions. Its full form (flag +
   code + symbol + caret) is wider than the right-hand column allows on a
   phone, which pushed the logo off centre and clipped the cart icon. Below
   1024px it becomes progressively more compact. */

@media (max-width: 1024px) {
  /* minmax(0,…) lets the middle column shrink instead of overflowing. */
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .header-inner .logo { justify-self: center; min-width: 0; }
  .logo-text { min-width: 0; }
  .logo-word { overflow: hidden; text-overflow: ellipsis; }
  .logo-mark { width: 38px; }
  .logo { gap: 10px; }

  .header-actions { gap: 0; flex: none; }

  /* The dropdown must not be clipped by the header. */
  .site-header, .header-inner { overflow: visible; }

  .header-currency { position: relative; }
  .header-currency .scp-switcher-toggle {
    padding: 7px 9px; gap: 5px; font-size: .74rem; line-height: 1;
  }
  .header-currency .scp-switcher-toggle .scp-name { display: none; }
  .header-currency .scp-switcher-toggle .scp-flag { width: 18px; height: auto; }

  /* Anchored under the switcher rather than the plugin's full-width bar. */
  .header-currency .scp-switcher-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0; left: auto; bottom: auto;
    width: min(260px, calc(100vw - 24px));
    min-width: 0;
    max-height: min(50vh, 320px);
    overflow-y: auto;
    border-radius: var(--radius);
  }
}

@media (max-width: 768px) {
  .logo-mark { width: 34px; }
  .logo { gap: 8px; }
  .header-actions .icon-btn { width: 40px; height: 40px; }
  .header-currency .scp-switcher-toggle { padding: 6px 8px; }
  .header-currency .scp-switcher-toggle .scp-symbol { display: none; }
}

@media (max-width: 480px) {
  .logo-mark { width: 30px; }
  .logo { gap: 7px; }
  .header-inner { gap: 6px; }
  .header-actions .icon-btn { width: 38px; height: 38px; }

  /* Flag and caret only on the button — the code returns as soon as there is room. */
  .header-currency .scp-switcher-toggle .scp-code { display: none; }
  .header-currency .scp-switcher-toggle { padding: 6px; border-radius: var(--radius); }

  /* Beats the plugin's own fixed full-width panel at this width. */
  .header-currency .scp-switcher-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0; left: auto; bottom: auto;
    width: min(240px, calc(100vw - 20px));
  }
}

@media (max-width: 390px) {
  .logo-word { font-size: 1.05rem; }
  .logo-mark { width: 28px; }
}

/* Very narrow phones: the wordmark gives way before anything is clipped. */
@media (max-width: 340px) {
  .logo-word { display: none; }
}

/* The panel's options keep their flag, code and name at every width. */
.header-currency .scp-switcher-panel .scp-option { gap: 8px; }
.header-currency .scp-switcher-panel .scp-code { font-weight: 600; min-width: 34px; }
.header-currency .scp-switcher-panel .scp-name,
.header-currency .scp-switcher-panel .scp-code,
.header-currency .scp-switcher-panel .scp-symbol { display: inline; }

/* ==========================================================================
   Spacing corrections
   The header is position:sticky, so it already occupies space in normal flow.
   The hero compensates with a negative margin, but .page-head and .product do
   not — they add the header's height to their top padding, which counted it
   twice and left a large empty band at the top of inner pages.
   ========================================================================== */

.page-head { padding-top: clamp(32px, 4.5vw, 64px); }
.product { padding-top: clamp(24px, 3vw, 40px); }

/* The homepage hero still overlays the header, so nothing there changes. */

/* Blog post: the content sat a full section's padding below the hero image. */
.section--post { padding-top: clamp(20px, 2.5vw, 36px); }
.post-hero { margin-bottom: clamp(20px, 2.5vw, 32px); }

/* ---------- Blog pagination ----------
   the_posts_pagination() output had no styling, so it rendered as plain
   left-aligned text. Matched to the shop pagination. */
.pagination,
.navigation.pagination {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--line);
}
.pagination .nav-links,
.navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center;
}
.pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .85rem; color: var(--ink-2); text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover { border-color: var(--plum); color: var(--plum); }
.pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
  background: var(--plum); border-color: var(--plum); color: var(--cream); font-weight: 600;
}
.pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots { border-color: transparent; }
.pagination .screen-reader-text,
.navigation.pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Product FAQ ----------
   Was capped at 820px inside a much wider container, which left it stranded
   against the left edge. It now fills the column it sits in. */
.product-faq .faq-list { max-width: none; }
.product-faq .section-head { margin-bottom: clamp(16px, 2vw, 28px); }

/* ---- Search results page (1.7.0) ----
   Safety net: WordPress's `search-results` body class collided with the
   overlay's `.search-results` grid. The theme renames the class, but if a
   plugin adds it back, keep <body> a normal block. */
body.search-results { display: block; }
.search-listing .search-block + .search-block { margin-top: clamp(48px, 6vw, 80px); }
.search-block-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--ink);
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

/* ---- Single journal post (1.8.0) ----
   The post sat in the full 1440px container with a fixed 280px sidebar
   pinned to the far right, while the text was capped at 68ch. That left a
   wide empty gap between them. Title, hero, text and sidebar now share one
   centred reading width, with the text filling its column. */
.container--post { max-width: calc(1040px + 2 * var(--gutter)); }
.container--post.post-layout {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(32px, 4vw, 56px);
}
.post-layout .prose { max-width: none; font-size: 1.02rem; line-height: 1.75; }
.container--post .post-hero { aspect-ratio: 2 / 1; }
.page-head--post { padding-bottom: clamp(16px, 2vw, 24px); }
.container--post .post-hero { margin-bottom: clamp(20px, 2.5vw, 32px); }
.section--post { padding-top: clamp(4px, 1vw, 12px); }
.post-layout .prose > :first-child { margin-top: 0; }

/* Headings: tighter lines, a little room before the text that follows. */
.post-layout .prose h2,
.post-layout .prose h3,
.post-layout .prose h4 { line-height: 1.25; margin-bottom: 12px; text-wrap: balance; }
.post-layout .prose h2 { margin-top: clamp(32px, 4vw, 44px); }
.post-layout .prose h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--ink); margin-top: 28px; }
.post-layout .prose h2 + p, .post-layout .prose h3 + p { margin-top: 0; }
.post-layout .prose ul, .post-layout .prose ol { margin-top: 14px; padding-left: 1.3em; display: grid; gap: 6px; }
.post-layout .prose ul { list-style: disc; }
.post-layout .prose ol { list-style: decimal; }
.post-layout .prose img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.post-layout .prose figure { margin-top: 24px; }

/* Sidebar: the column hugs the text, with a rule between them. */
.container--post .post-aside { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); top: calc(var(--header-h) + 24px); }
.post-aside .widget-title, .post-aside h2, .post-aside .footer-h {
  font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); margin-bottom: 12px;
}
.post-aside li { line-height: 1.45; }
.post-aside .post-date { display: block; margin-top: 2px; font-size: .76rem; color: var(--ink-2); opacity: .75; }

@media (max-width: 900px) {
  .container--post.post-layout { grid-template-columns: minmax(0, 1fr); }
  .container--post .post-aside { position: static; padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--line); }
  .container--post .post-hero { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Image gallery and embed sections (1.8.0)
   ========================================================================== */
.kd-gallery .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.kd-gallery-stage { --g-gap: clamp(10px, 1.4vw, 18px); position: relative; }
.kd-gallery-track { list-style: none; margin: 0; padding: 0; }
.kd-gallery-item { margin: 0; min-width: 0; }
.kd-gallery-item figure { margin: 0; }
.kd-gallery-media { display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--mist); }
.kd-gallery-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.kd-gallery-media { cursor: zoom-in; }
a.kd-gallery-media:hover img { transform: scale(1.03); }
a.kd-gallery-media:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.kd-gallery--portrait .kd-gallery-media { aspect-ratio: 4 / 5; }
.kd-gallery--square .kd-gallery-media { aspect-ratio: 1 / 1; }
.kd-gallery--landscape .kd-gallery-media { aspect-ratio: 3 / 2; }
.kd-gallery--original .kd-gallery-media img { height: auto; }
.kd-gallery-item figcaption { margin-top: 10px; font-size: .88rem; line-height: 1.5; color: var(--ink-2); }

/* Grid */
.kd-gallery--grid .kd-gallery-track {
  display: grid; gap: var(--g-gap);
  grid-template-columns: repeat(var(--g-cols, 4), minmax(0, 1fr));
}
/* Masonry: CSS columns, each image keeps its own height. */
.kd-gallery--masonry .kd-gallery-track { columns: var(--g-cols, 4); column-gap: var(--g-gap); }
.kd-gallery--masonry .kd-gallery-item { break-inside: avoid; margin-bottom: var(--g-gap); }
/* Carousel: a snapping row; the arrows sit under the images on the right. */
.kd-gallery--carousel .kd-gallery-track {
  display: flex; gap: var(--g-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px;
}
.kd-gallery--carousel .kd-gallery-track::-webkit-scrollbar { display: none; }
.kd-gallery--carousel .kd-gallery-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.kd-gallery--carousel .kd-gallery-item {
  flex: 0 0 calc((100% - (var(--g-cols, 4) - 1) * var(--g-gap)) / var(--g-cols, 4));
  scroll-snap-align: start;
}
.kd-gallery-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.kd-gallery-nav[hidden] { display: none; }
.kd-gallery-arrow {
  width: 46px; height: 46px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.kd-gallery-arrow .i { width: 18px; height: 18px; }
.kd-gallery-arrow:hover { border-color: var(--plum); color: var(--plum); }
.kd-gallery-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kd-gallery-arrow:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--ink); }

@media (max-width: 1024px) {
  .kd-gallery--grid .kd-gallery-track { grid-template-columns: repeat(var(--g-cols-t, 3), minmax(0, 1fr)); }
  .kd-gallery--masonry .kd-gallery-track { columns: var(--g-cols-t, 3); }
  .kd-gallery--carousel .kd-gallery-item { flex-basis: calc((100% - (var(--g-cols-t, 3) - 1) * var(--g-gap)) / var(--g-cols-t, 3)); }
}
@media (max-width: 720px) {
  .kd-gallery--grid .kd-gallery-track { grid-template-columns: repeat(var(--g-cols-m, 2), minmax(0, 1fr)); }
  .kd-gallery--masonry .kd-gallery-track { columns: var(--g-cols-m, 2); }
  /* A peek of the next image hints that the row scrolls. */
  .kd-gallery--carousel .kd-gallery-item { flex-basis: calc((100% - (var(--g-cols-m, 2) - 1) * var(--g-gap)) / var(--g-cols-m, 2) - 18px); }
}

/* Lightbox */
.kd-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px); background: rgba(var(--ink-rgb), .92);
}
.kd-lightbox[hidden] { display: none; }
.kd-lightbox-figure { margin: 0; max-width: min(1100px, 100%); display: grid; gap: 12px; justify-items: center; }
.kd-lightbox-figure img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: var(--radius); }
.kd-lightbox-figure figcaption { color: var(--cream); font-size: .92rem; text-align: center; max-width: 60ch; }
.kd-lightbox-close, .kd-lightbox-arrow {
  position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(var(--white-rgb), .12); color: var(--cream); cursor: pointer;
}
.kd-lightbox-close:hover, .kd-lightbox-arrow:hover { background: rgba(var(--white-rgb), .24); }
.kd-lightbox-close:focus-visible, .kd-lightbox-arrow:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
.kd-lightbox .i { width: 20px; height: 20px; }
.kd-lightbox-close { top: 16px; right: 16px; }
.kd-lightbox-arrow--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.kd-lightbox-arrow--next { right: 16px; top: 50%; transform: translateY(-50%); }
.kd-lightbox-arrow[hidden] { display: none; }
.kd-lightbox-count { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: var(--cream); font-size: .8rem; letter-spacing: .12em; }
html.kd-lightbox-open { overflow: hidden; }
@media (max-width: 720px) {
  .kd-lightbox-arrow { top: auto; bottom: 10px; transform: none; }
  .kd-lightbox-arrow--prev { left: 16px; }
  .kd-lightbox-arrow--next { right: 16px; }
}

/* Embed */
.kd-embed .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.kd-embed-inner--narrow { max-width: calc(720px + 2 * var(--gutter)); }
.kd-embed-inner--full { width: 100%; }
.kd-embed-body > :first-child { margin-top: 0; }
.kd-embed-body iframe { max-width: 100%; }
.kd-embed-cta { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 44px); }
.kd-embed + .kd-embed, .kd-gallery + .kd-gallery { padding-top: 0; }

/* ==========================================================================
   Section spacing (1.11.0)
   Every section had up to 144px of padding above and below, so two
   neighbouring sections were separated by up to 288px of empty space.
   One place controls it now: --section-y (the gap between sections).
   ========================================================================== */
:root { --section-y: clamp(44px, 5.5vw, 84px); }

/* Neighbouring sections on the plain page background share one gap: the
   second one drops its top padding. Sections with their own background
   colour (categories, the sand "edit" band, philosophy, journal, trust,
   newsletter, lilac galleries) keep full padding so their colour band
   still has breathing room inside it. */
:where(.section, .values):not(.categories, .edit, .philosophy, .journal, .trust, .newsletter, .section--mist, .page-head, .woo-page)
  + .section:not(.categories, .edit, .philosophy, .journal, .trust, .newsletter, .section--mist, .woo-page) {
  padding-top: 0;
}

/* Headings and "view all" links. */
.section-head { margin-bottom: clamp(24px, 3vw, 44px); }
.section-foot { margin-top: clamp(28px, 3.5vw, 44px); }
.stitch-rule { margin-block: clamp(24px, 3.5vw, 48px); }

/* Bands with their own padding. */
.trust { padding-block: clamp(36px, 4.5vw, 60px); }
.newsletter { padding-block: var(--section-y); }
.site-footer { padding-top: clamp(48px, 6vw, 80px); }
.footer-word { margin-top: clamp(36px, 5vw, 64px); }

/* Page title band on inner pages. */
.page-head {
  padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px));
  padding-bottom: clamp(24px, 3vw, 40px);
}
.page-head + .section { padding-top: clamp(32px, 4vw, 56px); }

/* Search results and 404-style empty states. */
.search-listing .search-block + .search-block { margin-top: clamp(36px, 4.5vw, 60px); }
.product-missing, .cart-empty-page { padding-block: clamp(40px, 6vw, 80px); }

/* ==========================================================================
   Header dropdown (1.14.0)
   - An invisible bridge covers the gap between the menu item and the panel,
     so moving the pointer down no longer closes it.
   - The panel stays usable for a moment after the pointer leaves, so a
     slightly wobbly path back into it doesn't drop it.
   - The main menu's wide spacing no longer leaks into the panel.
   ========================================================================== */
.primary-nav .has-sub::after {
  content: ""; position: absolute; top: 100%; left: -24px; right: -24px; height: 22px;
}
.primary-nav .has-sub > a { padding-right: 0; }
.sub-toggle .i { transition: transform .35s var(--ease-out); }
.has-sub:hover .sub-toggle .i, .has-sub:focus-within .sub-toggle .i, .has-sub.is-open .sub-toggle .i { transform: rotate(270deg); }
.has-sub:hover .sub-toggle, .has-sub.is-open .sub-toggle { transform: none; }

.primary-nav .submenu {
  top: calc(100% + 14px); left: 50%; min-width: 248px; padding: 10px;
  transform: translate(-50%, 10px);
  background: rgba(var(--white-rgb), .97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--plum-rgb), .10); border-top: 0; border-radius: 14px;
  box-shadow: 0 1px 0 rgba(var(--gold-rgb), .55) inset, 0 24px 60px -18px rgba(var(--plum-rgb), .35), 0 6px 18px -8px rgba(var(--ink-rgb), .12);
  pointer-events: auto;
  /* Closing: fade out after a short grace period. */
  transition: opacity .22s var(--ease) .18s, transform .3s var(--ease-out) .18s, visibility 0s .5s;
}
/* Small pointer toward the menu item. */
.primary-nav .submenu::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
  background: inherit; border-left: 1px solid rgba(var(--plum-rgb), .10); border-top: 1px solid rgba(var(--plum-rgb), .10);
  transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0;
}
.primary-nav .has-sub:hover .submenu,
.primary-nav .has-sub:focus-within .submenu,
.primary-nav .has-sub.is-open .submenu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .25s var(--ease), transform .35s var(--ease-out), visibility 0s;
}
.primary-nav .submenu ul { display: grid; gap: 2px; justify-content: stretch; }
.primary-nav .submenu li { display: block; }
.primary-nav .submenu a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border-radius: 9px;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink); white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), padding .3s var(--ease-out);
}
/* A fine arrow slides in on hover. */
.primary-nav .submenu a::after {
  content: "→"; display: block; position: static; height: auto; background: none;
  font-family: var(--sans); font-size: .9rem; color: var(--plum);
  opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .3s var(--ease-out);
}
.primary-nav .submenu a:hover, .primary-nav .submenu a:focus-visible {
  background: var(--mist); color: var(--plum); padding-left: 20px;
}
.primary-nav .submenu a:hover::after, .primary-nav .submenu a:focus-visible::after { opacity: 1; transform: none; }
.primary-nav .submenu a[aria-current="page"] { color: var(--plum); }
.primary-nav .submenu a[aria-current="page"]::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); transform: translateY(-50%);
}
@media (prefers-reduced-motion: reduce) {
  .primary-nav .submenu, .primary-nav .submenu a, .primary-nav .submenu a::after { transition: none; }
}

/* ---- Mobile menu: collapsible submenu groups (1.14.0) ---- */
.mobile-nav-list .mnav-row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.mobile-nav-list .mnav-row > a { flex: 1; border-bottom: 0; }
.mnav-toggle {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--plum); cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.mnav-toggle span::before, .mnav-toggle span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .35s var(--ease-out);
}
.mnav-toggle span::after { transform: translate(-50%, -50%) rotate(90deg); }
.mnav-toggle[aria-expanded="true"] { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.mnav-toggle[aria-expanded="true"] span::after { transform: translate(-50%, -50%) rotate(0deg); }
.mnav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Collapsed until opened (only when JavaScript runs, so links are never lost). */
.mnav-sub { display: grid; grid-template-rows: 1fr; }
.js .mnav-sub { grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.js .mnav-sub.is-open { grid-template-rows: 1fr; }
.mnav-sub > ul { overflow: hidden; min-height: 0; }
.js .mnav-sub:not(.is-open) > ul { visibility: hidden; transition: visibility 0s .4s; }
.mnav-sub > ul { padding: 4px 0 10px 16px; border-left: 1px solid rgba(var(--gold-rgb), .45); margin-left: 4px; }
.mobile-nav-list .mnav-sub a {
  padding: 10px 0; border-bottom: 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: .01em; color: var(--ink-2);
}
.mobile-nav-list .mnav-sub a[aria-current="page"], .mobile-nav-list .mnav-sub a:hover { color: var(--plum); }
.mobile-nav-list .mnav-sub li:first-child a { padding-top: 12px; }
.mobile-nav-list .mnav-parent > .mnav-sub { border-bottom: 1px solid var(--line); }
.mobile-nav-list--small .mnav-toggle { width: 32px; height: 32px; }
@media (prefers-reduced-motion: reduce) { .js .mnav-sub, .mnav-toggle span::before, .mnav-toggle span::after { transition: none; } }