/* ===== CAMS Machinery page ===== */

/* The RE:BUILT section below pins itself and scrubs a 7-frame crossfade
   directly off scroll position (machinery.js initRebuildScroll). Site-wide
   `html { scroll-behavior: smooth }` (styles.css) fights that: the browser
   eases its own scroll position asynchronously, so the raw scrollTop
   ScrollTrigger reads on each tick lags behind/overshoots where the page
   visually is, which reads as the crossfade stuttering and, worst case,
   the pin engaging before the hero has actually scrolled out of view (the
   two visibly overlapping). Turning it off here removes that desync; the
   page's own JS-driven jumps (goToStep, the initial #hash landing) pass an
   explicit `behavior: "smooth"` to scrollTo(), which still animates since
   an explicit option overrides the CSS default — only plain in-page nav
   anchors lose their smooth glide and jump instantly on this page. */
html {
  scroll-behavior: auto;
}

.machinery-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  transition: transform 220ms var(--ease), background-color 220ms ease, border-color 220ms ease;
}

a.machinery-btn--solid {
  border: 1px solid var(--paper-strong);
  background: var(--paper-strong);
  color: var(--ink);
}

.machinery-btn:hover {
  transform: translateY(-2px);
}

/* ---------- Hero ---------- */

.machinery-hero {
  position: relative;
  min-height: min(900px, 100vh);
  overflow: clip;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--paper-strong);
  border-bottom: 1px solid var(--line);
}

/* The machine photo lives in its own fixed-height row (__stage) between the
   topbar and the title block, centered on both axes. Fixed height (not
   flex-grow) deliberately — a flex-basis:auto row containing a percentage-
   sized replaced element can resolve its flex-basis off the image's native
   intrinsic size (2433x1116) instead of the eventual layout width, which
   blew the row up to fill the entire hero. A hard px height sidesteps that
   ambiguity entirely. */
.machinery-hero__stage {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  margin: 24px 0;
}

.machinery-hero__bg {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
}

.machinery-hero__frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: var(--frame);
  max-width: 1440px;
  min-height: min(900px, 100vh);
  margin-inline: auto;
  padding: clamp(12px, 4vh, 32px) 0;
}

.machinery-hero__bottom {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.machinery-hero__title {
  margin: 0;
  max-width: 429px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(36px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.13;
  text-transform: uppercase;
  background: linear-gradient(110deg, #cacaca 3.5%, #b2b2b2 91.6%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.machinery-hero__lede {
  margin: 0;
  max-width: 529px;
  font-size: 18px;
  line-height: 1.6;
  color: #8a8a8a;
}

/* ---------- Model showcase ---------- */

.machinery-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machinery-models__col {
  position: relative;
  min-height: 706px;
  padding: 32px;
  overflow: hidden;
}

.machinery-models__col--dark {
  background: #ffffff;
}

.machinery-models__col--light {
  background: #e5e5e5;
}

.machinery-models__label {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
}

.machinery-models__row {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.machinery-models__name {
  margin: 0;
  font-size: 42px;
  letter-spacing: 3px;
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--accent);
}

.machinery-models__spec {
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
}

.machinery-models__nav {
  display: flex;
  gap: 4px;
}

.machinery-models__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--paper-strong);
  background: #e5e5e5;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: transform 220ms var(--ease);
}

.machinery-models__col--light .machinery-models__nav button {
  background: var(--paper-strong);
}

.machinery-models__nav button:hover {
  transform: translateY(-2px);
}

.machinery-models__sketch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60%, 620px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- Program sections (shared by RE:BUILT / PARTS:TO / PRO:SERVICE) ---------- */

.machinery-program {
  padding: 96px 0;
}

.machinery-program--rebuild {
  background: linear-gradient(180deg, #131313 0%, #242424 100%);
}

.machinery-program__frame {
  position: relative;
}

.machinery-program__head {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding-bottom: 64px;
}

.machinery-program__tag {
  margin: 0;
  flex: 0 0 auto;
  font-size: 42px;
  letter-spacing: 3px;
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--accent);
}

.machinery-program__copy {
  max-width: 555px;
}

.machinery-program__copy h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--paper-strong);
}

.machinery-program__copy p {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #aaaaaa;
}

.machinery-program--proservice .machinery-program__copy h2 {
  color: var(--ink);
}

.machinery-program--proservice .machinery-program__copy p {
  color: #4a4a4a;
}

/* PARTS:TO's copy block used the shared 555px max-width, which is exactly
   long enough for its heading to need the full width — so
   justify-content:space-between on the head row stretched the box flush to
   the frame's right edge with no slack, and each wrapped line ran nearly
   the full 555px. Narrowing it (still flush right, same as before) shifts
   the box's own left edge further right and tightens the wrap, closing up
   the empty space around the text. */
.machinery-program--partsto .machinery-program__copy {
  max-width: 440px;
}

.machinery-program--partsto .machinery-program__head {
  padding-bottom: 0;
}

/* ---------- RE:BUILT step list ---------- */

.machinery-program__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 48px;
  align-items: center;
  min-height: 627px;
}

.machinery-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.machinery-steps li {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  color: #3a3a3a;
  cursor: pointer;
  transition: color 220ms ease;
}

.machinery-steps li:hover,
.machinery-steps li:focus-visible {
  color: #6b6b6b;
}

.machinery-steps li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.machinery-steps li.is-active,
.machinery-steps li.is-active:hover,
.machinery-steps li.is-active:focus-visible {
  color: var(--paper-strong);
}

.machinery-steps__index {
  font-size: 23px;
  line-height: 1.13;
  text-transform: uppercase;
}

.machinery-steps li span:last-child {
  font-size: 18px;
  line-height: 1.33;
}

/* ---------- RE:BUILT scroll-driven restoration sequence ----------
   7 frames (dirty -> restored) stacked in the same box, crossfading as the
   section is pinned and scrubbed via ScrollTrigger (see machinery.js
   initRebuildScroll). Active .machinery-steps li is kept in sync with
   scroll progress instead of hover. */
.machinery-rebuild__frames {
  position: relative;
  min-height: 627px;
}

.machinery-rebuild__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  will-change: opacity;
}

.machinery-rebuild__frame:first-child {
  opacity: 1;
}

.machinery-rebuild__progress {
  margin-top: 32px;
  height: 1px;
  background: var(--line);
}

.machinery-rebuild__progress-bar {
  width: 0;
  height: 1px;
  background: var(--accent);
}

/* ---------- PARTS:TO flow diagram ----------
   Two supply paths (direct/indirect retail sales, and OEM production +
   local trade) both converging on "Конечный пользователь", matching the
   Figma source diagram. Positioned as percentages of the design's native
   1377x512 canvas inside an aspect-ratio-locked container so it scales
   as one piece; connector lines are an SVG overlay in the same coordinate
   space rather than plain CSS borders, since the real connectors curve. */

.machinery-flow {
  position: relative;
  width: 100%;
  aspect-ratio: 1377 / 512;
  margin: 0;
}

.machinery-flow__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.machinery-flow__lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.machinery-flow__node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #131313 0%, #242424 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #f0e3de;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  padding: 8px 10px;
}

.machinery-flow__node--icon {
  border-radius: 16px;
  padding: 0;
}

.machinery-flow__caption {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f0e3de;
}

.machinery-flow__parts {
  position: absolute;
  display: flex;
  gap: 4%;
}

.machinery-flow__parts span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 10, 20, 0.18);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 16px;
}

.machinery-flow__pos--supplier {
  left: 0;
  top: 36.5%;
  width: 13.9%;
  height: 26.4%;
}

.machinery-flow__pos--gear-top {
  left: 28.5%;
  top: 7%;
  width: 4.9%;
  height: 12.5%;
}

.machinery-flow__pos--home {
  left: 39.5%;
  top: 5.7%;
  width: 9.2%;
  height: 15.2%;
}

.machinery-flow__pos--sales {
  left: 52.5%;
  top: 0;
  width: 14.9%;
  height: 26.4%;
}

.machinery-flow__pos--part-caption {
  left: 19.5%;
  top: 45.9%;
  width: 9.5%;
  height: 7.4%;
}

.machinery-flow__pos--parts-icons {
  left: 33.2%;
  top: 44.9%;
  width: 9.7%;
  height: 9.8%;
}

.machinery-flow__pos--gear-bottom {
  left: 28.5%;
  top: 82.6%;
  width: 4.9%;
  height: 12.5%;
}

.machinery-flow__pos--oem {
  left: 37.1%;
  top: 78.9%;
  width: 8.5%;
  height: 19.9%;
}

.machinery-flow__pos--trade {
  left: 49.7%;
  top: 78.9%;
  width: 11.2%;
  height: 19.9%;
}

.machinery-flow__pos--doc {
  left: 63%;
  top: 82.6%;
  width: 4.5%;
  height: 12.5%;
}

.machinery-flow__pos--production {
  left: 69.3%;
  top: 69.9%;
  width: 9.7%;
  height: 12.1%;
}

.machinery-flow__pos--person {
  left: 81.6%;
  top: 43%;
  width: 6.1%;
  height: 13.9%;
}

.machinery-flow__pos--end-user {
  left: 89.6%;
  top: 46.9%;
  width: 8.1%;
  height: 10%;
}

@media (max-width: 760px) {
  .machinery-flow {
    position: relative;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
  }

  /* Figma's mobile flow keeps a single dashed connector running through the
     whole stack (the desktop diagram's two branches collapse into one
     column here) — a plain vertical line stands in for it. */
  .machinery-flow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 1px dashed rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
  }

  .machinery-flow__lines {
    display: none;
  }

  .machinery-flow__node,
  .machinery-flow__caption,
  .machinery-flow__parts {
    position: static;
    width: auto;
    height: auto;
  }

  .machinery-flow__node--box {
    max-width: 280px;
    padding: 14px 18px;
  }

  .machinery-flow__node--icon {
    width: 56px;
    height: 56px;
  }

  .machinery-flow__parts {
    width: 140px;
  }

  .machinery-flow__parts span {
    height: 44px;
  }

  .machinery-flow__pos--supplier { order: 1; }
  .machinery-flow__pos--gear-top { order: 2; }
  .machinery-flow__pos--home { order: 3; }
  .machinery-flow__pos--sales { order: 4; }
  .machinery-flow__pos--part-caption { order: 5; }
  .machinery-flow__pos--parts-icons { order: 6; }
  .machinery-flow__pos--gear-bottom { order: 7; }
  .machinery-flow__pos--oem { order: 8; }
  .machinery-flow__pos--trade { order: 9; }
  .machinery-flow__pos--doc { order: 10; }
  .machinery-flow__pos--production { order: 11; }
  .machinery-flow__pos--person { order: 12; }
  .machinery-flow__pos--end-user { order: 13; }
}

/* ---------- "Ведущие производители" divider grid ----------
   The logos here are the exact ones in the Figma source (Dell, Canonical,
   Microsoft, Cisco, Fortinet, CrowdStrike, Switch, SentinelOne, Veeam,
   Equinix) — generic tech-company marks unrelated to mining machinery,
   left over from the template this design was built on, but reproduced
   as-is per instruction rather than substituted. */

.machinery-brands {
  padding-top: 48px;
}

.machinery-brands__label {
  margin: 0 0 24px;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8a8a;
}

.machinery-brands__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.machinery-brands__grid span {
  aspect-ratio: 276 / 122;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.machinery-brands__grid img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  /* Figma shows every logo in this strip as a flat white mark, not the
     brand's native colors — grayscale+invert turns each solid-color mark
     (transparent background) into a clean white silhouette, which also
     fixes Sandvik/Volvo/Cummins reading as near-invisible dark-on-dark. */
  filter: grayscale(1) brightness(0) invert(1);
}

/* Dana's source has an opaque white diamond fill + black wordmark + blue
   outline, not a single-tone mark — brightness(0) would crush all three
   into one flat shape and erase the "DANA" text, so it only gets grayscale
   + invert (keeps the internal light/dark contrast, just flips it). */
.machinery-brands__grid img[alt="Dana"] {
  filter: grayscale(1) invert(1);
}

/* Kessler+Co is a flat JPEG with an opaque background box (no transparency
   to silhouette against), so inverting would just flood the whole box —
   it's already a neutral gray/white badge, so only grayscale is applied. */
.machinery-brands__grid img[alt="Kessler+Co"] {
  filter: grayscale(1);
}

/* Dana/Kessler/Volvo/Cummins are sourced from the index.html partner strip,
   whose source files carry very different amounts of transparent padding
   around the mark (Volvo's canvas is 3840x2160 for a mark a fraction of
   that) — a uniform max-height leaves them wildly mismatched in visual
   weight next to Caterpillar/Epiroc/Sandvik, so each gets an optically
   balanced override instead. */
.machinery-brands__grid--secondary img[alt="Volvo"] {
  max-height: 80px;
}

.machinery-brands__grid--secondary img[alt="Cummins"] {
  max-height: 64px;
}

.machinery-brands__grid span:nth-child(3n) {
  border-right: 0;
}

.machinery-brands__grid--secondary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -1px;
}

.machinery-brands__grid--secondary span:nth-child(3n) {
  border-right: 1px solid var(--line);
}

.machinery-brands__grid--secondary span:nth-child(4n) {
  border-right: 0;
}

@media (max-width: 640px) {
  .machinery-brands__grid {
    grid-template-columns: 1fr;
  }

  .machinery-brands__grid span {
    border-right: 0;
  }

  .machinery-brands__grid--secondary {
    margin-top: 0;
  }

  .machinery-brands__grid--secondary span:last-child {
    border-bottom: 0;
  }
}

/* ---------- PRO:SERVICE step cards ---------- */

.machinery-program--proservice {
  padding-bottom: 220px;
}

.machinery-program__head--proservice {
  padding-bottom: 96px;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
}

/* A slider, not a grid: exactly one card is "active" (data-service-slide,
   toggled by machinery.js initServiceSlider) and takes up the remaining
   row width with its reference-photo panel; the other three collapse to a
   fixed 176px number+label column. Figma: Group 25 (node 1:2372) plus its
   four "Big Slides" variants, one per active index. */
.machinery-service-grid {
  display: flex;
  align-items: stretch;
  gap: 13px;
}

.machinery-service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 176px;
  min-width: 0;
  height: 420px;
  padding: 16px;
  background: #e5e5e5;
  border: 1px solid var(--line-dark);
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: flex-basis 380ms var(--ease), background-color 380ms var(--ease), padding 380ms var(--ease);
}

.machinery-service-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}

.machinery-service-card__index {
  font-family: "Orbitron", sans-serif;
  font-size: 57.66px;
  line-height: 1.13;
  color: #cacaca;
  transition: font-size 380ms var(--ease);
}

.machinery-service-card__label {
  display: block;
  max-width: 212px;
  font-size: 16px;
  line-height: 1.5;
}

.machinery-service-card__media {
  display: none;
}

/* machinery-proservice-01..04.jpg are the 4 distinct per-card photos from
   Figma's updated design (gearbox cutaway / corroded axle joint / loader
   vehicle / technician in CAMS gear) — each already cropped to this box's
   own aspect ratio, so a plain object-fit:cover, not the oversized-image
   percentage-crop hack used for Figma imageTransform crops elsewhere on
   the site. */
.machinery-service-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.machinery-service-card.is-active {
  flex: 1 1 0;
  padding: 32px 12px 32px 32px;
  background: #131313;
  color: #fff;
  cursor: default;
}

.machinery-service-card.is-active .machinery-service-card__index {
  font-size: 107.66px;
}

.machinery-service-card.is-active .machinery-service-card__media {
  display: block;
  position: relative;
  flex: 0 0 338px;
  width: 338px;
  height: 398px;
  margin-left: 24px;
  overflow: hidden;
  border: 4px solid var(--accent);
}

/* Cards 3 and 4 swap to Figma's alternate color-block treatment when active
   (node 1:2435 / 1:2467): solid brand-color fill instead of the dark
   #131313 card, with the photo border in the OPPOSITE brand color, and
   card 4's number goes fully white instead of the muted #cacaca used
   everywhere else — matches by position since which card is "active"
   changes at runtime, but the 1st/2nd/3rd/4th card never reorders. */
.machinery-service-card:nth-child(3).is-active {
  background: #d6003d;
}

.machinery-service-card:nth-child(3).is-active .machinery-service-card__media {
  border-width: 9px;
  border-color: #57cce6;
}

.machinery-service-card:nth-child(4).is-active {
  background: #57cce6;
}

.machinery-service-card:nth-child(4).is-active .machinery-service-card__index {
  color: #fff;
}

.machinery-service-card:nth-child(4).is-active .machinery-service-card__media {
  border-width: 9px;
  border-color: var(--accent);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .machinery-models {
    grid-template-columns: 1fr;
  }

  .machinery-program__body {
    grid-template-columns: 1fr;
  }

  /* Figma's dedicated mobile layout (the "Mobile" frames in the source) is
     a plain vertical stack: the active card keeps its number/label/photo in
     one column instead of the desktop's number+label-vs-photo row, and the
     collapsed cards just shrink to their own content height instead of a
     fixed 420px. Reused down through the 640px breakpoint below since
     Figma doesn't define a separate in-between tablet state. */
  .machinery-service-grid {
    flex-direction: column;
    gap: 7px;
  }

  .machinery-service-card {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    gap: 16px;
  }

  .machinery-service-card__body {
    gap: 10px;
  }

  .machinery-service-card.is-active .machinery-service-card__media {
    width: 100%;
    height: 398px;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  /* Figma's mobile hero stacks nav -> machine photo -> title/lede/button,
     matching the desktop DOM order [topbar, stage, title block] inside
     .machinery-hero__frame already — collapsing the frame's own box with
     display:contents just makes its three children direct flex items of
     .machinery-hero so they can be freely restyled here without touching
     the HTML. */
  .machinery-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .machinery-hero__frame {
    display: contents;
  }

  .topbar {
    order: 1;
    width: var(--frame);
    margin-inline: auto;
    padding-top: 24px;
  }

  .machinery-hero__stage {
    order: 2;
    height: auto;
    width: var(--frame);
    margin-inline: auto;
    margin-top: 24px;
  }

  .machinery-hero__bg {
    width: 100%;
    height: auto;
  }

  .machinery-hero__bottom {
    order: 3;
    width: var(--frame);
    margin-inline: auto;
    padding: 24px 0 32px;
  }

  /* Figma's mobile model card is a normal top-to-bottom stack (label ->
     name/spec/nav -> sketch), not the desktop's absolute-positioned overlay
     (sketch centered behind a bottom-pinned row). Un-absolute both so they
     flow in DOM order, which is already label -> row -> sketch. */
  .machinery-models__col {
    min-height: 0;
  }

  .machinery-models__row {
    position: static;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 24px;
  }

  .machinery-models__sketch {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 32px auto 0;
    transform: none;
  }

  .machinery-program {
    padding: 64px 0;
  }

  .machinery-program__head {
    flex-direction: column;
  }

  .machinery-program--partsto .machinery-program__copy {
    max-width: 100%;
  }

  .machinery-program__body {
    min-height: 0;
  }

  .machinery-steps li {
    gap: 12px;
  }

  .machinery-rebuild__frames {
    min-height: 280px;
    margin-top: 32px;
  }

  .machinery-flow__node--box {
    width: 140px;
  }
}