/* mowers.cc
   Design tokens first, then layout, then components.
   Colors chosen to pass 4.5:1 on body text against the stone ground. */

:root {
  --stone: #EDEEEA;
  --stone-2: #E4E6E0;
  --panel: #F4F5F1;
  --white: #FFFFFF;
  --fir: #16301F;
  --fir-2: #1B3827;
  --fir-line: #2C4635;
  --ink: #16301F;
  --ink-2: #3C473F;
  --muted: #4A554D;
  --muted-2: #6B756D;
  --faint: #8E998F;
  --line: #DCDDD6;
  --line-2: #E4E5DE;
  --clay: #BF4A17;
  --clay-dark: #9C3A12;
  --clay-soft: #F6E9E2;
  --green: #1F6B3F;
  --green-dark: #1A5733;
  --green-soft: #E8F0E6;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-card: 0 2px 2px rgba(22,48,31,.04), 0 24px 36px -32px rgba(22,48,31,.6);
  --shadow-lift: 0 2px 2px rgba(22,48,31,.05), 0 12px 18px -10px rgba(22,48,31,.22), 0 44px 60px -40px rgba(22,48,31,.55);
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--clay); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .5em; }

.mcc-skip {
  position: absolute; left: -9999px; top: 0; background: var(--fir); color: #fff;
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r-sm) 0;
}
.mcc-skip:focus { left: 0; color: #fff; }

.mcc-wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(18px, 4vw, 36px); }

/* top bar + header */
.mcc-topbar { background: var(--fir); color: #CFD8CE; font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.mcc-topbar-inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding-block: 9px; }

.mcc-header { background: var(--stone); border-bottom: 1px solid var(--line); }
.mcc-header-inner { z-index: 2; }
.mcc-searchbar { position: relative; z-index: 1; }
.mcc-header-inner { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; padding-block: 18px; }
.mcc-searchbar { display: flex; justify-content: center; padding: 0 clamp(18px, 4vw, 36px) 18px; }
.mcc-logo { display: flex; align-items: center; gap: 10px; }
.mcc-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--fir); border-radius: 8px; color: var(--stone); }
.mcc-logo-text { font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -.03em; }
.mcc-logo-dot { color: var(--clay); }
.mcc-nav { display: flex; flex-wrap: wrap; gap: 4px; font-size: 15px; font-weight: 600; }
.mcc-nav a.is-current, .mcc-nav .current-menu-item > a { color: var(--clay); }

/* megamenu */
.mcc-nav-item { position: relative; }
.mcc-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: var(--r-pill); }
.mcc-nav-link:hover { background: var(--stone-2); }
.mcc-nav-item.is-open > .mcc-nav-link { background: var(--fir); color: var(--white); }
.mcc-nav-caret { transition: transform .18s ease; }
.mcc-nav-item.is-open .mcc-nav-caret { transform: rotate(180deg); }

/* The panel hangs off the nav row rather than the link, so it never runs off
   the edge of the window, and it sits over the search bar. Nobody is typing a
   search while reaching for a category. */
.mcc-mega {
  position: absolute; z-index: 60; top: 100%; left: 0; right: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
/* Keeps hover alive as the pointer leaves the link. */
.mcc-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.mcc-mega-inner { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 36px; padding: 28px 32px 32px; align-items: start; }
.mcc-mega-lead h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 8px; }
.mcc-mega-blurb { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.mcc-mega-guide { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--clay); }

.mcc-mega-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
.mcc-mega-picks a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); }
.mcc-mega-picks a:hover { background: var(--panel); }
.mcc-mega-thumb { flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--panel); border-radius: 9px; }
.mcc-mega-thumb img { max-width: 48px; max-height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.mcc-mega-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mcc-mega-award { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }
.mcc-mega-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.mcc-mega-meta { font-size: 13px; color: var(--muted-2); }
.mcc-mega-meta strong { color: var(--green); margin-right: 6px; }

@media (min-width: 1000px) {
  .mcc-header-inner { position: relative; }
  .mcc-nav-item { position: static; }
}

@media (max-width: 999px) {
  .mcc-mega { display: none; }
  .mcc-nav { gap: 14px; }
  .mcc-nav-link { padding: 6px 0; }
  .mcc-nav-link:hover { background: none; }
  .mcc-nav-caret { display: none; }
}

/* search, centred and wide, with results as you type */
.mcc-search {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: min(620px, 100%);
  background: var(--white); border: 1px solid var(--line);
  height: 52px; padding: 0 20px; border-radius: var(--r-pill); color: var(--muted-2);
  box-shadow: 0 1px 2px rgba(22,48,31,.04), 0 14px 24px -22px rgba(22,48,31,.6);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mcc-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.mcc-search input[type="search"] { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: inherit; font-size: 15px; color: var(--ink); }
.mcc-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.mcc-search-results {
  position: absolute; z-index: 70; top: calc(100% + 10px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); padding: 8px; max-height: 60vh; overflow-y: auto;
}
.mcc-search-hit { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); }
.mcc-search-hit:hover, .mcc-search-hit:focus { background: var(--panel); outline: none; }
.mcc-search-hit img { flex: 0 0 44px; height: 44px; object-fit: contain; }
.mcc-search-hit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mcc-search-hit-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.mcc-search-hit-meta { font-size: 12px; color: var(--muted-2); }
.mcc-search-hit-score { font-family: var(--display); font-size: 19px; font-weight: 800; color: var(--green); }
.mcc-search-empty { margin: 0; padding: 14px; font-size: 14px; color: var(--muted-2); }
.mcc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* layout */
.mcc-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; padding-block: 32px 60px; }
.mcc-col-main { flex: 999 1 560px; min-width: 0; }
.mcc-col-side { flex: 0 1 336px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* category hero */
.mcc-cat-hero { position: relative; overflow: hidden; background: var(--stone-2); border-bottom: 1px solid var(--line); }
.mcc-cat-hero-inner { position: relative; z-index: 1; padding-block: 18px 74px; }
.mcc-cat-head { max-width: 640px; }
.mcc-cat-head-centered { max-width: 760px; margin-inline: auto; text-align: center; }
.mcc-cat-head-centered .mcc-trust { justify-content: center; }
.mcc-cat-title { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.04em; margin-bottom: 16px; }
.mcc-cat-intro { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; }
.mcc-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.mcc-trust li { display: flex; align-items: center; gap: 8px; }
.mcc-trust .mcc-icon { color: var(--green); }

.mcc-crumbs { font-size: 13px; font-weight: 600; color: var(--muted-2); margin-bottom: 26px; }
.mcc-crumbs a { color: var(--muted-2); }
.mcc-crumb-sep { padding: 0 7px; color: #AAB3AB; }
.mcc-crumb-wrap { padding-top: 18px; }

/* decor */
.mcc-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.mcc-decor-item { position: absolute; filter: drop-shadow(0 16px 16px rgba(22,48,31,.2)); }
.mcc-decor-grass { position: absolute; bottom: 0; }
.mcc-decor-grass-left { left: -14px; }
.mcc-decor-grass-right { right: -14px; transform: scaleX(-1); }
.mcc-decor-corner { position: absolute; right: -10px; bottom: 0; opacity: .5; pointer-events: none; }

/* filter bar */
.mcc-filterbar { background: var(--stone); border-bottom: 1px solid var(--line); }
.mcc-filterbar-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-block: 18px; }
.mcc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mcc-chip { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid #CBCDC4; background: var(--white); font-size: 14px; font-weight: 600; }
.mcc-chip.is-active { background: var(--fir); border-color: var(--fir); color: #fff; font-weight: 700; }
.mcc-chip.is-active:hover { color: #fff; }
.mcc-sortnote { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }

/* cards */
.mcc-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.mcc-card-featured { overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.mcc-card-row { overflow: hidden; margin-bottom: 16px; border-radius: var(--r-md); }
.mcc-card-split { display: flex; flex-wrap: wrap; }
.mcc-card-media { position: relative; flex: 0 0 190px; min-height: 176px; background: var(--panel); border-right: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; padding: 18px; }
.mcc-card-media-lg { flex-basis: 280px; min-height: 270px; }
.mcc-card-media img { max-height: 210px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.mcc-card-body { flex: 999 1 360px; min-width: 0; padding: 22px; }
.mcc-card-title { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.mcc-card-title-sm { font-size: 22px; }
.mcc-card-verdict { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; }

.mcc-rank { position: absolute; top: 14px; left: 16px; font-family: var(--display); font-size: 44px; font-weight: 800; letter-spacing: -.05em; color: #D5D8CF; line-height: 1; }
.mcc-rank-sm { font-size: 30px; }

.mcc-img-placeholder { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }

.mcc-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.mcc-badge { display: inline-block; padding: 6px 11px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mcc-badge-dark { background: var(--fir); color: #fff; }
.mcc-badge-dark:hover { color: #fff; }
.mcc-badge-green { background: var(--green-soft); color: var(--green-dark); }
.mcc-badge-clay { background: var(--clay-soft); color: var(--clay-dark); }

.mcc-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.mcc-pills li { padding: 7px 12px; border-radius: var(--r-pill); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.mcc-pills-sm li { padding: 6px 11px; font-size: 12px; }

.mcc-card-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line-2); }
.mcc-card-figures { display: flex; align-items: center; gap: 18px; }
.mcc-card-figures-tight { gap: 14px; }
.mcc-divider { width: 1px; height: 38px; background: var(--line-2); }
.mcc-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.mcc-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.mcc-eyebrow-clay { color: var(--clay); font-size: 13px; letter-spacing: .14em; }
.mcc-eyebrow-green { color: var(--green-dark); font-size: 12px; }
.mcc-eyebrow-light { color: #92A594; }

.mcc-score { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: var(--green); line-height: 1; display: inline-block; }
.mcc-score-sm { font-size: 24px; }
.mcc-score-md { font-size: 26px; }
.mcc-score-lg { font-size: 30px; }
.mcc-score-xl { font-size: 44px; letter-spacing: -.04em; }

.mcc-price { font-size: 20px; font-weight: 800; display: inline-block; }
.mcc-price-empty { font-size: 16px; color: var(--muted-2); font-weight: 700; }
.mcc-price-date { display: block; font-size: 11px; font-weight: 600; color: var(--muted-2); letter-spacing: .02em; }

/* buttons */
.mcc-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; }
.mcc-btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.mcc-btn-primary { background: var(--clay); color: #fff; }
.mcc-btn-primary:hover { background: var(--clay-dark); color: #fff; }
.mcc-btn-ghost { border-color: var(--fir); color: var(--fir); }
.mcc-btn-ghost:hover { background: var(--fir); color: #fff; }

/* ads */
.mcc-ad { text-align: center; }
.mcc-ad-label { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.mcc-ad-slot { background: var(--stone-2); border: 1px dashed #C3C6BC; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.mcc-ad-leaderboard { margin: 24px 0; }
.mcc-ad-leaderboard .mcc-ad-slot { height: 108px; }
.mcc-ad-mpu { height: 268px; }
.mcc-ad-halfpage { height: 580px; }
.mcc-ad-sticky { position: sticky; top: 20px; }

/* review page */
.mcc-review-title { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.04em; margin-bottom: 14px; }
.mcc-review-standfirst { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 56ch; margin: 0 0 20px; }
.mcc-byline { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.mcc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #D7DCD4; font-size: 14px; font-weight: 800; }
.mcc-byline-name { margin: 0; font-size: 14px; font-weight: 700; }
.mcc-byline-meta { margin: 0; font-size: 13px; color: var(--muted-2); }

.mcc-gallery { padding: 26px; margin-bottom: 26px; box-shadow: var(--shadow-card); }
.mcc-gallery-main {
  /* A roughly square stage, centred, so square and portrait product shots fill
     it instead of floating in a wide band of empty sand. The arrows move out
     into the gutter either side rather than eating panel width. */
  position: relative; background: var(--panel); border-radius: var(--r-md);
  width: min(100%, 520px); margin-inline: auto;
  height: 460px;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Every shot is in the DOM and stacked; only the current one is painted, so
   switching never reflows the card or waits on a fresh request. */
.mcc-gallery-img {
  grid-area: 1 / 1;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  display: none;
}
.mcc-gallery-img.is-on { display: block; }

.mcc-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(22,48,31,.05), 0 14px 22px -14px rgba(22,48,31,.75);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mcc-gallery-nav:hover { background: var(--fir); border-color: var(--fir); color: var(--white); }
.mcc-gallery-nav:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.mcc-gallery-prev { left: -66px; }
.mcc-gallery-next { right: -66px; }

.mcc-gallery-thumbs { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.mcc-gallery-thumb {
  width: 72px; height: 72px; padding: 6px;
  background: var(--panel); border: 2px solid transparent; border-radius: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, background .15s ease;
}
.mcc-gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mcc-gallery-thumb:hover { border-color: #C6D2C7; }
.mcc-gallery-thumb.is-on { border-color: var(--green); background: var(--green-soft); }
.mcc-gallery-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 760px) {
  /* Side padding for the arrows would eat a third of a phone screen, so they
     sit over the edges of the stage instead and the photo gets the room. */
  .mcc-gallery-main { width: 100%; height: 300px; padding: 14px; }
  .mcc-gallery-prev { left: 6px; }
  .mcc-gallery-next { right: 6px; }
  .mcc-gallery-nav {
    width: 44px; height: 44px;
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(22,48,31,.18);
  }
  .mcc-gallery-thumb { width: 54px; height: 54px; }
  .mcc-gallery-thumbs { gap: 8px; }
}

@media (max-width: 560px) {
  .mcc-gallery-main { padding: 12px; height: 280px; min-height: 0; }
  .mcc-gallery-nav { width: 44px; height: 44px; }
  .mcc-gallery-prev { left: 6px; }
  .mcc-gallery-next { right: 6px; }
  .mcc-gallery-thumb { width: 60px; height: 60px; }
}
.mcc-gallery-tag { position: absolute; top: 16px; right: 16px; padding: 6px 11px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }

.mcc-verdict { padding: 26px; margin-bottom: 26px; }
.mcc-verdict h2, .mcc-faq h2, .mcc-guide h2 { font-size: 26px; font-weight: 800; }
.mcc-prose { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 66ch; }
.mcc-prose h2 { font-size: 28px; margin-top: 1.6em; }
.mcc-prose h3 { font-size: 20px; margin-top: 1.4em; }
.mcc-prose ul, .mcc-prose ol { padding-left: 1.2em; }

.mcc-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 32px; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line-2); }
.mcc-scorebar-head { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.mcc-scorebar-head strong { color: var(--green); font-weight: 800; }
.mcc-scorebar-track { height: 7px; background: var(--stone); border-radius: var(--r-pill); overflow: hidden; }
.mcc-scorebar-track span { display: block; height: 7px; background: var(--green); border-radius: var(--r-pill); }

.mcc-proscons { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-bottom: 30px; }
.mcc-proscons .mcc-card { padding: 22px; }
.mcc-ticklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.mcc-ticklist li { display: flex; gap: 10px; }
.mcc-ticklist .mcc-icon { flex: none; margin-top: 3px; color: var(--green-dark); }
.mcc-ticklist-cons .mcc-icon { color: var(--clay-dark); }

.mcc-specs { margin-bottom: 30px; }
.mcc-specs h2 { font-size: 28px; font-weight: 800; }
.mcc-table-wrap { overflow-x: auto; }
.mcc-spectable { width: 100%; border-collapse: collapse; font-size: 15px; }
.mcc-spectable th { text-align: left; padding: 14px 20px; font-weight: 600; color: var(--muted-2); width: 45%; }
.mcc-spectable td { padding: 14px 20px; font-weight: 700; }
.mcc-spectable tr + tr { border-top: 1px solid var(--stone); }

.mcc-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-bottom: 34px; }
.mcc-fit > div { border-radius: var(--r-lg); padding: 24px; }
.mcc-fit h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.mcc-fit p { margin: 0; font-size: 15px; line-height: 1.6; }
.mcc-fit-yes { background: var(--green-soft); color: #2C4536; }
.mcc-fit-no { background: var(--clay-soft); color: #5E3A26; }

/* ---- questions accordion ----
   Native details and summary. No script, keyboard operable by default, and
   every answer stays in the DOM whether a panel is open or shut. */
.mcc-faq { margin-bottom: 20px; padding: 24px; }
.mcc-faq h2 { margin: 0 0 18px; padding: 0; }
.mcc-faq-list { display: flex; flex-direction: column; gap: 10px; }

.mcc-faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.mcc-faq-item:hover { border-color: #C6D2C7; }
.mcc-faq-item[open] {
  border-color: #B6CDBC;
  box-shadow: 0 2px 2px rgba(22,48,31,.03), 0 18px 24px -22px rgba(22,48,31,.65);
}

.mcc-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px;
  font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: background .18s ease, color .18s ease;
}
.mcc-faq-q::-webkit-details-marker { display: none; }
.mcc-faq-q::marker { content: ""; }
.mcc-faq-q:hover { background: var(--panel); }
.mcc-faq-q:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.mcc-faq-item[open] .mcc-faq-q { background: var(--green-soft); color: var(--green-dark); }

.mcc-faq-icon {
  flex: 0 0 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--stone-2); color: var(--ink-2);
  transition: transform .28s cubic-bezier(.3,.7,.3,1), background .18s ease, color .18s ease;
}
.mcc-faq-item[open] .mcc-faq-icon { transform: rotate(180deg); background: var(--green); color: var(--white); }

.mcc-faq-a { padding: 4px 18px 18px; }
.mcc-faq-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* Smooth height where the browser supports animating to auto. Everywhere else
   the panel just snaps open, which is the normal details behaviour. */
@supports (interpolate-size: allow-keywords) {
  .mcc-faq-list { interpolate-size: allow-keywords; }
  .mcc-faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }
  .mcc-faq-item[open]::details-content { block-size: auto; }
}

.mcc-guide { position: relative; overflow: hidden; padding: 30px; margin-bottom: 20px; }
.mcc-guide-inner { position: relative; z-index: 1; }

.mcc-alts { margin-bottom: 34px; }
.mcc-alts h2 { font-size: 28px; font-weight: 800; }
.mcc-alt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.mcc-alt { display: block; overflow: hidden; }
.mcc-alt-media { display: flex; align-items: center; justify-content: center; height: 140px; background: var(--panel); padding: 14px; }
.mcc-alt-media img { max-height: 112px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.mcc-alt-body { display: block; padding: 16px; }
.mcc-alt-title { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.mcc-alt-meta { display: flex; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.mcc-alt-meta .mcc-score { font-size: 20px; }

/* sidebar widgets */
.mcc-widget { padding: 22px; }
.mcc-widget-dark { background: var(--fir); border-color: var(--fir); color: #C3CFC4; }
.mcc-widget-text { margin: 0; font-size: 14px; line-height: 1.6; }
.mcc-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; font-weight: 600; }
.mcc-linklist li { display: flex; justify-content: space-between; }
.mcc-count { color: var(--faint); }

.mcc-buybox { padding: 22px; box-shadow: var(--shadow-card); }
.mcc-buybox-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.mcc-buybox-media { height: 170px; background: var(--panel); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 16px; margin-bottom: 18px; }
.mcc-buybox-media img { max-height: 140px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.mcc-retailer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--stone); }
.mcc-retailer-name { margin: 0; font-size: 14px; font-weight: 700; }
.mcc-retailer-note { margin: 0; font-size: 12px; color: var(--muted-2); }
.mcc-buybox-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); }

.mcc-glance { margin: 0; }
.mcc-glance > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; }
.mcc-glance > div + div { border-top: 1px solid var(--stone); }
.mcc-glance dt { font-size: 14px; color: var(--muted); }
.mcc-glance dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; }

/* pagination */
.navigation.pagination { margin-bottom: 44px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid #CBCDC4; background: var(--white); font-size: 15px; font-weight: 600; }
.page-numbers.current { background: var(--fir); border-color: var(--fir); color: #fff; font-weight: 700; }

/* footer */
.mcc-footer { background: var(--fir); color: #C3CFC4; }
.mcc-footer a { color: #C3CFC4; }
.mcc-footer a:hover { color: #F0A077; }
.mcc-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 34px; padding-block: 50px 26px; }
.mcc-footer-logo { margin: 0 0 12px; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.mcc-footer-blurb { margin: 0; font-size: 14px; line-height: 1.6; color: #92A594; max-width: 28ch; }
.mcc-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.mcc-footer-empty { color: #7B8E7D; font-size: 13px; }
.mcc-footer-legal { border-top: 1px solid var(--fir-line); padding-block: 20px 44px; }
.mcc-disclosure, .mcc-copyright { margin: 0 0 10px; font-size: 13px; line-height: 1.65; color: #8DA08F; max-width: 92ch; }
.mcc-copyright { margin-bottom: 0; color: #7B8E7D; }
.mcc-disclosure-inline { font-size: 13px; color: var(--muted-2); border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 28px; }

.mcc-empty { padding: 40px; text-align: center; color: var(--muted); }

/* small screens */
@media (max-width: 900px) {
  .mcc-decor, .mcc-decor-corner { display: none; }
  .mcc-ad-sticky, .mcc-buybox { position: static; }
  .mcc-side-flow { position: static; max-height: none; overflow: visible; }
  /* The compact card would only repeat the buy box a screen above it. */
  .mcc-card-media, .mcc-card-media-lg { flex-basis: 100%; min-height: 200px; border-right: 0; border-bottom: 1px solid var(--line-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* home page */
.mcc-home-hero { background: var(--stone); }
/* The ivy hangs past each card, so this section needs more side room than the
   standard wrap gives, and a clip as the backstop so it never widens the page. */
.mcc-types { background: var(--stone-2); border-top: 1px solid var(--line); overflow-x: clip; }
.mcc-types-inner { padding-block: 66px 86px; padding-inline: clamp(28px, 4.4vw, 48px); }
.mcc-section-head { text-align: center; margin-bottom: 46px; }
.mcc-section-head h2 { margin: 0 auto; max-width: 30ch; font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.035em; }
.mcc-section-head p { margin: 12px auto 0; font-size: 15px; color: var(--muted); max-width: 46ch; }

/* three up, with room for the ivy to hang past the edges */
.mcc-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 48px;
  perspective: 1600px;
}
@media (max-width: 1040px) { .mcc-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 56px; } }
@media (max-width: 640px)  { .mcc-type-grid { grid-template-columns: 1fr; gap: 56px; } }

.mcc-type-card {
  position: relative;
  display: flex;
  background: var(--white);
  border-radius: 20px;
  padding: 34px 30px 30px;
  text-align: center;
  transform: rotateX(4deg);
  transform-style: preserve-3d;
  box-shadow: 0 2px 2px rgba(22,48,31,.04), 0 26px 34px -26px rgba(22,48,31,.62);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mcc-type-card:hover { transform: rotateX(0deg) translateY(-4px); box-shadow: 0 2px 2px rgba(22,48,31,.05), 0 34px 44px -28px rgba(22,48,31,.7); }

/* The body fills the card so the button can sit on the bottom edge and line
   up across the row, whatever length the intro runs to. */
.mcc-type-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }
.mcc-type-name { display: block; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--ink); margin: 0 0 10px; }
.mcc-type-desc { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; max-width: 34ch; }

.mcc-type-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  background: var(--clay); color: var(--white);
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 16px -10px rgba(191,74,23,.9);
  transition: background .15s ease;
}
.mcc-type-cta:hover { background: var(--clay-dark); color: var(--white); }

/* The card itself is the link, so the button is styling rather than a second
   link inside the first. */
.mcc-type-card:hover .mcc-type-cta { background: var(--clay-dark); }

/* ---- the ivy frame ----
   A woody rim with leaf clusters sitting on top of it. The rim carries the
   3D: a lit top edge, a shaded underside and a drop shadow beneath. */
.mcc-ivy { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* The rim is the thing the ivy winds around. */
.mcc-ivy-rim {
  position: absolute; inset: 0;
  border: 10px solid #2A6440;
  border-radius: 22px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.26),
    0 0 0 1.5px #1C4B2E,
    0 10px 16px -10px rgba(22,48,31,.8);
}
.mcc-type-card:hover .mcc-ivy-rim { border-color: #31764B; }

/* Each strip tiles one length of vine that passes behind the rim on the way
   up and in front of it on the way down. Tiling rather than stretching keeps
   the twist the same size whatever width the card ends up. */
.mcc-ivy-strip { position: absolute; filter: drop-shadow(0 3px 3px rgba(22,48,31,.24)); }
.mcc-ivy-top, .mcc-ivy-bottom {
  left: 24px; right: 24px; height: 34px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='34' viewBox='0 0 140 34'><path d='M0 27C23 27 47 8 70 8' stroke='%231F5536' stroke-width='6.2' fill='none' stroke-linecap='round'/><path d='M0 27C23 27 47 8 70 8' stroke='%233C9159' stroke-width='4.4' fill='none' stroke-linecap='round'/><rect x='-2' y='12' width='144' height='10' fill='%232A6440'/><rect x='-2' y='12' width='144' height='2.4' fill='%2345875B'/><rect x='-2' y='19.6' width='144' height='2.4' fill='%231C4B2E'/><path d='M70 8C93 8 117 27 140 27' stroke='%231F5536' stroke-width='6.2' fill='none' stroke-linecap='round'/><path d='M70 8C93 8 117 27 140 27' stroke='%233C9159' stroke-width='4.4' fill='none' stroke-linecap='round'/><path d='M73 9C94 11 112 20 128 26' stroke='%236BB086' stroke-width='1.4' fill='none' stroke-linecap='round' opacity='.6'/><path d='M66 12c-6 1-11-3-11-9 7-3 13 0 14 6 1 2-1 3-3 3z' fill='%233C9159'/><path d='M55 3c7-3 13 0 14 6-5-4-9-5-14-6z' fill='%2324683E'/></svg>") repeat-x center;
  background-size: 140px 34px;
}
.mcc-ivy-left, .mcc-ivy-right {
  top: 24px; bottom: 24px; width: 34px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='140' viewBox='0 0 34 140'><path d='M27 0C27 23 8 47 8 70' stroke='%231F5536' stroke-width='6.2' fill='none' stroke-linecap='round'/><path d='M27 0C27 23 8 47 8 70' stroke='%233C9159' stroke-width='4.4' fill='none' stroke-linecap='round'/><rect x='12' y='-2' width='10' height='144' fill='%232A6440'/><rect x='12' y='-2' width='2.4' height='144' fill='%2345875B'/><rect x='19.6' y='-2' width='2.4' height='144' fill='%231C4B2E'/><path d='M8 70C8 93 27 117 27 140' stroke='%231F5536' stroke-width='6.2' fill='none' stroke-linecap='round'/><path d='M8 70C8 93 27 117 27 140' stroke='%233C9159' stroke-width='4.4' fill='none' stroke-linecap='round'/><path d='M9 73C11 94 20 112 26 128' stroke='%236BB086' stroke-width='1.4' fill='none' stroke-linecap='round' opacity='.6'/><path d='M12 66c1-6-3-11-9-11-3 7 0 13 6 14 2 1 3-1 3-3z' fill='%233C9159'/><path d='M3 55c-3 7 0 13 6 14-4-5-5-9-6-14z' fill='%2324683E'/></svg>") repeat-y center;
  background-size: 34px 140px;
}
.mcc-ivy-top { top: -12px; }
.mcc-ivy-bottom { bottom: -12px; transform: scaleY(-1); }
.mcc-ivy-left { left: -12px; }
.mcc-ivy-right { right: -12px; transform: scaleX(-1); }

/* Two sprigs, at opposite corners, and nothing else. */
.mcc-ivy-sprig { position: absolute; width: 70px; height: 54px; filter: drop-shadow(0 4px 4px rgba(22,48,31,.3)); }
.mcc-ivy-sprig svg { width: 100%; height: 100%; display: block; }
.mcc-ivy-tl { top: -22px; left: -18px; }
.mcc-ivy-br { bottom: -22px; right: -18px; transform: scale(-1, -1); }

.mcc-ivy-leaf { transform-box: fill-box; transform-origin: 14% 86%; }

/* Only the leaves move, and only while the card is on screen. */
@keyframes mcc-ivy-leaf {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
.mcc-type-card.is-breezy .mcc-ivy-leaf-1 { animation: mcc-ivy-leaf 5.4s ease-in-out infinite; }
.mcc-type-card.is-breezy .mcc-ivy-leaf-2 { animation: mcc-ivy-leaf 6.8s ease-in-out infinite -2.3s; }
.mcc-type-card.is-breezy .mcc-ivy-br .mcc-ivy-leaf-1 { animation-duration: 6.1s; animation-delay: -3.5s; }
.mcc-type-card.is-breezy .mcc-ivy-br .mcc-ivy-leaf-2 { animation-duration: 7.5s; animation-delay: -1.2s; }

@media (max-width: 640px) {
  .mcc-ivy-left, .mcc-ivy-right { display: none; }
  .mcc-ivy-sprig { width: 58px; height: 45px; }
}

/* =========================================================================
   Home page hero: carousel and finder
   ====================================================================== */

.mcc-home-head { position: relative; z-index: 1; text-align: center; padding-block: 54px 26px; }
.mcc-home-title { max-width: 17ch; margin: 0 auto 18px; font-size: clamp(36px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.mcc-home-sub { max-width: 58ch; margin: 0 auto; font-size: 18px; line-height: 1.58; color: var(--muted); }

.mcc-carousel { position: relative; z-index: 1; padding-bottom: 8px; }

/* Before the script runs this is a plain scrolling row, which is the
   no-JavaScript view as well. */
.mcc-carousel-stage {
  display: flex; gap: 22px; align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 2px 24px;
  -webkit-overflow-scrolling: touch;
}
.mcc-cc { flex: 0 0 300px; scroll-snap-align: center; }

.mcc-carousel-stage.is-enhanced {
  display: grid; grid-template-columns: 1fr; place-items: center;
  overflow: visible; min-height: 700px;
  perspective: 1500px; perspective-origin: 50% 42%;
  padding-bottom: 10px;
}
.mcc-carousel-stage.is-enhanced .mcc-cc {
  grid-area: 1 / 1;
  flex: none;
  width: 440px; max-width: 92vw;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.22,.7,.3,1), opacity .45s ease;
}

/* Position by distance from the centre card. */
.mcc-carousel-stage.is-enhanced .mcc-cc[data-pos="0"]  { transform: rotateX(3deg) translateZ(0); opacity: 1; z-index: 3; }
.mcc-carousel-stage.is-enhanced .mcc-cc[data-pos="-1"] { transform: translateX(-62%) rotateY(26deg) rotateX(3deg) scale(.82); opacity: .6; z-index: 2; }
.mcc-carousel-stage.is-enhanced .mcc-cc[data-pos="1"]  { transform: translateX(62%) rotateY(-26deg) rotateX(3deg) scale(.82); opacity: .6; z-index: 2; }
.mcc-carousel-stage.is-enhanced .mcc-cc[data-pos="-2"] { transform: translateX(-96%) rotateY(32deg) scale(.66); opacity: 0; z-index: 1; pointer-events: none; }
.mcc-carousel-stage.is-enhanced .mcc-cc[data-pos="2"]  { transform: translateX(96%) rotateY(-32deg) scale(.66); opacity: 0; z-index: 1; pointer-events: none; }

.mcc-cc-card { background: var(--white); border: 1px solid #D4D6CD; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-lift); }
.mcc-cc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.mcc-cc-figures { display: flex; align-items: baseline; gap: 12px; }
.mcc-cc-price { font-size: 15px; font-weight: 700; color: var(--ink); }
.mcc-cc-score { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--green); }
/* The plinth stays a tidy rounded box while the mower itself breaks out of
   the top of it, which is what gives the card its depth. */
.mcc-cc-media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 172px; margin-top: 54px;
  background: var(--panel); border-radius: 14px;
  overflow: visible;
}
.mcc-cc-media img {
  max-height: 268px; max-width: 112%;
  object-fit: contain;
  transform: translateY(-12px);
  /* Amazon ships opaque white JPEGs, so the white has to be blended away or
     the mower arrives inside a white square. A drop-shadow would be cast by
     that square rather than the mower, so the card's own contact shadow does
     that job instead. */
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Dragging the stage should not try to drag the product shots with it. */
.mcc-carousel-stage.is-enhanced { cursor: grab; touch-action: pan-y; }
.mcc-carousel-stage.is-enhanced.is-dragging { cursor: grabbing; }
.mcc-carousel-stage.is-enhanced.is-dragging .mcc-cc { transition: none; }
.mcc-carousel-stage.is-enhanced img,
.mcc-carousel-stage.is-enhanced a { -webkit-user-drag: none; user-select: none; }
.mcc-cc-title { font-size: 23px; font-weight: 800; letter-spacing: -.025em; margin: 48px 0 6px; line-height: 1.22; }
.mcc-cc-verdict { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.mcc-cc-specs { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin-bottom: 16px; }
.mcc-cc-specs > div { flex: 1; min-width: 0; }
.mcc-cc-k { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.mcc-cc-v { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.mcc-cc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mcc-cc-actions .mcc-btn { flex: 1 1 auto; justify-content: center; }
.mcc-cc-shadow { display: block; width: 74%; height: 26px; margin: 16px auto 0; border-radius: 50%; background: rgba(22,48,31,.2); filter: blur(14px); }
.mcc-carousel-stage:not(.is-enhanced) .mcc-cc-shadow { display: none; }

.mcc-carousel-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; }
.mcc-cc-nav { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #CBCDC4; background: var(--white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.mcc-cc-nav:hover { background: var(--fir); border-color: var(--fir); color: var(--white); }
.mcc-cc-dots { display: flex; gap: 7px; align-items: center; }
.mcc-cc-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--r-pill); background: #C3C6BC; cursor: pointer; transition: width .25s ease, background .25s ease; }
.mcc-cc-dot.is-on { width: 26px; background: var(--fir); }

/* finder */
.mcc-finder-wrap { position: relative; z-index: 2; margin-top: 56px; }
.mcc-finder {
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; align-items: end;
  box-shadow: 0 1px 2px rgba(22,48,31,.05), 0 20px 36px -28px rgba(22,48,31,.5);
}
.mcc-finder-title { grid-column: 1 / -1; margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.mcc-finder-field label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mcc-finder-field select {
  width: 100%; height: 48px; padding: 0 38px 0 14px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316301F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.mcc-finder-field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.mcc-finder-go { height: 48px; padding: 0 20px; background: var(--fir); color: var(--white); border: 0; border-radius: var(--r-sm); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.mcc-finder-go:hover { background: #0F2415; }

.mcc-note { margin: 0 0 18px; padding: 13px 16px; background: var(--clay-soft); border-radius: var(--r-sm); font-size: 14px; color: var(--clay-dark); font-weight: 600; }

/* =========================================================================
   Match the mower to the lawn
   ====================================================================== */

.mcc-lawn { background: var(--fir); color: #E9EDE7; }
.mcc-lawn-inner { padding-block: 64px 72px; }
.mcc-lawn-inner h2 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.035em; color: var(--white); }
.mcc-lawn-sub { margin: 0 0 32px; font-size: 16px; line-height: 1.6; color: #B8C4B9; max-width: 56ch; }
.mcc-lawn-scroll { overflow-x: auto; border: 1px solid var(--fir-line); border-radius: 14px; background: var(--fir-2); }
.mcc-lawn-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.mcc-lawn-table th, .mcc-lawn-table td { text-align: left; padding: 16px 20px; }
.mcc-lawn-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #92A594; border-bottom: 1px solid var(--fir-line); }
.mcc-lawn-table tbody tr + tr { border-top: 1px solid #243E2E; }
.mcc-lawn-table tbody th { font-size: 15px; font-weight: 700; color: var(--white); }
.mcc-lawn-table tbody td { font-size: 15px; color: #C3CFC4; }
.mcc-lawn-table tbody a { color: #F0A077; font-weight: 700; }
.mcc-lawn-table tbody a:hover { color: #FFBD97; }
.mcc-lawn-soon { color: #8C9B8E; font-style: italic; }

/* =========================================================================
   Before you buy
   ====================================================================== */

.mcc-guides { background: var(--stone-2); border-top: 1px solid var(--line); }
.mcc-guides-inner { padding-block: 60px 74px; }
.mcc-guides-inner h2 { margin: 0 0 28px; font-size: clamp(28px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.035em; }
.mcc-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.mcc-guide-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px; transition: transform .18s ease, box-shadow .18s ease;
}
.mcc-guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.mcc-guide-kind { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }
.mcc-guide-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.mcc-guide-blurb { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* The link wrapping a product shot is shrink-to-fit, so without this it takes
   the image's intrinsic width and pushes the page sideways on a phone. */
.mcc-card-media > a,
.mcc-alt-media > a,
.mcc-buybox-media > a { display: block; max-width: 100%; min-width: 0; }
.mcc-card-media > a > img,
.mcc-product-img,
.mcc-cc-media { max-width: 100%; }


/* =========================================================================
   Review sidebar: a scrolling zone, then a compact card that follows
   ====================================================================== */

.mcc-side-flow {
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 20px;
  /* No inner scrolling, so no scrollbar down the side of the column. The
     three panels below the buy box share a name attribute, so only one is
     ever open and the column stays about a screen tall on its own. */
}

/* ---- the folding slot ----
   At a glance and How we rate share one card, so the sidebar gives the ad and
   the compact card room sooner. Native details again, no script. */
.mcc-fold { padding: 6px; }
.mcc-fold-item + .mcc-fold-item { border-top: 1px solid var(--stone); }
.mcc-fold-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2);
  cursor: pointer; list-style: none; border-radius: 11px;
  transition: background .18s ease, color .18s ease;
}
.mcc-fold-q::-webkit-details-marker { display: none; }
.mcc-fold-q::marker { content: ""; }
.mcc-fold-q:hover { background: var(--panel); }
.mcc-fold-q:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.mcc-fold-item[open] > .mcc-fold-q { color: var(--ink); }
.mcc-fold-icon {
  flex: 0 0 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--stone-2); color: var(--ink-2);
  transition: transform .28s cubic-bezier(.3,.7,.3,1), background .18s ease, color .18s ease;
}
.mcc-fold-item[open] .mcc-fold-icon { transform: rotate(180deg); background: var(--green); color: var(--white); }
.mcc-fold-a { padding: 0 14px 14px; }
.mcc-fold-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

@supports (interpolate-size: allow-keywords) {
  .mcc-fold { interpolate-size: allow-keywords; }
  .mcc-fold-item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }
  .mcc-fold-item[open]::details-content { block-size: auto; }
}

/* contents list inside the folding slot */
.mcc-toc { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 9px; }
.mcc-toc li { font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.mcc-toc li::marker { font-size: 12px; font-weight: 700; color: var(--faint); }
.mcc-toc a { color: var(--muted); }
.mcc-toc a:hover { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }

/* Jumping to a heading should not leave it jammed against the top edge. */
.mcc-review h2, .mcc-faq { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* highest rated band */
.mcc-top { background: var(--stone); }
.mcc-top-inner { padding-block: 62px 72px; }
.mcc-top .mcc-section-head { margin-bottom: 38px; }
.mcc-top .mcc-section-head p { font-size: 16px; line-height: 1.6; }

.mcc-review-deck {
  margin: 10px 0 0; max-width: 62ch;
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.45;
  color: var(--muted-2); font-weight: 500;
}

/* Full width call to action inside the review, in glass.
   The panel carries its own colour because the page behind it is flat stone,
   and a blur with nothing behind it reads as a grey box rather than glass. */
.mcc-cta-glass {
  position: relative;
  margin: 36px 0 30px;
  padding: 5px;
  border-radius: 24px;
  isolation: isolate;
  background:
    linear-gradient(140deg, rgba(255,255,255,.62), rgba(255,255,255,.10) 42%, rgba(255,255,255,.46));
  box-shadow:
    0 22px 44px -20px rgba(22,48,31,.55),
    0 3px 10px rgba(22,48,31,.10);
}

.mcc-cta-glass-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px;
  padding: 20px 22px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(31,107,63,.94), rgba(22,48,31,.97));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* the specular sheen that makes it read as glass rather than paint */
.mcc-cta-glass-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 92% at 10% -24%, rgba(255,255,255,.32), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 48%);
}

.mcc-cta-glass-text {
  position: relative;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  min-width: 0;
  text-align: center;
}

.mcc-cta-glass-name {
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.mcc-cta-glass-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  font-weight: 650;
}

.mcc-cta-glass-at {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.mcc-glass-btn {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .005em;
  text-decoration: none;
  color: #4A1C06;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10) 52%, rgba(255,255,255,.22)),
    linear-gradient(135deg, rgba(253,214,180,.93), rgba(244,166,112,.93));
  border: 1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(120,55,15,.16),
    0 12px 26px -12px rgba(0,0,0,.5);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.mcc-glass-btn:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.16) 52%, rgba(255,255,255,.28)),
    linear-gradient(135deg, rgba(255,224,196,.96), rgba(248,180,130,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 6px rgba(120,55,15,.14),
    0 16px 30px -12px rgba(0,0,0,.52);
}

.mcc-glass-btn:active { transform: translateY(0); }

.mcc-glass-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  color: #4A1C06;
}

.mcc-cta-glass-note {
  margin: 10px 4px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-2);
}

@media (max-width: 700px) {
  .mcc-cta-glass-inner { padding: 18px 16px 20px; }
  .mcc-cta-glass-text { gap: 2px 12px; }
  .mcc-glass-btn { font-size: 16px; padding: 15px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcc-glass-btn { transition: none; }
  .mcc-glass-btn:hover { transform: none; }
}

/* ============================================================
   Mobile navigation
   The five categories do not fit a phone header, so below the
   desktop breakpoint the nav becomes a panel that slides in from
   the right. The mega panels already in the markup are reused as
   collapsible pick lists rather than being duplicated.
   ============================================================ */

.mcc-burger { display: none; }
.mcc-menu-head { display: none; }
.mcc-sub-toggle { display: none; }

@media (max-width: 999px) {
  .mcc-burger {
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: auto;
    padding: 9px 14px 9px 12px;
    min-height: 44px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(22,48,31,.05);
  }
  .mcc-burger-bars { display: grid; gap: 4px; width: 18px; }
  .mcc-burger-bars span {
    display: block; height: 2px; width: 100%;
    background: currentColor; border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  body.mcc-menu-open .mcc-burger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.mcc-menu-open .mcc-burger-bars span:nth-child(2) { opacity: 0; }
  body.mcc-menu-open .mcc-burger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mcc-menu-backdrop {
    position: fixed; inset: 0; z-index: 190;
    background: rgba(22,48,31,.46);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .26s ease;
  }
  body.mcc-menu-open .mcc-menu-backdrop { opacity: 1; }

  .mcc-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    z-index: 200;
    width: min(86vw, 360px);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 14px 16px calc(28px + env(safe-area-inset-bottom));
    background: var(--stone);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px -30px rgba(22,48,31,.75);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
  }
  body.mcc-menu-open .mcc-nav {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  body.mcc-menu-open { overflow: hidden; }

  .mcc-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 2px 0 14px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .mcc-menu-title {
    font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint);
  }
  .mcc-menu-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: 50%; color: var(--ink); cursor: pointer;
  }

  .mcc-nav-item {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--line-2);
  }
  .mcc-nav-link {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center;
    min-height: 54px; padding: 10px 4px;
    font-size: 16px; font-weight: 650; color: var(--ink);
  }
  .mcc-nav-link.is-current { color: var(--clay); }
  .mcc-sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: 0 0 46px;
    background: none; border: 0; border-radius: 50%;
    color: var(--muted); cursor: pointer;
    transition: transform .2s ease, background .2s ease;
  }
  .mcc-sub-toggle:hover { background: var(--stone-2); }
  .mcc-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }

  /* The desktop mega panel, reused as an inline list of picks. The :not()
     matters: a bare display rule would override the hidden attribute and
     leave every category expanded. */
  .mcc-mega:not([hidden]) {
    display: block; position: static; width: 100%; flex: 1 1 100%;
    background: none; border: 0; box-shadow: none; padding: 0 0 12px;
  }
  .mcc-mega[hidden] { display: none; }
  .mcc-mega-inner { display: block; padding: 0; }
  .mcc-mega-lead { display: none; }
  .mcc-mega-picks { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .mcc-mega-picks a {
    display: flex; align-items: center; gap: 11px;
    min-height: 56px; padding: 7px 8px;
    border-radius: 12px; background: var(--white);
    border: 1px solid var(--line-2);
  }
  .mcc-mega-thumb { flex: 0 0 40px; height: 40px; }
  .mcc-mega-thumb img { max-height: 36px; max-width: 36px; }
  .mcc-mega-award { font-size: 10px; }
  .mcc-mega-name { font-size: 14px; }
  .mcc-mega-meta { font-size: 12px; }
}

@media (max-width: 640px) {
  /* the price stamp earns its line on a desktop, not on a phone */
  .mcc-topbar-inner > span:last-child { display: none; }
  .mcc-topbar-inner { justify-content: center; }
}

/* A search field you can actually hit with a thumb. */
@media (max-width: 999px) {
  .mcc-searchbar { padding-bottom: 14px; }
  .mcc-search input[type="search"],
  .mcc-searchbar input {
    min-height: 50px;
    font-size: 16px; /* under 16px iOS zooms the page on focus */
  }
}

/* Mobile corrections that must win on source order.
   The sticky sidebar rule is declared after the 900px block, so the reset
   has to be restated here or a phone gets a pinned, clipped column. */
@media (max-width: 900px) {
  .mcc-side-flow {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* A product photo never pushes its column wider than the screen. */
.mcc-product-img,
.mcc-buybox-media img,
.mcc-card-media img,
.mcc-cc-media img { max-width: 100%; }
.mcc-img-placeholder { max-width: 100%; text-align: center; }