/*
 * Museek header, announcement bar and hero.
 *
 * Values are taken from museekmerch.com as measured in the browser: the utility strip is
 * #121212 at 40px tall with 13.65px/700 type on 1.05px letter-spacing; the header is white
 * with a 1px rgba(18,18,18,.08) rule beneath, 20px of vertical padding and a 1680px content
 * width; navigation links are 14.7px/400 at rgba(18,18,18,.75).
 *
 * Everything is scoped under body.yme-mkh so the rest of the site is untouched.
 */

body.yme-mkh {
  --mkh-ink: #121212;
  --mkh-ink-soft: rgba(18, 18, 18, .75);
  --mkh-rule: rgba(18, 18, 18, .08);
  --mkh-paper: #fff;
  --mkh-bar: #121212;
  --mkh-bar-ink: #fff;
  --mkh-bar-rule: rgba(255, 255, 255, .08);
  --mkh-width: 1680px;
  --mkh-icon: 44px;
  --mkh-gutter: clamp(1rem, 4vw, 3.28rem);
  --mkh-font: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ------------------------------------------------------- opting out of the pill button
 *
 * This shop's Customiser "Additional CSS" turns every <button> into a pill:
 *
 *   .button, button, input[type=submit], ... {
 *     border-radius:999px !important; padding:.74em 1.7em !important; border:none !important;
 *   }
 *
 * plus a translateY lift on hover. WordPress prints that block inline at wp_head 101,
 * so it lands after this stylesheet and wins on !important as well as on order. It is
 * the right treatment for shop buttons and the wrong one for carousel controls, which
 * are fixed-size icons — the padding alone inflates a 28px caret to 54px, and the forced
 * border strips the outline off the hero dots.
 *
 * These four controls opt out. Every other button on the site keeps the owner's styling.
 */
body.yme-mkh .mkh__icon,
body.yme-mkh .mkh-ann__btn,
body.yme-mkh .mkh-hero__btn,
body.yme-mkh .mkh-hero__dot {
  padding: 0 !important;
  box-shadow: none !important;
}

body.yme-mkh .mkh__icon:hover,
body.yme-mkh .mkh-ann__btn:hover,
body.yme-mkh .mkh-hero__btn:hover,
body.yme-mkh .mkh-hero__dot:hover {
  transform: none;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------- announcement bar */

body.yme-mkh .mkh-utility {
  background: var(--mkh-bar);
  border-bottom: 1px solid var(--mkh-bar-rule);
  color: rgba(255, 255, 255, .75);
  font-family: var(--mkh-font);
}

/* Three tracks, with the first left empty: that puts the carousel on the true centre of
   the page rather than the centre of the space left over beside the links. */
body.yme-mkh .mkh-utility__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--mkh-width);
  margin: 0 auto;
  padding: 0 var(--mkh-gutter);
  min-height: 40px;
}

body.yme-mkh .mkh-ann {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
}

body.yme-mkh .mkh-ann__slides {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  /* Slides share one grid cell, so the bar never jumps between messages. */
  display: grid;
}

body.yme-mkh .mkh-ann__slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease;
}

body.yme-mkh .mkh-ann__slide.is-active {
  opacity: 1;
  visibility: visible;
}

body.yme-mkh .mkh-ann__message {
  margin: 0;
  padding: .65rem 0;
  color: var(--mkh-bar-ink);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 1.05px;
  line-height: 1.3;
  text-align: center;
}

body.yme-mkh .mkh-ann__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Storefront gives every button generous padding and a minimum width; the basis here
     pins the caret to its own size instead of inheriting that. */
  flex: 0 0 28px;
  width: 28px;
  min-width: 0;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--mkh-bar-ink);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s ease;
}

body.yme-mkh .mkh-ann__btn:hover,
body.yme-mkh .mkh-ann__btn:focus-visible { opacity: 1; }

body.yme-mkh .mkh-ann__caret {
  width: 10px;
  height: 6px;
}

/* One caret glyph, rotated for each direction, as the reference does. */
body.yme-mkh .mkh-ann__btn--prev .mkh-ann__caret { transform: rotate(90deg); }
body.yme-mkh .mkh-ann__btn--next .mkh-ann__caret { transform: rotate(-90deg); }

body.yme-mkh .mkh-utility__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 0 0 auto;
}

body.yme-mkh .mkh-utility__links a {
  color: var(--mkh-bar-ink);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  white-space: nowrap;
}

body.yme-mkh .mkh-utility__links a:hover,
body.yme-mkh .mkh-utility__links a:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------------------- header */

/* Storefront pushes the header away from the content when there is no breadcrumb, via
   `.home.page:not(.page-template-template-homepage) .site-header{margin-bottom:4.2358em}`
   and three siblings of it. That selector scores 0-4-0, which outruns anything sensible
   written here, so the 68px it adds is cleared outright — the hero is meant to sit
   directly beneath the header, as it does on the reference. */
body.yme-mkh .site-header {
  margin-bottom: 0 !important;
  padding: 0;
  background: var(--mkh-paper);
  border-bottom: 1px solid var(--mkh-rule);
}

body.yme-mkh .mkh {
  max-width: var(--mkh-width);
  margin: 0 auto;
  padding: 0 var(--mkh-gutter);
  font-family: var(--mkh-font);
}

/* Row one: search left, wordmark centred, icons right. The side columns are equal so
   the wordmark lands on the true centre regardless of how wide the icons get. */
body.yme-mkh .mkh__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 20px 0;
}

body.yme-mkh .mkh__left { justify-self: start; }
body.yme-mkh .mkh__brand { justify-self: center; text-align: center; }

body.yme-mkh .mkh__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  justify-self: end;
}

body.yme-mkh .mkh__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mkh-icon);
  height: var(--mkh-icon);
  padding: 0;
  border: 0;
  background: none;
  color: var(--mkh-ink);
  cursor: pointer;
  text-decoration: none;
  border-radius: 50%;
  transition: background-color .2s ease;
}

body.yme-mkh .mkh__icon:hover { background: rgba(18, 18, 18, .05); }
body.yme-mkh .mkh__svg { width: 22px; height: 22px; }

/* Wordmark, for the case where no custom logo is set: the site title carries the brand and
   is set in the museekmerch manner: small, bold, widely tracked, uppercase. The shop does
   have a logo now, so this is the fallback path — it still matters, because deleting the
   logo attachment drops the header straight back onto it. */
body.yme-mkh .mkh__brand .site-title,
body.yme-mkh .mkh__brand .logo {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.yme-mkh .mkh__brand .site-title a,
body.yme-mkh .mkh__brand .logo a {
  color: var(--mkh-ink);
  text-decoration: none;
}

body.yme-mkh .mkh__brand .site-description { display: none; }

/* The York Music Education logo.
 *
 * It is a stacked lockup — the mark, then "York / Music / Education" on three lines — so it
 * is much taller for its width than the reference's 110x33 wordmark, and height is what
 * governs legibility rather than width. In the source art "Education" is 46px of the
 * lockup's 286px, so the cap height on screen is 16% of whatever height is set here. 64px
 * puts it at ~10px, which is the floor for a line this small; anything under about 58px and
 * the third line turns into a smudge. The header row grows from 84px to 104px as a result,
 * which is the honest cost of a three-line logo.
 *
 * Two rules have to be answered rather than merely overridden:
 *   - Storefront's `.site-header .custom-logo-link img{width:100%;max-width:210px}` would
 *     stretch the logo to the width of the centre grid track, so width is named back.
 *   - The Customiser's Additional CSS sets `.site-header .custom-logo{max-height:80px}` at
 *     (0,2,0) and prints after this file, so the selector here is deliberately (0,2,2).
 */
body.yme-mkh .mkh__brand img,
body.yme-mkh .mkh__brand .custom-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 64px;
  max-height: 64px;
  object-fit: contain;
}

/* .custom-logo-link carries Storefront's 1.41575em bottom margin outside .site-header; it
   is zeroed inside, but say it here too so the brand cell is never offset. */
body.yme-mkh .mkh__brand .custom-logo-link {
  display: block;
  margin: 0;
  line-height: 0;
}

/* Row two: navigation, centred beneath.
 *
 * Dormant rather than dead: the row is not printed while the navigation is hidden across the
 * site (YME_MKH_Header::show_nav()). It is kept whole so that flipping that filter brings the
 * menu back in its original form rather than an unstyled Storefront list. */
body.yme-mkh .mkh__nav-row {
  display: flex;
  justify-content: center;
}

body.yme-mkh .mkh__nav-row .main-navigation {
  width: auto;
  float: none;
  margin: 0;
}

body.yme-mkh .mkh__nav-row .primary-navigation { display: block; }

body.yme-mkh .mkh__nav-row ul.menu,
body.yme-mkh .mkh__nav-row ul.nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.yme-mkh .mkh__nav-row ul.menu > li,
body.yme-mkh .mkh__nav-row ul.nav-menu > li {
  float: none;
  position: relative;
  margin: 0;
}

body.yme-mkh .mkh__nav-row ul.menu > li > a,
body.yme-mkh .mkh__nav-row ul.nav-menu > li > a {
  display: block;
  padding: 12.6px;
  color: var(--mkh-ink-soft);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .63px;
  text-decoration: none;
}

body.yme-mkh .mkh__nav-row ul.menu > li > a:hover,
body.yme-mkh .mkh__nav-row ul.nav-menu > li > a:hover { color: var(--mkh-ink); }

/* What a click gives back, in place of the box the browser used to draw: for as long as
   the press lasts the label goes to full ink and picks up the same underline the current
   page carries below, so the item you hit is marked in the header's own language and the
   mark hands over to the current-page underline once the new page paints. */
body.yme-mkh .mkh__nav-row ul.menu > li > a:active,
body.yme-mkh .mkh__nav-row ul.nav-menu > li > a:active {
  color: var(--mkh-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The reference underlines the page you are on. */
body.yme-mkh .mkh__nav-row .current-menu-item > a,
body.yme-mkh .mkh__nav-row .current_page_item > a {
  color: var(--mkh-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Dropdowns. This menu is currently flat, so nothing renders until child items are added
   in Appearance > Menus, at which point they inherit the reference panel treatment. */
body.yme-mkh .mkh__nav-row ul.menu ul.sub-menu,
body.yme-mkh .mkh__nav-row ul.nav-menu ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  display: block;
  min-width: 240px;
  margin: 0;
  padding: .75rem 0;
  background: var(--mkh-paper);
  border: 1px solid var(--mkh-rule);
  box-shadow: 0 14px 40px rgba(18, 18, 18, .12);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

body.yme-mkh .mkh__nav-row li:hover > ul.sub-menu,
body.yme-mkh .mkh__nav-row li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.yme-mkh .mkh__nav-row ul.sub-menu li { float: none; width: auto; }

body.yme-mkh .mkh__nav-row ul.sub-menu a {
  display: block;
  padding: .5rem 1.25rem;
  color: var(--mkh-ink-soft);
  font-size: .9rem;
  letter-spacing: .3px;
  text-decoration: none;
  white-space: nowrap;
}

body.yme-mkh .mkh__nav-row ul.sub-menu a:hover { color: var(--mkh-ink); }

/* Third level opens to the side. */
body.yme-mkh .mkh__nav-row ul.sub-menu ul.sub-menu { top: -.75rem; left: 100%; }

/* Cart, reused from Storefront so its AJAX fragments still refresh. */
/* The list holds two items: the basket link, and the mini-cart the drawer plugin hides.
   With the link's width set rather than derived from its content — the price and count
   inside it are taken out of flow — the list's own max-content comes out at 20px and the
   link spills into the gutter. Pinning the list to the icon size settles it. */
body.yme-mkh .mkh__right .site-header-cart {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 var(--mkh-icon);
  width: var(--mkh-icon);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Without this the list item shrinks to a third of the link inside it and the basket
   spills past the right-hand gutter. */
body.yme-mkh .mkh__right .site-header-cart > li {
  flex: 0 0 auto;
  margin: 0;
}

/* The reference shows a basket glyph with a count, not a running total. The price is
   hidden rather than removed, so WooCommerce's AJAX fragments keep refreshing it and the
   figure is still there for assistive tech. */
body.yme-mkh .mkh__right .site-header-cart .cart-contents {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mkh-icon);
  min-width: var(--mkh-icon);
  height: var(--mkh-icon);
  padding: 0;
  border-radius: 50%;
  color: var(--mkh-ink);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  /* Basket glyph, inline so it needs no icon font and follows the header colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23121212' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H6.7a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3Cpath d='M8 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  transition: background-color .2s ease;
}

body.yme-mkh .mkh__right .site-header-cart .cart-contents:hover { background-color: rgba(18, 18, 18, .05); }

/* Storefront prints the running total and "0 items" as text. Both are taken out of the
   visual flow but left in the accessibility tree, so a screen reader still hears the full
   "£0.00 0 items" and WooCommerce's fragments keep refreshing them. */
body.yme-mkh .mkh__right .site-header-cart .cart-contents .amount,
body.yme-mkh .mkh__right .site-header-cart .cart-contents .count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The sighted count is a bubble on the basket, printed only when it is worth showing. */
body.yme-mkh .mkh__right .site-header-cart .cart-contents .mkh-cart-count {
  position: absolute;
  top: 1px;
  right: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mkh-ink);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
}

/* The mini-cart is deliberately left alone: yme-cart-drawer suppresses the hover
   dropdown site-wide because clicking the basket now opens its drawer instead. Styling
   it here would only put two baskets in the same corner. */

/* Search panel, revealed by the left icon. */
body.yme-mkh .mkh__search {
  padding: 0 0 1.25rem;
  border-top: 1px solid var(--mkh-rule);
}

body.yme-mkh .mkh__search[hidden] { display: none; }
body.yme-mkh .mkh__search .site-search { margin: 0; padding: 1.25rem 0 0; width: 100%; }
body.yme-mkh .mkh__search .widget { margin: 0; padding: 0; }

/* Storefront paints a Font Awesome magnifier on the form itself, absolutely positioned at
   left:1.15em. At `padding:.85rem 1rem` the field's text began at 68px while the glyph
   occupied 69-84px, so the icon sat directly on the first characters typed. Glyph and
   padding are both pinned here so they cannot drift apart again. */
body.yme-mkh .mkh__search .widget_product_search form { position: relative; }

body.yme-mkh .mkh__search .widget_product_search form::before {
  top: 50%;
  left: 1.25rem;
  /* Half the glyph's own line-height, so it centres on the field at any field height. */
  margin-top: -.5em;
  color: var(--mkh-ink-soft);
}

body.yme-mkh .mkh__search input[type="search"] {
  width: 100%;
  /* Left padding clears the glyph: 1.25rem to its left edge, ~15px of glyph, then a gap. */
  padding: .85rem 1.5rem .85rem 3rem;
  border: 1px solid var(--mkh-rule);
  background: var(--mkh-paper);
  color: var(--mkh-ink);
  font-family: var(--mkh-font);
  font-size: 1rem;
  /* No border-radius here on purpose: the Customiser's Additional CSS pins search fields to
     `border-radius:999px !important`, so anything set here would silently lose. The pill is
     the site owner's choice and the padding above is sized for it. */
}

body.yme-mkh .mkh__search input[type="search"]:focus {
  outline: 2px solid var(--mkh-ink);
  outline-offset: -2px;
}

/* Storefront's mobile toggle is kept for small screens and hidden on desktop. The
   handheld menu is dealt with in PHP rather than here — see no_handheld_fallback(). */
body.yme-mkh .mkh__nav-row .menu-toggle { display: none; }

/* ------------------------------------------------------------- focus, not clicks
 *
 * Storefront ships `a:focus,input:focus,textarea:focus,button:focus{outline:2px solid #7f54b3}`
 * — a plain :focus, which Chrome matches on pointer focus where :focus-visible does not.
 * Clicking a header item therefore parked a hard box around it that stayed until the next
 * click landed elsewhere, reading as a stuck selection rather than as feedback.
 *
 * So the pointer ring is cleared across the header and the utility strip, and :focus-visible
 * draws the real one back for keyboard users — in this header's ink, or in the strip's white
 * where the ground is #121212. The search field keeps the inset ring set above, and the
 * :active treatments are what answer a click.
 */
body.yme-mkh .mkh a:focus,
body.yme-mkh .mkh button:focus,
body.yme-mkh .mkh-utility a:focus,
body.yme-mkh .mkh-utility button:focus {
  outline: 0;
}

body.yme-mkh .mkh a:focus-visible,
body.yme-mkh .mkh button:focus-visible {
  outline: 2px solid var(--mkh-ink);
  outline-offset: 2px;
}

body.yme-mkh .mkh-utility a:focus-visible,
body.yme-mkh .mkh-utility button:focus-visible {
  outline: 2px solid var(--mkh-bar-ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------- hero
 *
 * Dormant rather than dead, for the same reason as the navigation row above: the hero is
 * switched off (YME_MKH_Hero::is_enabled()) and prints nothing, and these rules are what it
 * comes back as. */

body.yme-mkh .mkh-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mkh-ink);
}

body.yme-mkh .mkh-hero__slides {
  display: grid;
  /* Matches the reference 669px desktop banner, shrinking sensibly on small screens. */
  height: clamp(360px, 56vw, 669px);
  /* The single track is pinned to the container. Left as the default `auto` it sizes to
     the tallest slide instead, and a square category image scaled to full width is far
     taller than the banner — which pushes the caption out through the bottom crop. */
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

body.yme-mkh .mkh-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  /* Grid items floor at min-content by default, which would undo the track above. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}

body.yme-mkh .mkh-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

body.yme-mkh .mkh-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The reference darkens the photograph so white type stays readable over it. The scrim
   is heavier here than there because these slides use the WooCommerce category images,
   which are pale and already carry their own lettering. */
body.yme-mkh .mkh-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

body.yme-mkh .mkh-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem var(--mkh-gutter);
  text-align: center;
}

body.yme-mkh .mkh-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--mkh-font);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

body.yme-mkh .mkh-hero__cta {
  display: inline-block;
  padding: .9rem 2.25rem;
  background: #fff;
  border: 1px solid #fff;
  color: var(--mkh-ink);
  font-family: var(--mkh-font);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

body.yme-mkh .mkh-hero__cta:hover,
body.yme-mkh .mkh-hero__cta:focus {
  background: transparent;
  color: #fff;
}

body.yme-mkh .mkh-hero__btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--mkh-ink);
  cursor: pointer;
  transition: background-color .2s ease;
}

body.yme-mkh .mkh-hero__btn:hover { background: #fff; }
body.yme-mkh .mkh-hero__btn svg { width: 24px; height: 24px; }
body.yme-mkh .mkh-hero__btn--prev { left: clamp(.5rem, 2vw, 1.5rem); }
body.yme-mkh .mkh-hero__btn--next { right: clamp(.5rem, 2vw, 1.5rem); }

body.yme-mkh .mkh-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

body.yme-mkh .mkh-hero__dot {
  width: 10px;
  height: 10px;
  /* The outline is the whole point of an inactive dot, and the Additional CSS above
     forces border:none on every button — so this one has to be stated as loudly. */
  border: 1px solid #fff !important;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}

body.yme-mkh .mkh-hero__dot.is-active { background: #fff; }

/* --------------------------------------------------------------------- small screens */

@media (max-width: 768px) {
  /* Too narrow for three tracks: the carousel and the links stack instead. */
  body.yme-mkh .mkh-utility__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: .5rem;
  }

  body.yme-mkh .mkh-ann { grid-column: 1; }

  body.yme-mkh .mkh-utility__links {
    grid-column: 1;
    justify-self: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: .35rem;
  }

  body.yme-mkh .mkh__bar { padding: 12px 0; }

  /* The centre track has to share the row with two 44px icons and the gutters, so the
     lockup comes down to 52px. "Education" is ~8px there — smaller than the desktop floor,
     but the alternative is a logo wider than the space it has. */
  body.yme-mkh .mkh__brand img,
  body.yme-mkh .mkh__brand .custom-logo {
    height: 52px;
    max-height: 52px;
  }

  /* Storefront's own toggle drives the menu below the tablet breakpoint. The rule sits on
     the row rather than the button because the Customiser CSS forces border:none on every
     button, which would erase a border set on the toggle itself. */
  body.yme-mkh .mkh__nav-row {
    display: block;
    border-top: 1px solid var(--mkh-rule);
  }

  /* The theme ships this as a 120px pill floated to the right
     (`button.menu-toggle{float:right;max-width:120px}`); here it is a full-width bar under
     the wordmark. The left padding clears the hamburger bars, which the theme pins at
     left:1em — and it has to be !important because the Customiser CSS puts .74em 1.7em on
     every button, which would otherwise slide the label under those bars. */
  body.yme-mkh .mkh__nav-row .menu-toggle {
    display: block;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: .85rem .5rem .85rem 2.6em !important;
    background: none;
    color: var(--mkh-ink);
    font-family: var(--mkh-font);
    font-weight: 700;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
  }

  body.yme-mkh .mkh__nav-row ul.menu,
  body.yme-mkh .mkh__nav-row ul.nav-menu { flex-direction: column; align-items: stretch; }

  body.yme-mkh .mkh__nav-row ul.menu > li > a,
  body.yme-mkh .mkh__nav-row ul.nav-menu > li > a {
    padding: .75rem 0;
    border-bottom: 1px solid var(--mkh-rule);
  }

  /* Dropdowns cannot hover on touch, so nested items simply stack. */
  body.yme-mkh .mkh__nav-row ul.sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0 1rem;
    border: 0;
    box-shadow: none;
  }

  body.yme-mkh .mkh-hero__btn { width: 38px; height: 38px; margin-top: -19px; }
  body.yme-mkh .mkh-hero__btn svg { width: 18px; height: 18px; }
}

/* Respect a reduced-motion preference: slides still change, they just do not animate. */
@media (prefers-reduced-motion: reduce) {
  body.yme-mkh .mkh-ann__slide,
  body.yme-mkh .mkh-hero__slide,
  body.yme-mkh .mkh__nav-row ul.sub-menu { transition: none; }
}