/* SEO shop-split header — click, cream panels. Hand-authored (not webpack).
 * Split 2026-09-18 from a single 41 KB seo-nav.css: this file is the always-
 * visible rail/nav/drawer chrome, enqueued blocking (it is in every route's
 * critical CSS). The desktop mega-panel dropdowns and their scrim moved to
 * seo-nav-panels.css, enqueued alongside it but excluded from critical CSS —
 * MegaPanels.tsx confirms every panel ships `hidden` with no open controller
 * on the Next frontend yet, so today none of that content can ever paint.
 * The .seo-nav__panel[hidden] / .seo-nav__scrim[hidden] rule stays HERE,
 * not in the panels file — it is what keeps the panel invisible before the
 * panels stylesheet (or its future controller) exists at all. Do not move it.
 */

:root {
  --seo-panel: #F6F2F0;
  --seo-gold: #D8B868;
  --seo-gold-dark: #8F7226;
  --seo-red: #C8102E;
  --seo-dark-red: #991026;
  --seo-warm: #F6F2F0;
  --seo-hairline: #DDD4D0; /* the standard hairline (surface rules), Mark 2026-10-17 */
  --seo-muted: #5c5754;
  --seo-brand: #252525;
  --seo-primary: #252525;
  --seo-ink: #000000;
  --seo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --seo-panel-top: 136px;
  --seo-wide: calc(1440px + 40px * 2);
  --seo-gutter: clamp(16px, 2.75vw, 40px);
  --seo-display: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", Times, serif;
}


h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.wp-block-heading {
  font-family: var(--seo-display);
  font-synthesis: none;
}

/* Display headings render at 600 on every page (Mark, 2026-10-18: the product
   pages' 600 goes site-wide; it was 400 elsewhere since 2026-09-30). The
   Playfair file is variable (400-900), so nothing is synthesised.
   Montserrat labels that are headings only for the outline are
   left out, so their own classes set the weight (GLB-1, 2026-09-30): the boot
   pages' uppercase eyebrows and group labels, and the phone Key features rows,
   which are Montserrat toggles only once pdpBody.js has built the button
   (below 768px). :is() keeps each selector's old specificity (h1 0,0,1; .h1 0,1,0)
   and :not(:where()) adds none, so every other heading resolves as before. */
:is(h1, h2, h3, h4, h5, h6):not(:where(.pdp-eyebrow, .pdp-label, .shape-guide__row-label, .pdp-features__title:has(> .pdp-features__toggle))),
:is(.h1, .h2, .h3, .h4, .h5, .h6, .wp-block-heading):not(:where(.pdp-eyebrow, .pdp-label, .shape-guide__row-label, .pdp-features__title:has(> .pdp-features__toggle))) {
  font-weight: 600 !important;
}

.seo-nav__trigger--shop,
.seo-nav-mobile__row--shop .seo-nav-mobile__top,
.seo-nav-mobile__equine-name {
  font-weight: 400;
  font-synthesis: none;
}


html.seo-nav-is-open {
  overflow: hidden;
}

/* Drop the site-container stacking context so the sticky pin can sit
   above body-level panels/scrim. Do not take the pin out of flow —
   position:fixed here is what made the hero jump. */
html.seo-nav-is-open .site-container.z-10 {
  z-index: auto;
  transition: none;
}

.seo-header-pin {
  position: sticky;
  top: 0;
  z-index: 1000;
  container-type: inline-size;
  transition: transform 320ms var(--seo-ease);
}

/* Logged in, WordPress's admin bar is fixed over the top of the window (32px; 46px on narrow screens, where it stops being
 * fixed below 601px). The header sticks under it, so the bar does not cover the header's top row and the guides' progress
 * line, which allows for the bar (laminitis-guide.css), meets the header's bottom edge. Stuck at 0 it sat 32px below it
 * (Mark, 2026-10-27). */
@media screen and (min-width: 783px) {
  .admin-bar .seo-header-pin {
    top: 32px;
  }
}

@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar .seo-header-pin {
    top: 46px;
  }
}

html.seo-nav-is-open .seo-header-pin {
  z-index: 1002;
}

html.seo-nav-is-hidden .seo-header-pin {
  transform: translateY(-100%);
  pointer-events: none;
}

.seo-header-pin #promo-banner {
  position: relative;
  background: var(--seo-red) !important;
  color: #fff !important;
  padding: 11px clamp(36px, 4cqi, 62px);
  text-align: center;
}

.seo-header-pin #promo-banner[hidden] {
  display: none !important;
}

.seo-header-pin #promo-banner .promo-banner__inner {
  position: relative;
  max-width: var(--seo-wide);
  margin: 0 auto;
  padding: 0 var(--seo-gutter);
}

.seo-header-pin #promo-banner .promo-banner__link,
.seo-header-pin #promo-banner .promo-banner__message {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  text-decoration: none;
  color: inherit;
  font-size: clamp(10px, 0.92cqi, 12.5px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.35;
  text-wrap: pretty;
}

.seo-header-pin #promo-banner .promo-banner__code-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.seo-header-pin #promo-banner .promo-banner__eyebrow {
  font-size: clamp(9px, 0.78cqi, 10.5px);
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #fff;
}

.seo-header-pin #promo-banner .promo-banner__code {
  background: var(--seo-gold);
  color: #000;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: clamp(10px, 0.92cqi, 12.5px);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.seo-header-pin #promo-banner .promo-banner__offer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.seo-header-pin #promo-banner .promo-banner__arrow {
  flex: none;
  color: var(--seo-gold);
}

.seo-header-pin #promo-banner .promo-banner__dismiss {
  appearance: none;
  position: absolute;
  top: 50%;
  right: clamp(10px, 1.4cqi, 26px);
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.seo-header-pin #promo-banner .promo-banner__dismiss:hover {
  color: #fff;
}

.header--seo {
  --seo-panel: #F6F2F0;
  contain: none;
  overflow: visible;
  padding: 0;
  min-height: 0;
  height: auto;
  background: #fff;
  border-bottom: 1px solid var(--seo-hairline);
  position: relative;
  top: auto;
  box-shadow: none;
}

.header--seo .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--seo-wide);
  height: auto;
  padding: 13px 18px;
  gap: 8px 16px;
}

.header--seo .header__logo {
  display: flex;
  align-items: center;
  flex: none;
}

.header--seo .header__logo-img,
.header--seo .header__logo-link img {
  max-height: 48px !important;
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
}

.seo-rail {
  display: none;
}

.seo-nav__size,
.seo-nav__size-wrap,
.seo-nav__vdiv {
  display: none;
}

.seo-nav {
  display: none;
  width: 100%;
  height: 100%;
  color: var(--seo-primary);
}

.header--seo .header__icons {
  align-items: center;
  gap: 16px;
  transform: none;
}

.header--seo .header__country-changer-wrapper {
  display: none;
}

.header--seo .seo-rail__ccy,
.header--seo .seo-rail__caret {
  display: none;
}

/* Visually hidden, still announced. The wide-width rule below undoes every
   property here — keep the two lists in step. */
.header--seo .seo-rail__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.header--seo .header__search,
.header--seo .header__cart {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--seo-primary);
  text-decoration: none;
  position: relative;
}

.header--seo .header__cart-counter {
  position: absolute;
  top: -4px;
  right: -6px;
  background: var(--seo-red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.header--seo .header__search-form {
  background: var(--seo-warm);
  padding: 20px 18px 18px;
  max-width: none;
  width: 100%;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.24);
}

.header--seo .header__search-form input[type="search"],
.header--seo .header__search-form input[name="s"],
.header--seo .header__search-form input#s {
  font-size: 17px;
  background: #fff;
  border: 1px solid var(--seo-hairline);
  border-radius: 10px;
  padding: 16px 20px;
  width: 100%;
}

.seo-search-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 16px;
}

.seo-search-popular__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seo-muted);
}

.seo-search-popular a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--seo-primary);
  text-decoration: none;
}

.seo-search-popular a:hover {
  color: var(--seo-red);
}

.header--seo .seo-rail__ccy::before {
  content: "USD";
}

html[data-country="CA"] .header--seo .seo-rail__ccy::before {
  content: "CAD";
}

html[data-country="US"] .header--seo .seo-rail__ccy::before {
  content: "USD";
}

/* —— Desktop / tablet nav items —— */

.seo-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.seo-nav__spacer {
  flex: 1;
  min-width: 12px;
}

.seo-nav__end {
  display: none;
}

.seo-nav__item {
  position: static;
  display: flex;
}

.seo-nav__trigger,
.seo-nav__link {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  color: inherit;
  transition: color 0.18s var(--seo-ease);
}

.seo-nav__trigger--brand,
.seo-nav__link {
  gap: 7px;
  padding: 8px 0;
  font-family: Montserrat, "Montserrat-fallback", sans-serif;
  font-size: clamp(11px, 0.9cqi, 12.5px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seo-primary);
}

.seo-nav__trigger:hover,
.seo-nav__link:hover {
  color: var(--seo-red);
}

.seo-nav__caret {
  flex: none;
  opacity: 0.45;
  transition: transform 0.22s var(--seo-ease);
}

.seo-nav__trigger--brand .seo-nav__caret {
  opacity: 0.5;
}

.seo-nav__trigger[aria-expanded="true"] {
  color: var(--seo-red);
}

.seo-nav__trigger--brand[aria-expanded="true"] {
  color: var(--seo-primary);
}

.seo-nav__trigger[aria-expanded="true"] .seo-nav__caret {
  transform: rotate(180deg);
}

.seo-nav__trigger[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  transform-origin: left center;
  animation: seo-rule-in 300ms var(--seo-ease) both;
}

.seo-nav__trigger--brand[aria-expanded="true"]::after {
  bottom: 0;
  background: var(--seo-gold);
}

@keyframes seo-rule-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


.seo-nav__panel[hidden],
.seo-nav__scrim[hidden] {
  display: none !important;
}


/* —— Tablet 641–1024 —— */

@media (min-width: 641px) {
  .header--seo {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 0;
    border-bottom: 1px solid var(--seo-hairline);
    position: relative;
  }

  .header--seo .wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: var(--seo-wide);
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(11px, 1.25cqi, 19px) var(--seo-gutter);
    gap: 10px 22px;
  }

  .seo-rail {
    display: block;
    flex: none;
    width: 100%;
    max-width: none;
    height: 40px;
    margin: 0;
    padding: 0;
    background: var(--seo-warm);
    border-bottom: 1px solid var(--seo-hairline);
  }

  .seo-rail__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--seo-wide);
    height: 40px;
    margin: 0 auto;
    padding: 0 var(--seo-gutter);
    padding-right: 300px;
  }

  .seo-rail__ship {
    margin: 0;
    max-width: var(--seo-wide);
    font-size: clamp(9px, 0.8cqi, 10.5px);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--seo-red);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .seo-rail__ship--full {
    display: none;
  }

  .seo-rail__ship--short {
    display: inline;
  }

  .header--seo .header__logo {
    height: auto;
  }

  .header--seo .header__logo-img,
  .header--seo .header__logo-link img {
    max-height: none !important;
    height: 73px !important;
    width: auto !important;
    max-width: none !important;
  }

  .header--seo .header__menu {
    display: flex !important;
    flex: 1 1 220px;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    contain: none;
    white-space: normal;
  }

  .header--seo .header__icons {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 40px;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: max(var(--seo-gutter), calc((100% - var(--seo-wide)) / 2 + var(--seo-gutter)));
    padding-right: max(var(--seo-gutter), calc((100% - var(--seo-wide)) / 2 + var(--seo-gutter)));
    background: transparent;
    z-index: 2;
    transform: none;
    pointer-events: none;
  }

  .header--seo .header__country-changer-wrapper {
    display: block;
  }

  .header--seo .header__icons > * {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 13px;
    gap: 7px;
    position: relative;
    flex: none;
    pointer-events: auto;
  }

  /* Old header CSS sizes .header__search to 24×24 (icon-only). The rail
     control is a labelled button, so that width stacks Search onto Cart. */
  .header--seo .header__search,
  .header--seo .header__cart {
    width: auto;
    min-width: 0;
    height: 40px;
    overflow: visible;
  }

  .header--seo .header__icons > * + * {
    border-left: 0;
  }

  .header--seo .header__icons > * + *::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 15px;
    background: var(--seo-hairline);
    transform: translateY(-50%);
  }

  .header--seo .seo-rail__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  .header--seo .seo-rail__label,
  .header--seo .seo-rail__ccy {
    display: inline;
    font-size: clamp(12px, 0.95cqi, 13px);
    font-weight: 700;
    color: var(--seo-primary);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  .header--seo .seo-rail__caret {
    display: block;
    opacity: 0.55;
    color: var(--seo-primary);
  }

  .header--seo .js-country-changer {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    filter: none !important;
  }

  .header--seo .js-country-changer > .seo-rail__caret {
    display: block;
  }

  .header--seo .header__country-changer--us img,
  .header--seo .header__country-changer--ca img {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  }

  .header--seo .header__search:hover .seo-rail__label,
  .header--seo .header__cart:hover .seo-rail__label,
  .header--seo .js-country-changer:hover .seo-rail__ccy {
    color: var(--seo-red);
  }

  .header--seo .header__cart-counter {
    position: static;
    top: auto;
    right: auto;
  }

  .header--seo .header__search svg,
  .header--seo .header__cart svg {
    width: 15px;
    height: 14px;
    flex: none;
    overflow: visible;
  }

  .seo-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    height: auto;
    gap: 10px 20px;
  }

  .seo-nav__end {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex: none;
    white-space: nowrap;
    min-height: 73px;
  }

  .seo-nav__size-wrap {
    display: none;
  }

  .seo-nav__size {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
    box-sizing: border-box;
    background: transparent;
    border: 2px solid var(--seo-gold);
    border-width: 2px;
    border-radius: 999px;
    padding: 8px 22px;
    color: var(--seo-ink);
    text-decoration: none;
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    transition: background 0.18s var(--seo-ease), border-color 0.18s var(--seo-ease), color 0.18s var(--seo-ease);
  }

  .seo-nav__size:hover {
    background: rgba(216, 184, 104, 0.14);
    border-color: #C0A055;
    color: var(--seo-ink);
  }

  .seo-nav__ruler {
    flex: none;
    color: var(--seo-ink);
  }

  .seo-nav__vdiv {
    display: block;
    width: 1px;
    height: 22px;
    background: var(--seo-hairline);
    flex: none;
  }

  .header--seo .resp-buttons {
    display: none !important;
  }

  .header--seo .header__search-form {
    padding: 32px var(--seo-gutter) 28px;
  }
}

/* —— Desktop ≥1025 —— */

@media (min-width: 1025px) {
  .seo-rail__inner {
    padding-right: 340px;
  }

  .seo-rail__ship--full {
    display: inline;
  }

  .seo-rail__ship--short {
    display: none;
  }

  .header--seo .header__logo {
    margin-right: 14px;
  }

  .header--seo .header__logo-img,
  .header--seo .header__logo-link img {
    height: 91px !important;
  }

  .seo-nav__size {
    border-width: 2px;
  }

  .seo-nav__end {
    min-height: 91px;
  }

  .header--seo .header__icons > * {
    padding: 0 15px;
  }

  .seo-nav__trigger--brand[aria-expanded="true"]::after {
    bottom: 2px;
  }

  .seo-nav__vdiv {
    height: 28px;
  }

}


/* No grey flash over a tapped link or photo in the mobile menu (Mark, 2026-10-29). Inherited, so it covers every link
   inside; keyboard focus keeps the outline below. */
.seo-nav-mobile,
.seo-drawer {
  -webkit-tap-highlight-color: transparent;
}

.seo-nav a:focus-visible,
.seo-nav button:focus-visible,
.seo-nav-mobile a:focus-visible,
.seo-nav-mobile button:focus-visible,
.header--seo a:focus-visible,
.header--seo button:focus-visible,
.resp-menu a:focus-visible,
.resp-menu button:focus-visible {
  outline: 2px solid var(--seo-red) !important;
  outline-offset: 2px !important;
}

/* The drawer container takes programmatic focus on open (see mobile-menu.js);
   the ring belongs on the controls inside it, not around the whole panel. */
.resp-menu:focus {
  outline: none;
}

@keyframes seo-ov-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}


/* —— Mobile drawer —— */

@media (max-width: 640px) {
  /* The bars are drawn at 27px. The button is a 24px border-box and still has the
     browser's 1px 6px padding, so the flex item shrinks into the leftover 12px. */
  .header--seo .menu-toggle {
    padding: 0;
  }

  .header--seo .menu-toggle__lines {
    flex: none;
  }

  .header--seo .header__menu {
    display: none !important;
  }

  .header--seo .header__icons {
    margin-left: auto;
    gap: 14px;
  }

  .header--seo .header__search svg,
  .header--seo .header__cart svg {
    width: 21px;
    height: 20px;
  }

  .seo-nav {
    display: none !important;
  }

  .resp-menu:has(.seo-nav-mobile) {
    background: #fff;
    width: 100%;
    right: -100%;
    color: var(--seo-primary);
    display: flex;
    flex-direction: column;
    transition-duration: 0.3s;
  }

  body.menu-open .resp-menu:has(.seo-nav-mobile) {
    transform: translateX(-100%);
  }

  .resp-menu:has(.seo-nav-mobile) .resp-menu__header {
    /* 74px, the page header's height on phones, so the logo stays put when the menu opens (2026-10-30). */
    height: 74px;
    flex: none;
    padding: 0 10px 0 18px;
    border-bottom: 1px solid var(--seo-hairline);
    align-items: center;
    background: #fff;
  }

  /* width/height auto: _a11y-fixes.scss fixes this link at 64 x 44px (an old CLS guard), and the image was contained inside that
     box, so the 44px -> 53px change of 2026-10-29 never showed (about 44px of logo was visible). The image's own height reserves
     its space now. */
  .resp-menu:has(.seo-nav-mobile) .resp-menu__logo {
    font-size: 0;
    text-decoration: none;
    width: auto;
    height: auto;
  }

  .resp-menu:has(.seo-nav-mobile) .resp-menu__logo img {
    display: block;
    /* 58px, the same as the page header's logo on phones (Mark, 2026-10-30: "the same size in the mobile menu and in the
       header", "10% bigger" than 53px). It was 53px from 2026-10-29, 44px from 2026-10-16, 32px before. */
    height: 58px;
    width: auto;
    max-height: 58px;
    max-width: none;
  }

  /* The page header's logo on phones matches the menu's 58px (was 48px). The bar keeps its 74px: 8px above and below the logo
     instead of 13px, so nothing that measures the header moves. */
  .header--seo .wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .header--seo .header__logo-img,
  .header--seo .header__logo-link img {
    max-height: 58px !important;
    height: 58px !important;
  }

  .resp-menu:has(.seo-nav-mobile) .resp-menu__logo::after {
    content: none;
  }

  .resp-menu:has(.seo-nav-mobile) .resp-menu__cart-wrap,
  .resp-menu:has(.seo-nav-mobile) .resp-menu__socials {
    display: none;
  }

  .resp-menu:has(.seo-nav-mobile) .resp-menu__meta .resp-buttons,
  .resp-menu:has(.seo-nav-mobile) .js-menu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }

  .resp-menu:has(.seo-nav-mobile) .js-menu-toggle:hover {
    background: var(--seo-warm);
  }

  .resp-menu:has(.seo-nav-mobile) .menu-toggle__lines,
  .resp-menu:has(.seo-nav-mobile) .menu-toggle__lines::before,
  .resp-menu:has(.seo-nav-mobile) .menu-toggle__lines::after {
    background: #252525;
  }

  .seo-nav-mobile {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #fff;
  }

  .seo-nav-mobile__util {
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
    background: var(--seo-warm);
    border-bottom: 1px solid var(--seo-hairline);
  }

  .seo-nav-mobile__currency-slot {
    flex: none;
    padding: 0;
    position: relative;
    /* Above the menu rows that follow it: the slot's entrance animation (transform, opacity) makes it its own stacking
       context, so its dropdown's z-index only counts inside the slot, and the Shop / Learn rows painted over the open
       list (Mark, 2026-10-30). */
    z-index: 3;
  }

  .seo-nav-mobile__currency-slot:empty {
    display: none;
  }

  .seo-nav-mobile__currency-slot .header__country-changer-wrapper {
    display: block;
    height: 50px;
    background: #fff;
    border: 1.5px solid #B1A29A;
    border-radius: 10px;
    padding: 0 10px 0 12px;
    transition: border-color 0.18s var(--seo-ease);
  }

  .seo-nav-mobile__currency-slot .header__country-changer-wrapper:hover {
    border-color: var(--seo-red);
  }

  .seo-nav-mobile__currency-slot .js-country-changer {
    width: auto;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    filter: none !important;
  }

  .seo-nav-mobile__currency-slot .js-country-changer > svg:first-of-type {
    display: none;
  }

  .seo-nav-mobile__currency-slot .header__country-changer--us,
  .seo-nav-mobile__currency-slot .header__country-changer--ca {
    width: 20px;
    height: 20px;
    flex: none;
  }

  .seo-nav-mobile__currency-slot .header__country-changer--us img,
  .seo-nav-mobile__currency-slot .header__country-changer--ca img {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
  }

  .seo-nav-mobile__currency-slot .seo-rail__ccy {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    color: var(--seo-primary);
  }

  .seo-nav-mobile__currency-slot .seo-rail__ccy::before,
  html[data-country="CA"] .seo-nav-mobile__currency-slot .seo-rail__ccy::before,
  html[data-country="US"] .seo-nav-mobile__currency-slot .seo-rail__ccy::before {
    content: "Currency";
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--seo-muted);
  }

  .seo-nav-mobile__currency-slot .seo-rail__ccy::after {
    content: "USD $";
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--seo-primary);
  }

  html[data-country="CA"] .seo-nav-mobile__currency-slot .seo-rail__ccy::after {
    content: "CAD $";
  }

  html[data-country="US"] .seo-nav-mobile__currency-slot .seo-rail__ccy::after {
    content: "USD $";
  }

  .seo-nav-mobile__currency-slot .js-country-changer > .seo-rail__caret {
    display: block;
    color: var(--seo-muted);
    margin-left: 4px;
  }

  .seo-nav-mobile__currency-slot .header__country-changer {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 6px);
    transform: none;
    margin-top: 0;
    background: #fff;
    width: auto;
    z-index: 5;
  }

  .seo-nav-mobile__search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid #B1A29A; /* a control: 1.5px #b1a29a, radius 10 (surface rules) */
    border-radius: 10px;
  }

  .seo-nav-mobile__search-icon {
    flex: none;
    color: var(--seo-muted);
  }

  .seo-nav-mobile__search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--seo-primary);
    outline: none;
    box-shadow: none;
    padding: 0;
  }

  .seo-nav-mobile__search input[type="search"]::placeholder {
    color: var(--seo-muted);
  }

  .seo-nav-mobile__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 8px;
    background: #fff;
  }

  .seo-nav-mobile__label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--seo-muted);
  }

  .seo-nav-mobile__label-rule {
    height: 1px;
    flex: 1;
    background: var(--seo-hairline);
  }

  .seo-nav-mobile__row {
    border-bottom: 1px solid var(--seo-hairline);
  }

  .seo-nav-mobile__top {
    appearance: none;
    background: none;
    border: 0;
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font-family: var(--seo-display);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--seo-primary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s var(--seo-ease);
  }

  .seo-nav-mobile__row--brand .seo-nav-mobile__top {
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-height: 52px;
    padding: 14px 18px;
    color: var(--seo-primary);
  }

  .seo-nav-mobile__top[aria-expanded="true"] {
    color: var(--seo-red);
  }

  .seo-nav-mobile__caret {
    flex: none;
    color: var(--seo-red);
    opacity: 1;
    transition: transform 0.22s var(--seo-ease);
  }

  .seo-nav-mobile__top[aria-expanded="true"] .seo-nav-mobile__caret {
    transform: rotate(180deg);
  }

  .seo-nav-mobile__panel {
    background: var(--seo-warm);
    border-top: 1px solid var(--seo-hairline);
    padding: 4px 0 8px;
    animation: seo-ov-in 220ms var(--seo-ease) both;
  }

  .seo-nav-mobile__row--other .seo-nav-mobile__panel,
  .seo-nav-mobile__row--learn .seo-nav-mobile__panel,
  .seo-nav-mobile__row--about .seo-nav-mobile__panel {
    padding: 4px 0 12px;
  }

  .seo-nav-mobile__panel[hidden] {
    display: none !important;
  }

  .seo-nav-mobile__group {
    padding: 12px 18px 2px;
    display: flex;
    flex-direction: column;
  }

  .seo-nav-mobile__heading {
    margin: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--seo-red);
  }

  .seo-nav-mobile__kicker {
    display: block;
    margin: 0;
    padding: 12px 18px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--seo-muted);
  }

  .seo-nav-mobile__link {
    display: flex;
    align-items: center;
    min-height: 46px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--seo-primary);
    text-decoration: none;
    padding: 0;
    border: 0;
  }

  .seo-nav-mobile__link:hover,
  .seo-nav-mobile__link:focus-visible {
    color: var(--seo-red);
  }

  .seo-nav-mobile__equine {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 58px;
    padding: 7px 18px;
    text-decoration: none;
    color: var(--seo-primary);
    border: 0;
  }

  /* Only where the pointer can hover: on a phone a tap sets :hover and the row flashes (Mark, 2026-10-29). */
  @media (hover: hover) {
    .seo-nav-mobile__equine:hover {
      background: #EFE7E3;
    }
  }

  .seo-nav-mobile__equine-img {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    object-fit: cover;
    object-position: center 38%;
    background: #fff;
  }

  .seo-nav-mobile__equine-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .seo-nav-mobile__equine-name {
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    font-synthesis: initial;
    letter-spacing: 0;
    color: var(--seo-primary);
  }

  .seo-nav-mobile__equine-boots {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--seo-muted);
  }

    .seo-nav-mobile__condition {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 58px;
    margin: 8px 18px 4px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid var(--seo-hairline);
    border-left: 4px solid var(--seo-red);
    border-radius: 10px;
    text-decoration: none;
    color: var(--seo-primary);
    position: relative;
  }

  .seo-nav-mobile__condition-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .seo-nav-mobile__chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--seo-red);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    padding: 2.5px 8px;
    border-radius: 50px;
  }

  .seo-nav-mobile__condition .seo-nav-mobile__equine-name {
    font-size: 15.5px;
  }

  .seo-nav-mobile__arrow {
    flex: none;
    margin-left: auto;
    color: var(--seo-red);
    fill: var(--seo-red);
  }

  .seo-nav-mobile__condition .seo-nav-mobile__arrow {
    position: static;
    transform: none;
  }

  .seo-nav-mobile__foot {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px 18px;
    background: #fff;
    border-top: 1px solid var(--seo-hairline);
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.06);
  }

  .seo-nav-mobile__size {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 16px 42px;
    border-radius: 999px;
    background: var(--seo-red);
    border: 2px solid var(--seo-red);
    color: #fff;
    text-decoration: none;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .seo-nav-mobile__size:hover {
    background: var(--seo-dark-red);
    border-color: var(--seo-dark-red);
    color: #fff;
  }

  .seo-nav-mobile__size-sub {
    margin: 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--seo-muted);
    letter-spacing: 0;
    text-transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-nav-mobile__panel,
  .seo-header-pin {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }

  .seo-nav__trigger,
  .seo-nav__link,
  .seo-nav__caret,
  .seo-nav-mobile__top,
  .seo-nav-mobile__caret,
  .seo-nav__size {
    transition-duration: 1ms !important;
  }
}

/* —— Shop menu redesign (plan 2026-10-15-shop-menu-redesign): Shop, Learn, About, Contact in one centred serif list —— */

.seo-nav__list {
  margin-inline: auto;
  gap: clamp(22px, 3cqi, 52px);
}

.seo-nav__list .seo-nav__trigger,
.seo-nav__list .seo-nav__link {
  gap: 8px;
  padding: 4px 0;
  font-family: var(--seo-display);
  font-size: clamp(18px, 1.6cqi, 25px);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--seo-primary);
}

.seo-nav__list .seo-nav__trigger[aria-expanded="true"] {
  color: var(--seo-red);
}

.seo-nav__list .seo-nav__trigger[aria-expanded="true"]::after {
  bottom: -2px;
  background: var(--seo-red);
}

.seo-nav__list .seo-nav__caret {
  opacity: 0.45;
}

@media (min-width: 641px) {
  .seo-nav {
    align-items: center;
    flex-wrap: nowrap;
  }

  .seo-nav__end {
    margin-left: 0;
  }
}

/* —— Mobile drawer, Shop: By Equine / By Product switch, drill-down thumbnail lists (plan 2026-10-15-shop-menu-redesign) —— */
@media (max-width: 640px) {
  .seo-nav-mobile__switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 4px 18px 10px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--seo-hairline);
    border-radius: 999px;
  }

  .seo-nav-mobile__switch-btn {
    appearance: none;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--seo-muted);
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .seo-nav-mobile__switch-btn[aria-selected="true"] {
    background: var(--seo-primary);
    color: #fff;
  }

  .seo-nav-mobile__equine-photo {
    flex: none;
    display: block;
  }

  .seo-nav-mobile__equine-name {
    text-decoration: none;
  }

  .seo-nav-mobile__drill-row {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    border-bottom: 1px solid var(--seo-hairline);
    background: transparent;
    color: var(--seo-primary);
    font-family: var(--seo-display);
    font-size: 22px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
  }

  .seo-nav-mobile__back {
    appearance: none;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--seo-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .seo-nav-mobile__back::before {
    content: "‹";
    margin-right: 8px;
    font-size: 20px;
    line-height: 1;
  }

  .seo-nav-mobile__drill-all {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--seo-primary);
    text-decoration: none;
  }

  .seo-nav-mobile__thumbrow {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 58px;
    padding: 7px 18px;
    border-top: 1px solid var(--seo-hairline);
    color: var(--seo-primary);
    text-decoration: none;
  }

  .seo-nav-mobile__thumb {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--seo-hairline);
  }

  .seo-nav-mobile__thumbrow-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .seo-nav-mobile__drill[hidden],
  .seo-nav-mobile__drill-index[hidden] {
    display: none !important;
  }
}

/* —— Phone drawer (rebuilt 2026-10-16, Mark: the drill-down built on an accordion was clunky) ——
   Two screens on one track: the top screen (Shop, Learn, About, Contact) and a section screen. Opening a row slides the track one
   screen left, Back slides it back. The off-stage screen is inert (assets/js/seo-nav.js). Each screen scrolls by itself. */
@media (max-width: 640px) {
  .seo-drawer__viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
  }

  .seo-drawer__track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 340ms cubic-bezier(0.22, 0.8, 0.25, 1);
    will-change: transform;
  }

  .seo-drawer.is-section .seo-drawer__track {
    transform: translate3d(-50%, 0, 0);
  }

  .seo-drawer.is-instant .seo-drawer__track {
    transition: none;
  }

  .seo-drawer__screen {
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #fff;
  }

  /* The top screen: Shop, Learn, About, Contact as one serif list. */
  .seo-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .seo-drawer__list li {
    border-bottom: 1px solid var(--seo-hairline);
  }

  .seo-drawer__row {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 14px 18px;
    border: 0;
    background: none;
    font-family: var(--seo-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--seo-primary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.18s var(--seo-ease), background 0.18s var(--seo-ease);
  }

  .seo-drawer__row:active {
    background: var(--seo-warm);
  }

  .seo-drawer__chevron {
    flex: none;
    color: var(--seo-red);
  }

  /* The section screen: a bar that stays put (Back and the section's name), then the section. */
  .seo-drawer__bar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    border-bottom: 1px solid var(--seo-hairline);
  }

  .seo-drawer__back {
    appearance: none;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    background: none;
    color: #2e2e2f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .seo-drawer__back::before {
    content: "\2039";
    margin-right: 8px;
    font-size: 22px;
    line-height: 1;
  }

  .seo-drawer__title {
    margin: 0;
    padding: 0 18px 12px;
    font-family: var(--seo-display);
    font-size: 28px;
    line-height: 1.1;
    color: var(--seo-red);
  }

  .seo-drawer__section {
    padding-bottom: 28px;
  }

  .seo-drawer__section[hidden] {
    display: none;
  }

  /* Shop › By Equine: larger photos now that the screen has the room (Mark, 2026-10-16). */
  .seo-drawer .seo-nav-mobile__equine {
    gap: 16px;
    min-height: 106px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--seo-hairline);
  }

  .seo-drawer .seo-nav-mobile__equine:last-child {
    border-bottom: 0;
  }

  /* The tile photos at their own shape (10:9), rounded, not a small circle: the animal is not cropped. */
  .seo-drawer .seo-nav-mobile__equine-img {
    width: 100px;
    height: 90px;
    border-radius: 10px;
    object-position: 50% 40%;
  }

  .seo-drawer .seo-nav-mobile__equine-name {
    font-size: 19px;
  }

  /* Shop: the pill switch. */
  .seo-drawer .seo-nav-mobile__switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 14px 18px 12px;
    padding: 4px;
    background: #ebe4e0;
    border: 0;
    border-radius: 999px;
  }

  .seo-drawer .seo-nav-mobile__switch-btn {
    min-height: 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    background: transparent;
    color: var(--seo-muted);
  }

  .seo-drawer .seo-nav-mobile__switch-btn[aria-selected="true"] {
    background: #fff;
    color: var(--seo-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }

  /* Shop › By Product: the boots as a plain list (the screen scrolls, not the list), then one quiet row for Accessories. */
  .seo-drawer__boots-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 18px 6px;
  }

  .seo-drawer__boots-title {
    font-family: var(--seo-display);
    font-size: 22px;
    line-height: 1.1;
    color: var(--seo-primary);
  }

  .seo-drawer__boots-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--seo-red);
    text-decoration: none;
    white-space: nowrap;
  }

  .seo-drawer__boots {
    padding: 0 18px;
    border-top: 1px solid var(--seo-hairline);
  }

  .seo-drawer__boot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--seo-hairline);
    color: var(--seo-primary);
    text-decoration: none;
  }

  .seo-drawer__boot:last-child {
    border-bottom: 0;
  }

  .seo-drawer__boot-photo {
    flex: none;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid var(--seo-hairline);
    border-radius: 10px;
    background: #fff;
  }

  .seo-drawer__boot-photo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .seo-drawer__boot-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .seo-drawer__boot-logo {
    display: flex;
    align-items: center;
    min-height: 26px;
  }

  .seo-drawer__boot-logo img {
    width: auto;
    max-width: 130px;
    height: auto;
    max-height: 26px;
    display: block;
  }

  .seo-drawer__boot-suffix {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.06em;
    color: #2d6fb7;
  }

  .seo-drawer__boot-name {
    font-family: var(--seo-display);
    font-size: 19px;
  }

  .seo-drawer__boot-best {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #3a3636;
  }

  .seo-drawer .consteed-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--seo-primary);
  }

  .seo-drawer .consteed-mark__icon {
    display: block;
    flex: none;
    width: 1.15em;
    height: 1.15em;
    color: #f0a000;
  }

  .seo-drawer .consteed-mark__word {
    display: inline-flex;
    white-space: nowrap;
  }

  .seo-drawer .consteed-mark__con {
    font-weight: 700;
  }

  .seo-drawer .consteed-mark__steed {
    font-weight: 300;
    color: #f0a000;
  }

  .seo-drawer__acc-row {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 18px;
    border: 0;
    border-top: 1px solid var(--seo-hairline);
    background: none;
    text-align: left;
    color: var(--seo-muted);
    cursor: pointer;
  }

  .seo-drawer__acc-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .seo-drawer__acc-title {
    font-family: var(--seo-display);
    font-size: 19px;
    line-height: 1.15;
  }

  .seo-drawer__acc-sub {
    font-size: 12px;
    line-height: 1.35;
    color: var(--seo-muted);
  }

  .seo-drawer__acc-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-height: 58px;
    padding: 8px 18px;
    border-top: 1px solid var(--seo-hairline);
    color: var(--seo-primary);
    text-decoration: none;
  }

  .seo-drawer__subback {
    appearance: none;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    background: none;
    color: #2e2e2f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .seo-drawer__subback::before {
    content: "\2039";
    margin-right: 8px;
    font-size: 22px;
    line-height: 1;
  }

  /* Learn and About: a lead story, then plain lists with an arrow. */
  .seo-drawer__feature {
    position: relative;
    display: block;
    margin: 14px 18px 4px;
    overflow: hidden;
    border-radius: 12px;
    background: #2e2e2f;
    color: #fff;
    text-decoration: none;
  }

  .seo-drawer__feature-img {
    display: block;
    width: 100%;
    height: 240px;
    max-width: none;
    object-fit: cover;
    object-position: 50% 12%;
  }

  .seo-drawer__feature-copy {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 44px 16px 14px;
    background: linear-gradient(to top, rgba(20, 18, 18, 0.88), rgba(20, 18, 18, 0));
  }

  .seo-drawer__feature-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d8b868;
  }

  .seo-drawer__feature-title {
    font-family: var(--seo-display);
    font-size: 22px;
    line-height: 1.15;
  }

  .seo-drawer__feature-sub {
    font-size: 12px;
    color: #e6dcd8;
  }

  .seo-drawer__group {
    padding: 18px 18px 0;
  }

  .seo-drawer__heading {
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--seo-red);
  }

  .seo-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 8px 0;
    border-top: 1px solid var(--seo-hairline);
    font-family: var(--seo-display);
    font-size: 18px;
    line-height: 1.25;
    color: var(--seo-primary);
    text-decoration: none;
  }

  .seo-drawer__link::after {
    content: "\2192";
    flex: none;
    margin-left: 12px;
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 13px;
    color: var(--seo-muted);
  }

  .seo-drawer__link--all {
    font-family: Montserrat, "Montserrat-fallback", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--seo-red);
  }

  .seo-drawer__link--pad {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* The footer button belongs to the top screen: it folds away as a section slides in. */
  .seo-drawer__foot {
    max-height: 160px;
    overflow: hidden;
    transition: max-height 340ms cubic-bezier(0.22, 0.8, 0.25, 1), opacity 200ms ease, padding 340ms ease, border-width 340ms ease;
  }

  .seo-drawer.is-section .seo-drawer__foot {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    box-shadow: none;
  }

  .seo-drawer__size-link,
  .seo-nav-mobile__size {
    min-height: 48px;
    padding: 12px 36px;
    font-size: 16px;
    line-height: 1.2;
  }

  .seo-nav-mobile__size-link {
    color: var(--seo-red);
    font-weight: 800;
    text-decoration: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .seo-drawer__track,
    .seo-drawer__foot {
      transition: none;
    }
  }
}

/* The currency control in the drawer: one short line (flag, "USD $", caret), and its country list opens from the left edge, as wide as
   its longest name ("United States (US)"); it was 86px and clipped. */
@media (max-width: 640px) {
  .seo-nav-mobile__currency-slot .seo-rail__ccy::before,
  html[data-country="CA"] .seo-nav-mobile__currency-slot .seo-rail__ccy::before,
  html[data-country="US"] .seo-nav-mobile__currency-slot .seo-rail__ccy::before {
    content: none;
  }

  .seo-nav-mobile__currency-slot .header__country-changer-wrapper {
    white-space: nowrap;
  }

  .seo-nav-mobile__currency-slot .header__country-changer {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    white-space: nowrap;
  }
}

/* The drawer's close button is an X: the middle bar of the hamburger must disappear when the menu is open. The rule that paints all
   three bars charcoal (.resp-menu:has(.seo-nav-mobile) .menu-toggle__lines) has the same weight as the theme's "active" rule and
   comes later, so the middle bar stayed and the X read as an asterisk. */
.resp-menu:has(.seo-nav-mobile) .menu-toggle--active .menu-toggle__lines {
  background: transparent;
}

/* Menu opens: the rows rise and fade in, one after another (Mark, 2026-10-17). The top list plays each time the menu opens; a section's rows play
   as the section slides in, and again when By Equine / By Product or another section is shown. Opacity and transform only; skipped for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes seo-drawer-in {
    from {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search,
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li,
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size,
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot {
    animation: seo-drawer-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 140ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(1),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(1),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(1),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(1) {
    animation-delay: 140ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(2),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(2),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(2),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(2) {
    animation-delay: 195ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(3),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(3),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(3),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(3) {
    animation-delay: 250ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(4),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(4),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(4),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(4) {
    animation-delay: 305ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(5),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(5),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(5),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(5) {
    animation-delay: 360ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(6),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(6),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(6),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(6) {
    animation-delay: 415ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(7),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(7),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(7),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(7) {
    animation-delay: 470ms;
  }

  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__search:nth-child(8),
  body.menu-open .seo-drawer__screen--top .seo-drawer__list > li:nth-child(8),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__size:nth-child(8),
  body.menu-open .seo-drawer__screen--top .seo-nav-mobile__currency-slot:nth-child(8) {
    animation-delay: 525ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch,
  .seo-drawer.is-section .seo-nav-mobile__equine,
  .seo-drawer.is-section .seo-drawer__boots-head,
  .seo-drawer.is-section .seo-drawer__boot,
  .seo-drawer.is-section .seo-drawer__row,
  .seo-drawer.is-section .seo-drawer__feature,
  .seo-drawer.is-section .seo-drawer__group,
  .seo-drawer.is-section .seo-drawer__link,
  .seo-drawer.is-section .seo-drawer__foot {
    animation: seo-drawer-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 140ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(1),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(1),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(1),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(1),
  .seo-drawer.is-section .seo-drawer__row:nth-child(1),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(1),
  .seo-drawer.is-section .seo-drawer__group:nth-child(1),
  .seo-drawer.is-section .seo-drawer__link:nth-child(1),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(1) {
    animation-delay: 140ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(2),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(2),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(2),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(2),
  .seo-drawer.is-section .seo-drawer__row:nth-child(2),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(2),
  .seo-drawer.is-section .seo-drawer__group:nth-child(2),
  .seo-drawer.is-section .seo-drawer__link:nth-child(2),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(2) {
    animation-delay: 195ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(3),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(3),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(3),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(3),
  .seo-drawer.is-section .seo-drawer__row:nth-child(3),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(3),
  .seo-drawer.is-section .seo-drawer__group:nth-child(3),
  .seo-drawer.is-section .seo-drawer__link:nth-child(3),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(3) {
    animation-delay: 250ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(4),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(4),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(4),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(4),
  .seo-drawer.is-section .seo-drawer__row:nth-child(4),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(4),
  .seo-drawer.is-section .seo-drawer__group:nth-child(4),
  .seo-drawer.is-section .seo-drawer__link:nth-child(4),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(4) {
    animation-delay: 305ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(5),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(5),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(5),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(5),
  .seo-drawer.is-section .seo-drawer__row:nth-child(5),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(5),
  .seo-drawer.is-section .seo-drawer__group:nth-child(5),
  .seo-drawer.is-section .seo-drawer__link:nth-child(5),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(5) {
    animation-delay: 360ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(6),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(6),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(6),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(6),
  .seo-drawer.is-section .seo-drawer__row:nth-child(6),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(6),
  .seo-drawer.is-section .seo-drawer__group:nth-child(6),
  .seo-drawer.is-section .seo-drawer__link:nth-child(6),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(6) {
    animation-delay: 415ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(7),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(7),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(7),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(7),
  .seo-drawer.is-section .seo-drawer__row:nth-child(7),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(7),
  .seo-drawer.is-section .seo-drawer__group:nth-child(7),
  .seo-drawer.is-section .seo-drawer__link:nth-child(7),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(7) {
    animation-delay: 470ms;
  }

  .seo-drawer.is-section .seo-nav-mobile__switch:nth-child(8),
  .seo-drawer.is-section .seo-nav-mobile__equine:nth-child(8),
  .seo-drawer.is-section .seo-drawer__boots-head:nth-child(8),
  .seo-drawer.is-section .seo-drawer__boot:nth-child(8),
  .seo-drawer.is-section .seo-drawer__row:nth-child(8),
  .seo-drawer.is-section .seo-drawer__feature:nth-child(8),
  .seo-drawer.is-section .seo-drawer__group:nth-child(8),
  .seo-drawer.is-section .seo-drawer__link:nth-child(8),
  .seo-drawer.is-section .seo-drawer__foot:nth-child(8) {
    animation-delay: 525ms;
  }

}

/* Shop > By Product on a phone (Mark, 2026-10-17): Accessories sits at the bottom of the screen, always in view; when the boot models
   do not all fit above it, the model list scrolls by itself. The other sections and By Equine keep the screen's own scroll. */
@media (max-width: 640px) {
  .seo-drawer__screen--section {
    display: flex;
    flex-direction: column;
  }

  .seo-drawer__screen--section > * {
    flex: none;
  }

  .seo-drawer__section[data-seo-section="shop"]:not([hidden]):has(#seo-mobile-tabpanel-product:not([hidden])) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .seo-drawer__section[data-seo-section="shop"] .seo-nav-mobile__switch,
  .seo-drawer__section[data-seo-section="shop"] #seo-mobile-tabpanel-equine {
    flex: none;
  }

  #seo-mobile-tabpanel-product:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #seo-mobile-tabpanel-product > [data-seo-drill-index]:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #seo-mobile-tabpanel-product > [data-seo-drill]:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  #seo-mobile-tabpanel-product .seo-drawer__boots-head {
    flex: none;
  }

  #seo-mobile-tabpanel-product .seo-drawer__boots {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #seo-mobile-tabpanel-product .seo-drawer__acc-row {
    flex: none;
    background: #fff;
    box-shadow: 0 -8px 14px -10px rgba(46, 46, 47, 0.35);
  }
}